2022 Note: Now that I’m on Hugo blogging system, this post is out of date.

I’ve always wanted to be able to put simple diagrams in this blog without going through the trouble of graphically creating them in LucidChart or Balsamiq. I just want to type in text, and have it convert to a chart.

graph TD
A[Blog with no diagrams] --> B
B(Download mermaid.js) --> C{Do you like it?}
C -->|Yes| D
C -->|No| E
D[Me too.]
E[Troublesome.]

How I did this⌗

First I added these two lines to my footer. (All my JS is in the footer. It was the “best practice” back when I made this theme.)

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.4.3/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true, theme: 'neutral'});</script>

Then in my regular editor, I wrote this markdown code.

```mermaid
graph TD
A[Blog with no diagrams] --> B
B(Download mermaid.js) --> C{Do you like it?}
C -->|Yes| D
C -->|No| E
D[Me too.]
E[Troublesome.]
```

And that didn’t work!

The error and the fix⌗

It turns out that my blogging platform, the abandoned AnchorCMS, uses the PHP Parsedown libarary to convert Markdown to HTML. When it sees a block like ```mermaid , it converts that to class="language-mermaid". The Mermaid library is looking for class="mermaid".

Surely that’s an option in the Mermaid library?

Yes. Yes it is.

I just had to turn off startOnLoad, and call the init function myself.

<script>
  mermaid.initialize({startOnLoad: false, theme: 'neutral'});
  mermaid.init('.language-mermaid'); // look for .language-mermaid instead of .mermaid
</script>

And that worked!

These are the two links I used the most for learning how mermaid.js works.

The two downsides:

  • No Balsamiq-style sketchy theme. I like that sketchy look to reinforce how impermanent and non-serious my thoughts are.
  • No unicode support. A higher-order unicode character, like ☺️, makes everything fail. (And if you don’t see a smiling face there, your browser needs some reconfiguring.)