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.

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

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.