Diagrams as code with mermaid.js


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

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

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

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.