はじめに

ブログを書いていて mermaid形式のデータを取り扱えるようにしたいなと思ったので導入してみる。

環境

1
2

Docker Desktop 4.33.1 (161083)
hugo v0.122.0+extended linux/amd64 BuildDate=unknown

Shotcodeを作る

layouts/partials 以下のファイルを修正

custom_head.htmlに以下の修正を加える。

1
2

<!-- For mermaid -->
{{ partial "mermaid.html" . }}

同じ階層に mermaid.htmlを以下のように作成する。

1
2
3
4

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

上記でCDNから利用できるようにする。

layouts/shortcodes/mermaid.html を作成する

1
2
3

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

試す

下記のコードで試す。

1
2
3
4
5
6
7

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

おぉ！できてる！

参考

おわりに

今後、mermaid形式のものをブログで表示したかったので導入した。
参考記事に感謝です。