Mermaid for diagrams using text-based coding

[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 (32.26 KiB) Viewed 1362 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 (86.93 KiB) Viewed 1362 times

Hope that's helpful.

[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.)

[hoppfrosch]

An alternative for this is graphviz.

Here are a few examples.

[DaveT1]

...(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?

[DaveT1]

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