Priyanshu Tiwari

Installing and using MermaidJS

Posted on Dec 25, 2020

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.

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

{%raw%} {%- if page.mermaid == true -%}
<script src="{{ '/assets/js/plugins/mermaid.min.js' | relative_url }}"></script>
{%- endif -%} {%endraw%}

Usage

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