Adding mermaid diagrams

I noticed at work the other day that GitLab renders mermaid diagrams automatically in README files. I wanted to implement the same for my blog.

In case you don’t know mermaid, it’s a text base approach to creating diagrams such as flow charts, sequence diagrams, etc. It’s similar to PlantUML, but this one can run in the browser too, which makes it very easy to integrate. Here’s an example:

This is some text before the graph.

graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2]

This is some text after the graph.

This is the code that renders the graph:

<div class="mermaid">
  graph TD
  A[Client] --> B[Load Balancer]
  B --> C[Server1]
  B --> D[Server2]
</div>

And enabling it on my blog is as simple as adding these lines before the closing </body> tag:

<script src="https://unpkg.com/mermaid@8.8.0/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

Update 2020-11-30: I changed the last line to:

<script>mermaid.initialize({startOnLoad:true, flowchart: { useMaxWidth: true }});</script>

so that the size of the diagram fits mobile devices too.