, 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
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
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.