Tonight I learned about Mermaid, which is a plaintext markup language and renderer for creating flowcharts and other kinds of diagrams.

I want to make flowcharts quickly for my technical projects at work, but i don’t have Visio, and I hate fiddling with a GUI to line up shapes and worry about arrow lengths and so on. The way my mind works, I just want to type out what I want and have software figure out how to lay it out for me. I don’t care that much how it looks, as long as it is simple and makes sense.

Mermaid’s plaintext premise is really cool, and the syntax is flexible enough to not be awful. It is way more flexible than the examples on The Mermaid website originally led me to believe. You can name each shape whatever you like (not just single letter identifiers) and you can define the content (shapes) and relationships (arrows) separately if you want to. The only thing that stinks is that you have to manually insert html break tags (<br/>) for line breaks, because there is no word wrap.

I still need to figure out what the best renderer is for me. The Mermaid Live Editor does not produce usable charts on my work machine’s web browser (the new Edge) for some reason. Typora seems like it will do for now.