Diagrams as code with mermaid.js

2019/02/24

mermaid.js allows you to define diagrams as plain text and then render them as SVGs in your HTML. It’s extremely easy to use.

Define a div with class mermaid. Inside the div is the mermaid syntax.

<div class="mermaid">
graph TD
    Start --> Stop
</div>

Then somewhere after that div import the mermaid.js script and run initialize

<script src="mermaid.js"></script>
<script>
    mermaid.initialize({ startOnLoad: true });
</script>

The div tag defined above looks like this:

graph TD Start --> Stop

This is obviously much easier than fussing around with Google Slides or whatever you normally use to make diagrams.