Home Installing and using MermaidJS
Post
Cancel

Installing and using MermaidJS

Mermaid JS

Mermaid is a Javascript-based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

Installation

  1. Click here and download the minified file of the latest version of mermaid.

  2. Include the downloaded file in the base html.

1
<script src='./assets/js/plugins/mermaid.min.js'></script>

Note: If you are using a Jekyll site, use the following snippet to reduce unnecessary loading.

1
2
3
4
5
{%- if page.mermaid == true -%}
  <script src="{{ '/assets/js/plugins/mermaid.min.js' | relative_url }}"></script>
{%- endif -%}

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="mermaid">
graph TD;
    A-->B["∅"];
    A-->C["A"];
    B-->D["∅"];
    B-->E["B"];
    C-->F["A"];
    C-->G["AB"];
    D-->H["∅"];
    D-->I["C"];
    E-->J["B"];
    E-->K["BC"];
    F-->L["A"];
    F-->M["AC"];
    G-->N["AB"];
    G-->O["ABC"];
</div>
graph TD; A-->B["∅"]; A-->C["A"]; B-->D["∅"]; B-->E["B"]; C-->F["A"]; C-->G["AB"]; D-->H["∅"]; D-->I["C"]; E-->J["B"]; E-->K["BC"]; F-->L["A"]; F-->M["AC"]; G-->N["AB"]; G-->O["ABC"];
This post is licensed under CC BY 4.0 by the author.

Markdown Cheat Sheet

Vim Cheat Sheet