preloader

Mermaid Is Cool

Mermaid Is Cool
By J. Toman / on 25 Jul, 2020

Lately I’ve been doing some technical writing for a client in order to document some workflows on their website. In the course of doing this I stumbled upon a lovely little javascript library mermaid.js and an article about an easy way to integrate mermaid into Hugo, the static site generator I use for most of my web development.

graph TD; id1[Add mermaid.js]-->id2[Create graphs]; id2-->id3[Improve reader understanding];

What great fun! The code for the preceding graph (which is just a tweaked example from the site) is:

graph TD;
  id1[Add mermaid.js]-->id2[Create graph];
  id2-->id3[Improve reader understanding];

which is simple enough that anyone can do it. Of course, with great power comes the danger of

graph TD; id1[Add mermaid.js]-->id2[Create graphs]; id2-->id3[Improve reader understanding]; id3-->id4[Get overexcited]; id4-- add some more -->id2; id4-- too many charts -->id5[Alienate reader];

so I’ll try to be conservative in my use of charts. Still they often can convey an idea more succinctly than a whole paragraph of text, so it’s a good tool to keep in your back pocket. Mermaid can do a lot more than just these simple flowcharts, like sequence diagrams, class diagrams, entity relationships, Gantt charts and more. All in all a very handy little tool.