Use Mermaind in Hugo

March 09, 2020

Page content

I think my solution here is not the best way to use Mermaid in Hugo.

What is Mermaid?

Mermaid is a sequence diagram generator written in Javascript.

Not only sequence diagrams, Mermaid can also generate simple graphs.

I tried two patterns but I failed both cases.

Make a template in the theme Mainroad. I’ve Tried to copy MathJax template but failed. But this is the simplest and useful, so I need to study Hugo more. Making my own theme would be the best solution, but that is not what I want to do.
Change the theme to “Learn.”
Hugo Learn theme (official): https://learn.netlify.com/en/
Actually, I also tried this theme, but it is good for a closed document. Like my case of notes and memo contains different topics, I think it isn’t suitable.

So… My conclusion is

Make Mermaid file and generate an image from it. After then, attach it to the post with Markdown syntax.

mermaid-cli convert Mermaid-syntax document to PNG image file.

You can download it via npm; Naturally, you should install Node.js environment.

Refer to this post (to be written) to install Node.js in MacOS.

If you already install Node.js in your environment, install mermaid-cli with the following command.

npm install -g @mermaid-js/mermaid-cli

The following command generates PNG file output.png from Mermaid-syntax file input.mmd and make output background as transparent.

mmdc -i input.mmd -o output.png -b transparent

I put images under static/mermaid/.
In any Markdown files in the project, I wrote like following (in this sample static/mermaid/sample_0.png).
```
![image alt text](/mermaid/sample_0.png "this is comment")
```