Technical requirements

In this chapter, we will explore how to use Mermaid to generate flowcharts. For most of these examples, you will only need an editor with support for Mermaid. A good editor that is easy to access is Mermaid Live Editor, which can be found at https://mermaid-js.github.io/mermaid-live-editor. It only requires your browser to run. For demonstrating some of the functionality, where we will be exploring interaction, you will need to have a web page open that you can add JavaScript functions to. An easy way to experiment with this is to continue with the Adding Mermaid to a simple web page example from Chapter 2, How to Use Mermaid, and apply the additional code to that page.

Another thing to be aware of is that in this chapter, the shapes in the flowchart will be called nodes, while the lines between the nodes will be called edges. In the following image, you can see a couple of nodes with different shapes connected by an edge:

Figure...