5 ms·
Mermaid Gantt diagrams for displaying distributed traces in Markdown (2023)
- avipars 2y agoI had to make my own gantt chart for a project in C#, it sounds simple but can be annoying... This makes me appreciate Mermaid all the more so.
- frozenport 2y agoMermaid doesn't scale beyond simple plots try https://perfetto.dev/ https://perfetto.dev/ which can ingest basic csvs
- cloin 2y agoI was interested to see what this would be like applied to ansible job events coming from automation controller/awx so I put something simple together. I kind of like the tracelike visualization and might use it somewhere https://files.techhub.social/media_attachments/files/112/836/693/442/875/210/original/9a06bee77082681b.png https://files.techhub.social/media_attachments/files/112/836...
- rubymamis 2y agoThat's cool! I will implement this in my block editor[1] as a new block type. [1] https://www.get-plume.com https://www.get-plume.com
- _-_-__-_-_- 2y agoThis domain name is unfortunate.
- deleted 2y ago[deleted]
- onehp 2y agoI wonder how much effort it would be to put together something expanding on this that's really friendly to new developers exploring a system. The goal would be to have something that looks more like a traditional swimlane diagram, but with human readable labelling of the connections. The open telemetry data should provide a nice skeleton and then maybe use some LLM summarisation (with access to the source code) to label what's going on.
- thomasfromcdnjs 2y agoI've been loving this service called CodeRabbit that auto generates these diagrams off my pull requests, it's fantastic -> https://github.com/jsonresume/jsonresume.org/pull/131#issuecomment-2236198926 https://github.com/jsonresume/jsonresume.org/pull/131#issuec...
- jddj 2y agoAnd a ...poem?
- geysersam 2y agoThat looks positively futuristic.
- tamiral 2y agodiagrams + poems sounds like a wonderful time in code reviews!
- anytime5704 2y agoThis looks super neat. I didn’t see anything on the page about running the tool locally (remote code analysis is a deal breaker). Anyone know if that’s an option?
- notpushkin 2y agoGiven it's a paid service – probably not. There are local code <-> LLM interfaces though (CLI tools, editor extensions), and if you can figure out a suitable prompt you can get pretty similar experience. (Of course, you'll also want to run an LLM locally as well)
- codewithcheese 2y agoYes, looks like they could be adapted to create Story Maps
- DavidPeiffer 2y agoI love diagrams to represent how systems are setup and run. At one employer, they had hundreds of spreadsheets around the network drive which often linked together via formula or VBA code, along with queries out to databases. I built a file parser (in VBA, because that is what was available) to log every file reference to a big table, the generate graphviz code to visualize it. It's easy to say "tons of stuff uses $datasource", but it's way better if you can show exactly how much and the impact of changes. It was incredibly useful when we changed our domain and all network drive mappings broke.
- juujian 2y agoYes, I'm not a pragmatic person. But the lives going right through the text, that would bother me so much if I was to regularly use this.
- genezeta 2y agoIt bothered me too. Apparently a single CSS addition makes it more reasonable: .grid .tick line { opacity: 0.3; }
- beeforpork 2y agoWhy is the Gantt chart rendered in JavaScript on the client instead of right away by the .md > .html converter?
- chad1n 2y agoI think that the point is to be easy to be changed, since Mermaid's first use case is to be used in building diagrams/graphs with data fetched at runtime like telemetry or finances data. I guess you can probably use Mermaid and take the resulting html and add it to the resulting document if you really want.
- karolist 2y agoHa, I was pondering the exact same question after reading this, for this use-case and in more widespread sense. I've came to the conclusion that it's a form of outsourcing your costs. The clients want to view your charts? They pay for it with their electricity, instead of your server doing handouts for everyone.
- Beijinger 2y agoNice. But the first page ot the Live Editor shows an UML diagram. I used this in the past, found it via HN: https://nomnoml.com/ https://nomnoml.com/
- einpoklum 2y agoA simple syntax for gantt charts is a nice enough idea. But I don't understand: 1. What that has to do with markdown? I mean, that syntax isn't markdown nor does it require anything markdown-related to render AFAICT. 2. What mermaid is; the link itself doesn't explain it. I think this does, sort of: https://mermaid.js.org/intro/ but then - how does this relate to graphviz, or gnuplot? I'm missing that information. 3. Can I get something nice-and-compilable, not JS, for rendering these gantt charts into SVGs or what-not?
- turnsout 2y agoNot a complete answer to your question, but Mermaid is a plain-text diagram format which, while far from perfect, is supported by Github. So if you're looking to include a simple chart in your Readme or Markdown docs, it's a good choice.
- refulgentis 2y ago#1. mermaid is a syntax for diagrams that is markdown native, in that it is designed to be fit well in MD, and shares goals like ex. a progressive upgrade from text to render that is readable in either format #2. Graphviz and gnuplot also render diagrams #3. Sort of like asking if you can get a Markdown renderer in not JS: most direct answer is yes. If the Q is more "can Mermaid be rendered as SVG?", yes, the render format is SVG
- einpoklum 2y agoI should have probably written: Something portable and compilable to a small(ish) Unix/Windows dynamic library with an associated C header, which takes the Mermaid input and produces some kind of vector graphic output like SVG. So it can be used basically everywhere and with everything.
- deleted 2y ago[deleted]
- Beijinger 2y agohttps://nomnoml.com/ https://nomnoml.com/ does allow export to SVG if I remember right. But does not do GNATT Diagrams AFAIK. I just tried the LIVE Editor: https://mermaid.live/ https://mermaid.live/ Yes, it does allow SVG export. Nice!
- gchamonlive 2y agoRelated, we at Nunet use a GitlabCI Template to render SVGs from Mermaid files so we can reuse them: https://gitlab.com/nunet/gitlab-ci/templates/-/tree/main/mermaid-to-svg?ref_type=heads https://gitlab.com/nunet/gitlab-ci/templates/-/tree/main/mer... This could be easily ported to Github Workflows, because the logic is very simple.
- awwaiid 2y agoAt that point you could use PlantUML (which has nicer syntax, but worse theme defaults)
- jmull 2y agoI didn't know about Mermaid. It looks nice. This post is a little confusing, though, because this isn't markdown. It's mermaid's own markdown-like syntax for graphs/charts. I wasn't expecting it to run client-side.
- jayd16 2y agoPopular (or at least relevant) markdown implementations support mermaid charts. GitHub and gitlab do, for example.
- codetrotter 2y agoAnd if you use mdbook you can use the mdbook-mermaid preprocessor https://crates.io/crates/mdbook-mermaid/ https://crates.io/crates/mdbook-mermaid/
- buovjaga 2y agoDocs: https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams https://docs.github.com/en/get-started/writing-on-github/wor... https://handbook.gitlab.com/handbook/tools-and-tips/#using-mermaid https://handbook.gitlab.com/handbook/tools-and-tips/#using-m...
- jbperry 2y agoDocusaurus also supports it: https://docusaurus.io/docs/markdown-features/diagrams https://docusaurus.io/docs/markdown-features/diagrams
- deleted 2y ago[deleted]
- Anton123ads 2y ago[dead]
- neonsunset 2y agoWow, TIL you can use Mermaid for this. This is incredibly useful, thank you!
- mrits 2y agoI used mermaid for years but recently converted to Eraser.io.
- BiteCode_dev 2y agoIf mermaid came with a similar integration in IDE and collaborative tooling, would you switched back?
- archgoon 2y agoFor those unaware, chromium has built in support for viewing trace files (obviously, not relevant if you want mermaid diagrams for documentation) https://www.chromium.org/developers/how-tos/trace-event-profiling-tool/ https://www.chromium.org/developers/how-tos/trace-event-prof... It looks like though the old catapult code has been officially deprecated, and they're recommending switching over to Perfetto. https://github.com/google/perfetto https://github.com/google/perfetto So anyhow, I just learned about the perfetto switch, so I won't try and dig up a link to the old way of formatting your traces to work with chrome://tracing, as it sounds completely deprecated. Go use Perfetto if you want a fairly easy way of interacting with trace data. I assume it's at least as good and useful as chrome://tracing.
- teamx 2y agoWe use the mermaid gantt chart to track our releases, as well as team individuals that are out of office. Looks like this: Out of office: [John Doe] [Stacy] Release: [code freeze] [Staging date] [Release!]
- otikik 2y agoI use a google spreadsheet with 1 colum per day and 1 row per person. It looks like: Jan 1 2 3 4 5 6 7 8 9 ... John X X X X X Stacy X X X Release CF FF
- pronoiac 2y agoYou need at least two leading spaces to get that to render as code and preserve the layout, like: Out of office: [John Doe] [Stacy] Release: [code freeze] [Staging date] [Release!]
- smusamashah 2y agoSee also https://app.markwhen.com/ https://app.markwhen.com/ Its a dedicated text-to-timeline generator. Don't know if it can be embedded or available as a library too.
- koch 2y agoThanks for the shoutout, glad you like it! Also available for VS code[0] and Obsidian[1] [0] https://marketplace.visualstudio.com/items?itemName=Markwhen.markwhen https://marketplace.visualstudio.com/items?itemName=Markwhen... [1] https://obsidian.md/plugins?search=Markwhen https://obsidian.md/plugins?search=Markwhen
- smusamashah 2y agoCan it be used like mermaid's js lib? or ever considered making one out of it?
- koch 2y agoThere’s a CLI [0] that outputs html, alternatively you can encode the markwhen text as base64 and append it as a hash to timeline.markwhen.com which will render it. Would look like timeline.markwhen.com#mw=[base64 encoded text] [0] https://docs.markwhen.com/cli.html https://docs.markwhen.com/cli.html
- jdcampolargo 2y agoused claude to generate some diagrams, and it was insanely good!
- random_i 2y agoI was a big Mermaid fan, but no longer. It is very difficult to save the images as bitmap (.jpeg, .mpng) or vector (.svg). You basically have to use a headless browser rendering toolkit, and guess what? The images aren't consistent (different rendering styles). I'm switching to Graphviz (DOT-based) which can look just as nice and has tons of file save features.
- prepend 2y agoComically, the way I save mermaid images are through screenshots. But this is only if I need to put it in a paper or something as otherwise just point the user to the diagram in a browser. It is still much better than any alternative I can think of.
- boomskats 2y agoThe thing that's problematic is rendering Mermaid SVGs outside of a browser environment - i.e. what static site generators need in order to generate JS-free HTML docs from Markdown content. If you're looking at a rendered Mermaid diagram on your screen, you probably already have the SVG in your browser's dom. You can just right click -> view source -> find element -> view as html -> save that to a file. I expect this is how the SVG export on the Mermaid live editor[0] works. (the Mermaid live editor is great, it's where I tend to go if I want an SVG export) [0]:https://mermaid.live/ https://mermaid.live/
- otikik 2y agoWhen I have needed a static image I have just taken a screenshot. I would still put the mermaid code and style next to it in case future modifications were needed. Worked reasonably well.
- el_oni 2y agoI've been using d2 recently [0] It's similar enough to mermaid but with the CLI you can output svg and png and have some decent looking diagrams. [0] https://d2lang.com/ https://d2lang.com/
- steve1977 2y ago
- kibwen 2y agoI've used mermaid from within markdown before, but the whole premise still leaves me conflicted. The original selling point of markdown is that it wasn't a markup language; it was readable text that could optionally be rendered with some extra niceties if you were reading it in something more sophisticated than a simple text field. While mermaid is undoubtedly useful as a textual language for describing graphs, the spirit of markdown would favor something that actually looked like a graph without needing to run it through a renderer, something more akin to ascii art, but with well-defined semantics such that it would produce something reasonable if you did have a renderer at hand.
- PMunch 2y agoYou might want to have a look at svgbob or typograms then. I used the former for creating diagrams for a guide on Git and it worked really well. Of course Markdown editors could be better at "drawing" things, which would solve the pain in creating these diagrams.
- chipdart 2y ago> (...) the spirit of markdown would favor something that actually looked like a graph without needing to run it through a renderer, something more akin to ascii art, but (...) I completely disagree. The spirit of Markdown is to provide something that is a user-friendly, simple and easily works on most cases. The spirit of Markdown is not to bear with substandard, unreadable, and outright unfriendly documents just because ineffectiveness and lack of support for basic features is wrongly interpreted as simplicity. Markdown supports images. Mermaid is nothing more than a way to simplify how developers can put together and maintain images without requiring specialized editors or additional software.
- fastball 2y agoWhile I agree in principle, in practice the result would probably be terrible. Just look at tables in GFM, which mostly were designed as you propose. They look like tables even before rendering, however the experience of actually creating and editing the tables is not fun at all. I have a horse in this race (co-founder of a markdown-based note-taking app) and to me, the benefit of markdown is easy + explicit editing, not that it looks the same in plain text vs rendered.
- aronhegedus 2y agoAs an aside, Chat GPT is very good at giving you a baseline for mermaid diagrams given a technical spec/ hand drawn image
- xnorswap 2y agoI've tried this exact scenario and they're really not great. They fall down when you want to partially collapse the trace. Mermaid supports either fully-collapsed, which will re-order your items, or not collapsed at all.
- ulrischa 2y agoWe had it days before: https://news.ycombinator.com/item?id=40987923 https://news.ycombinator.com/item?id=40987923
- ks2048 2y agoThis blog post doesn't mention it, but the tweet that it links to contains the more interesting point: GitHub markdown supports automatically rendering these mermaid diagrams.