Mermaid is a Javascript-based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
Click here and download the minified file of the latest version of mermaid.
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%}
<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>