18th September 2021
|Flowchart diagrams||Sequence diagrams|
|Class diagrams||State diagrams|
|Entity Relationship diagrams||Gantt diagrams|
|Pie char||Git graphs|
Currently Mermaid does not offer line charts.
The Mermaid web-site also offers a command-line interface and an online-editor. Testing out your diagrams can either be done in Codepen, with this live editor on the web, or locally in StackEdit. Mermaid was originally written by Knut Sveidqvist.
Examples are shown below:
In contrast to other graph libraries, for example, JpGraph, a PHP library, in Mermaid you specify your graph in a Markdown-like language. I have written on JpGraph here.
For example: To graph a pie-chart you would specify:
pie title German Amateur Radio Classes in 2020 "Class A": 62466 "Class E": 8818
Another example is for a Gantt chart.
gantt title Software Project section Specification Specification: a1, 2022-01-01,12w section Implementation Implementation: a2, after a1, 12w section Documentation Documentation: a3, after a2, 3w section Test Test: a4, after a3, 12w section Go-Live Go-Live: a5, after a4, 2w
I first heard of Mermaid when I read about the StackEdit Markdown editor, which supports Mermaid out of the box.