HugoでMermaidを使用したい

独自構文のテキストから各種のダイアグラムを生成できるライブラリMermaidをHugoで使う方法です。

ここで紹介している方法はHugo 0.93.0からサポートされた機能（codeブロックに対するレンダーフックの設定）を使っているため、v0.93.0以上でご利用ください。

レンダーフックの追加 §

新しくレンダーフック用のファイルを作成し以下の内容を記述します。

layouts/_default/_markup/render-codeblock-mermaid.html

パーシャルテンプレートの追加 §

新しくパーシャルテンプレートのファイルを作成し以下の内容を記述します。

layouts/partials/mermaid.html

{{- if .Page.Store.Get "hasMermaid" }}
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script>
    mermaid.initialize({ startOnLoad: true });
  </script>
{{- end }}

テンプレートの修正 §

Mermaidの図を表示したいテンプレートへ以下の内容を追加します。ここではデフォルトテンプレートを例にしています。

layouts/_default/single.html

  {{- partial "mermaid.html" . }}

上記をテンプレートへ追記する場合の注意点としては、.Contentが出現する箇所より下へ書く必要があるということです。Hugoでは.Contentが実行（評価）されるまではレンダーフックは処理されないためです。

テンプレート中に、

	{{- .Content }}

という表記があると思いますので、それよりも下の行に追加します。ここまで終わればマークダウンファイル中へ、

```mermaid
	flowchart LR
    Start --> Stop
```

と書けば、

	flowchart LR
    Start --> Stop

という表示を得られるはずです。