Hugo BlogでMermaidグラフをレンダリングしてみよう

現在私の技術ブログはHugoというテンプレートエンジンを使用しています。Hugoは静的サイトジェネレーターで、MarkdownファイルをHTMLに変換する役割を果たします。

私たちがよく使うマークダウンにはコードブロックというものがあります。

以下のGoコードもきれいに文法を強調して表示されます。

func main() {
	fmt.Println("Hello, World!")
}

Javaコードも同様にコードブロックを通して文法を強調して表示します。

public class Main {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
}

実際、コードブロックはとても一般的な機能であり、多くのマークダウンでサポートされていますが、時にはダイアグラムを描く必要がある時もあります。

その場合、一般的に使用されるツールはGUIでの伝統的な強者draw.ioや、excalidrawのように手で描いたような感触を与えるツールもあります。

筆者は手で描く感じが好きで、excalidrawをよく使用しています。

開発者の場合、コードに親しんでいるため、コードベースでダイアグラムを描くツールも多く存在しています。例えば、Mermaid、graphviz、D2などです。

その中で最も普及しているツールはMermaidと言えるでしょう。Mermaidは特有の文法を使用してダイアグラムを描けるツールです。

例えば以下のような文法を使用すると

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

以下のようなグラフを描くことができます。

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

現在私のブログに適用されているHextraというテーマは、基本的にMermaidをサポートしています。ただし、すべてのブログテーマがMermaidをサポートしているわけではありません。

そこで今回は、どのHugoブログでもMermaidを使用できるようにする方法を探ろうと思います。

Layoutにコードブロックレンダリング追加

まず、layoutsにmermaidコードブロックをレンダリングできるコードを追加する必要があります。

<pre class="mermaid">
  {{ .Inner | htmlEscape | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}

上記のファイルを正しいパスに追加すればいいだけです。

baseof.htmlにMermaidスクリプト追加

一般的にHugoにはlayouts/_default/baseof.htmlがあります。このHTMLはHugoのすべてのページに共通して適用されるHTMLです。

したがって、既存のbaseof.htmlのbodyタグが閉じる前に次のコードを追加します。

<!-- ... -->
{{ 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 }}
</body>

使用法

これで使用するマークダウンコードブロックにmermaidというクラスを追加すれば、そのコードブロックがMermaidでレンダリングされます。

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

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

参考

• https://gohugo.io/content-management/diagrams/