mermaid: Markdown Tool for Graphs

I needed to represent a Finite State Machine (FSM) for my Smoker Controller project. I could have gone with the pencil and paper route but what I learned in dot: command line utility for drawing graphs was that there are better tools. Since this project was documented in markdown from the start I looked for a way to do it all in markdown. It turns out there is a plugin called mermaid that does everything dot does without the compile step. But with a different syntax. 🙁 Many markdown processors have this plugin pre-installed. 🙂 I am using Joplin and it works just fine.

This mermaid code describes a Finite State Machine (FSM) for the SmokerController.ino program.

stateDiagram-v2
Start --> Begin
Begin --> Begin : powerSW OFF
Begin --> Standby : powerSW ON
Standby --> Standby : targetT valid
Standby --> Begin : powerSW OFF
Standby --> SetMode : targetT not valid
SetMode --> SetMode : targetT not valid
SetMode --> Session : targetT valid and >= standbyT
SetMode --> Standby : targetT valid and < standbyT
Session --> Session : targetT >= standbyT
Session --> SetMode : targetT not valid

and this is what it looks like if you have the plugin installed:

Finite State Machine

The diagram uses the Mermaid plugin for Joplin. Note that this renders fine within Joplin but on export it requires that the mermaid support files are copied in the right places in order to render as an image. These files are included by the export in the folder pluginAssets.

Now if you wanted the mermaid drawing to render into a JPG or PNG file you need other resources. Mermaid only renders dynamically. Since I haven’t figured this out yet for WordPress, I used a screen shot.

Leave a Reply

Your email address will not be published. Required fields are marked *