Mermaid provides a markup language to describe diagrams. Describing diagrams in text brings many advantages.
In the same way that LaTeX and KaTeX provides a text-based language to enable elegant math expressions to be drawn in documents, Mermaid provides a language to describe the layout of diagrams.
The Mermaid project is open source, hosted on GitHub.
Example Flowchart
The above flowchart was generated by this Mermaid code:
1<div class="mermaid">
2 graph TB
3 id1([START])
4 id1-->id10[[reset order values to defaults]]
5 id10-->id20[/user inputs order details/]
6 id20-->id30{order valid?}
7 id30 -->|Yes| id40[calculate total price]
8 id30 -->|No| id50[/display error/]-->id20
9 id40-->id60[/display order summary/]
10 id60-->id70[(save order)]
11 id70-->id9999([END])
12</div>
Including Mermaid Diagrams in Markdown
Mermaid code is normally included in a code block. The start and end of the block may vary according to the tools you are using to edit your Markdown document and the tools you use to convert your Markdown to other formats, such as PDF or HTML.
Some tools (VSCode Extension: Markdown Preview Mermaid Support
, VSCode Extension: Markdown PDF
require that the Mermaid code block begins and ends with HTML div tags, like this:
1<div class="mermaid">
2 Mermaid code here
3<\div>
Where-as there are other tools that require the Mermaid code block to simply begin with ‘Mermaid’ added as the language of the block, like this:
1```Mermaid
2Mermaid code here
3```