環境

• Hugo v0.58.3
• mermaid v8.3.1

ショートコードからmermaidを使う

ショートコードを使って mermaid で描画する場合、以下のように mermaid を呼び出すスクリプトを記述し、ショートコード layouts/shortcode/mermaid.html を追加しておく。

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

layouts/shortcode/mermaid.html

<div class="mermaid">
    {{ safeHTML .Inner }}
</div>

すると以下のように記述することで、mermaid記述を描画することができる。

{{< mermaid >}}
graph LR;
	A --> B
		B --> C
		B --> D
{{</ mermaid >}}

コードフェンスからmermaidを使う

コードフェンスで mermaid を指定して描画を行う場合、描画対象をクラス指定で .language-mermaid とすることで描画できる。

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.3.1/mermaid.min.js"></script>
<script>
    window.onload = function() {
        mermaid.init(undefined, ".language-mermaid");
    };
</script>

注意点があり、このとき Hugo の機能を使ってコードハイライトを pygmentsCodefences = true で有効にすると、コード背景色が反映された状態で描画される。Hugo のコードハイライトを無効にし、highlight.js を代わりに使うことで解決できる。

​```mermaid
graph LR;
	A --> B
		B --> C
		B --> D
​```

graph LR;
	A --> B
		B --> C
		B --> D