This blog now has diagrams!

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.

And that worked!

Notes and links

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.)

Comments

(Commenting is closed. Please tweet me at @landedstar instead.)

żaden.