Rendering your first diagram using the Live Editor
In the previous section, you learned that the Live Editor uses the latest version of Mermaid and makes all the new features and bug fixes available here. You know by now enough about the Live Editor in theory, so now it's time to get some quick, hands-on practice.
In this hands-on exercise, we will take an example of a flowchart diagram for making tea. We will start off with a sample flowchart template, then modify the flowchart code to suit the needs of our use case, and then also change the default theme option to a different theme using the configuration options.
Follow these instructions to render your first Mermaid diagram using the Live Editor:
- Start by opening a new window of a web browser of your choice. You may choose from Chrome, Firefox, Safari, or Edge.
- Next, open a new session of the Mermaid Live Editor in the browser.
- Now, click on the Flowchart button under the Sample Diagram widget to load...
