How to code diagrams, graphs and pie charts

The subject of this tutorial is Mermaid, which is a Markdown dialect. Put simply, Mermaid code looks like Markdown code and enables you to create flows, diagrams, charts and more. It’s based on JavaScript that renders the Markdown as code to generate the output, because Markdown doesn’t offer support for drawing. Mermaid is supported by many editors including Microsoft Visual Code and typora, which we’ll cover here. There are also online editors that can render Mermaid code and create the respective output.

Mermaid code is delivered in blocks. The first line of a Mermaid block specifies the type of the plot. Valid values include graph, pie, sequence diagram and flowchart. Each plot type has its own syntax, and it’s much easier to include Mermaid code in Markdown files that use the md file extension (filename.md), which is what we’ll be using for the examples of this tutorial.

A Mermaid block in a Markdown file begins with ```mermaid and ends with ``` – this is the Markdown way of telling that the embedded code has a given property, which in this case is Mermaid. However, Mermaid code can also be saved on its own