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.
mermaid code describes a Finite State Machine (FSM) for the
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:
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
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.