GitHub adding support for Mermaid diagrams

GitHub will be baking in support for Mermaid diagrams into their Markdown variant rendered for README.md etc.

Always interesting to keep up with what the competition’s doing ;-). Mermaid is a JS library easily embeddable, with sequence diagrams, entity relationship diagrams, gantts, alongside more traditional graphviz-style directed graphs.

1 Like

I think it’s worth asking ourselves why GitHub didn’t integrate Graphviz; maybe we can learn about our competitiveness. My guesses:

My guesses: Graphviz is in C, Mermaid is in JS, Mermaid is easier to integrate. Mermaid also has a few higher-level features (Gantt charts, Entity Relationship Diagrams, Sequence Diagrams).

While it’s possible to compile Graphviz to wasm/web-worker and embed on a website, it’s a pretty big library. There’s a bit of an impedance mismatch.

Finally I wouldn’t be surprised if the default styling played a part. Graphviz’s default styling is, well, spartan, while Mermaid’s is a bit nicer.

1 Like

Interesting. Similarly, there is pikchr (Pikchr: Documentation), a variant of the PIC graphics language, that can also be embedded in some markdown - but not here.
Pikchr consists of a single C program that produces SVG.
To-date, the biggest strength of Graphviz is mid-size and large graphs.
What might make Graphviz more attractive for smaller diagrams?

  • interactive or animated results (maybe not that hard?)
  • easier author control of node and/or edge placement (infinitely challenging)
  • class/style capability (maybe not that hard if done as a (built-in) pre-processor?)
  • DIY nodes

  • Personally, I like fiddling with small-to-mid sized issues, but not at the expense of the code quality or the large-sized features.

From my perspective are the looks the biggest drawback of Graphviz. Having a few standard templates to choose from for a graph would be great. As an example, if you could with one parameter turn the visuals into a Mermaid diagram.

I don’t see the wasm size as a real problem. It is compressed 388KB, uncompressed about double. (Details · Discussion #87 · hpcc-systems/hpcc-js-wasm · GitHub)

(but only my 5p).