3 ms·

Mermaid - support in many markdown rendering pages. Embedding a ``` block in Markdown and having it versioned as text is the big win. Graphviz - same basic re

by shagie 2y ago

Mermaid - support in many markdown rendering pages. Embedding a ``` block in Markdown and having it versioned as text is the big win. Graphviz - same basic reason as Mermaid, though no markdown support. Versioning text is a lot easier than versioning binaries. Draw.io - if you've got to have a binary, this is it. In particular, it allows you to embed the drawing information in the image so that you can import a .png file into draw.io and get the drawing.

scrapheap 2y ago
I'm a big fan of both Mermaid and Graphviz - Thanks to GitLab supporting Mermaid we can put relevant project diagrams inline in Markdown docs that live in the same git repo as the rest of the project code. And if I need to generate a graph programmaticaly then I instinctively reach for Graphviz as it's solid and can produce the graphs in so many different file formats that they're easy to include wherever they're needed. Your code is a lot simpler as it doesn't need to handle any of the rendering logic, it just needs to work out which nodes are connected by which edges.
rcarmo 2y ago
My big complaint about mermaid is that you cannot easily generate and store the SVGs without a browser engine—-even the CLI goes and runs Chrome, which feels insane. Regarding graphviz/dot, I have been using it from what feels like the dawn of time and am somewhat sad that we haven’t improved upon it. The syntax, styling imitations, etc. put me off enough that I tend to avoid it.
- shagie 2y ago
  Digging, there's https://github.com/mermaid-js/mermaid-cli https://github.com/mermaid-js/mermaid-cli For graphviz, the "problem" with it is that it truly is general purpose and trying to make a general purpose syntax for diagrams is difficult. Mermaid tackles this by not having it be applicable to all possible graphs (flow chart has a different syntax than gitGraph) allowing for a better domain specific language for each subset of functionality. https://mermaid.js.org/syntax/packet.html https://mermaid.js.org/syntax/packet.html is really neat... and it would be a pain to do that in GraphViz ... but I believe that's more of a demonstration that it might be better to do specific syntaxes for specific types of diagrams. The most general Mermaid form is https://mermaid.js.org/syntax/block.html https://mermaid.js.org/syntax/block.html - and that syntax doesn't really feel like it is an improvement over GraphViz.
  - rcarmo 2y ago
    mermaid-cli uses puppeteer to run a browser. The container packs Chromium. It makes no real effort to render anything without all that overhead.

by shagie 2y ago

scrapheap 2y ago

I'm a big fan of both Mermaid and Graphviz - Thanks to GitLab supporting Mermaid we can put relevant project diagrams inline in Markdown docs that live in the same git repo as the rest of the project code. And if I need to generate a graph programmaticaly then I instinctively reach for Graphviz as it's solid and can produce the graphs in so many different file formats that they're easy to include wherever they're needed. Your code is a lot simpler as it doesn't need to handle any of the rendering logic, it just needs to work out which nodes are connected by which edges.

rcarmo 2y ago

My big complaint about mermaid is that you cannot easily generate and store the SVGs without a browser engine—-even the CLI goes and runs Chrome, which feels insane. Regarding graphviz/dot, I have been using it from what feels like the dawn of time and am somewhat sad that we haven’t improved upon it. The syntax, styling imitations, etc. put me off enough that I tend to avoid it.

shagie 2y ago
Digging, there's https://github.com/mermaid-js/mermaid-cli https://github.com/mermaid-js/mermaid-cli For graphviz, the "problem" with it is that it truly is general purpose and trying to make a general purpose syntax for diagrams is difficult. Mermaid tackles this by not having it be applicable to all possible graphs (flow chart has a different syntax than gitGraph) allowing for a better domain specific language for each subset of functionality. https://mermaid.js.org/syntax/packet.html https://mermaid.js.org/syntax/packet.html is really neat... and it would be a pain to do that in GraphViz ... but I believe that's more of a demonstration that it might be better to do specific syntaxes for specific types of diagrams. The most general Mermaid form is https://mermaid.js.org/syntax/block.html https://mermaid.js.org/syntax/block.html - and that syntax doesn't really feel like it is an improvement over GraphViz.
- rcarmo 2y ago
  mermaid-cli uses puppeteer to run a browser. The container packs Chromium. It makes no real effort to render anything without all that overhead.