静的サイトジェネレーターHugoでMermaid記法を使うための設定方法

Diary
静的サイトジェネレーターHugoでMermaid記法を使うための設定方法

公式サイトを参考に

Hugo用のMarkdown原稿にMermaid記法での図を書き、ブログ記事に取り入れたくなった場合。どのようにファイルを用意すればそれが実現できるのかのメモ。

HugoでMermaid記法を使うには、公式サイトの上記ページの、For example, to create a code block render hook to render Mermaid diagrams:という行以下に示されている2ファイルのコードを、自身のサイトのHugoファイルに反映すれば良い。

  • 新規作成: layouts/_default/_markup/render-codeblock-mermaid.html
    <pre class="mermaid">
	{{- .Inner | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}
  • 既存ファイルの末尾に追加: layouts/_default/baseof.html (themeがmainroadの場合はthemes/mainroad/layouts/_default/baseof.html)
    {{ if .Store.Get "hasMermaid" }}
<script type="module">
	import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
	mermaid.initialize({ startOnLoad: true });
</script>
{{ end }}

例: Mermaid記法で描くsequenceDiagram

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!