※ Some sentences were helped with translator site:)

I had a chance to think about using mermaid in this site I created using Hugo theme. I actually tried to incorporate it into the site, so I leave it as an article.

※ I mainly tried to make it work without any errors, so there may be some things that are better to do this way or not to do this way. Please read and implement accordingly.

Procedure

  1. Download mermaild.min.js and mermaild.min.js.map from UNPKG of mermaid.
  2. Put the two files you get around static/js.
    • Rename them as appropriate. I changed it to mermaild.min.9.2.js with version information.
  3. Create layouts/shortcodes/mermaid.html:
<script src="{{"js/mermaid.min.9.2.js" | relURL}}" defer></script>
<div class="mermaid" align="{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}">
    {{ safeHTML .Inner }}
</div>
  1. (When checking locally) Build & Start up dev server.
  2. Describe {{<mermaid>}} <contents> {{< /mermaid >}}.

Result

This is an example of the official documentation I put in to try it out:
(It might be a little hard to see in dark mode.)

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

Reference

I have taken the following article as a reference! Thank you very much.
(Japanese article)