Page 1 of 1

Mermaid for diagrams using text-based coding

Posted: 15 Mar 2022, 08:50
by DaveT1
I recently tripped across this tool (https://mermaid-js.github.io/mermaid/#/README). For example, the code in the first 6 lines below, produces the flowchart diagram shown:
image.png
image.png (32.26 KiB) Viewed 1410 times
Because the code is text-based, it can be integrated in your project folder and be part of your version control, with diffs etc., being handled in the the usual way.

I use VS Code and there is an extension to preview Mermaid code, so:
image.png
image.png (86.93 KiB) Viewed 1410 times
Hope that's helpful.

Re: Mermaid for diagrams using text-based coding

Posted: 29 Mar 2022, 22:46
by iseahound
I just want to say that this is really cool. (But also looks really slow given it's a layer on top of d3.js but speed doesn't matter here.)

Re: Mermaid for diagrams using text-based coding

Posted: 29 Mar 2022, 23:39
by hoppfrosch
An alternative for this is graphviz.

Here are a few examples.

Re: Mermaid for diagrams using text-based coding

Posted: 30 Mar 2022, 02:29
by DaveT1
iseahound wrote:
29 Mar 2022, 22:46
...(But also looks really slow given it's a layer on top of d3.js but speed doesn't matter here.)
Hmm, you might be right. I've only used for very emall diagrams, so I guess it's possible that speed might be an issue for larger diagrams?

Re: Mermaid for diagrams using text-based coding

Posted: 30 Mar 2022, 02:31
by DaveT1
hoppfrosch wrote:
29 Mar 2022, 23:39
An alternative for this is graphviz.

Here are a few examples.
I had a quick look (but didn't use) and graphviz looks almost identical to mermaid! It also seems to have a number of VScode extensions if that's your IDE. Good to see alternatives :thumbup: