, 1 min read
Mermaid: A JavaScript Library for Diagrams
Original post is here eklausmeier.goip.de/blog/2021/09-18-mermaid-a-javascript-library-for-diagrams.
Mermaid is a JavaScript library which provides diagrams for:
| 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 website 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.