Mermaid Gantt diagrams are great for displaying distributed traces in Markdown (2023)

I'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.

I 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.

I 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...

Related, 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/mer...

This could be easily ported to Github Workflows, because the logic is very simple.

I 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.

We 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!]

As an aside, Chat GPT is very good at giving you a baseline for mermaid diagrams given a technical spec/ hand drawn image

A 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?

That's cool! I will implement this in my block editor[1] as a new block type.

[1] https://www.get-plume.com

Yes, 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.

For 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-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

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.

I 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.

I'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.

See also 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.

I 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.

Mermaid doesn't scale beyond simple plots try https://perfetto.dev/ which can ingest basic csvs

Nice. 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/

This 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.

We had it days before: https://news.ycombinator.com/item?id=40987923

Why is the Gantt chart rendered in JavaScript on the client instead of right away by the .md > .html converter?

I used mermaid for years but recently converted to Eraser.io.

This domain name is unfortunate.

used claude to generate some diagrams, and it was insanely good!

Wow, TIL you can use Mermaid for this. This is incredibly useful, thank you!