Technical requirements

In this chapter, we will look at how to use Mermaid to generate state diagrams. For most of these examples, you only need an editor with support for Mermaid. A good editor that is easy to access is Mermaid Live Editor, which can be found online at https://mermaid-js.github.io/mermaid-live-editor/, and only requires your browser to be running.

All the examples in this chapter have been created using the second version of state diagrams in Mermaid (SDV2). The second version is backward compatible with the first version, (SDV1), but adds many features not available in SDV1, such as choices and directions. From version 8.11 of Mermaid, SDV2 will be the default state diagram and you can use the examples in this chapter without changes. With earlier versions of Mermaid, you need to start the diagram code with stateDiagram-v2 instead of stateDiagram in order to select the correct version.