Posted at

Hugoにmermaidを組み込んでみた

Hugoにmermaidを組み込んでみたの抜粋版です


What's mermaid ?

フローチャートやシーケンスダイヤグラムやガントチャートをサクサクと書くことのできるライブラリです


01.png


公式サイト:mermaid


設定メモ


mermaidを取ってくる

mermaid.jshttps://unpkg.com/mermaid/から取ってきて、themes/theme/static/assetmermaidフォルダを作成してコピーする


mermaidをよきに計らうショートコードを書く

themes/theme/layouts/shortcodes

<div class="mermaid" align="{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}">

{{ safeHTML .Inner }}
</div>

mermaid.htmlとして書いておいた


ページでmermaidが呼び出されるように書いておく

ページで呼び出されるscriptをthemes/theme/layouts/partialsheader.htmlfooter.htmlのscriptタグが書かれているところに追記しておく

個人的にはthemes/theme/layouts/partialsscripts.htmlにまとめるようにしているので、そこにmermaidも追記しておいた

<script src="{{"asset/mermaid/mermaid.js" | relURL}}"></script>


きちんと動作するかテストしてみる

たとえば

{{<mermaid align="center">}}

graph TD

A[お正月] -->|お年玉をゲット| B(買い物に行くよ)
B --> C{どれにしようかな}
C -->|これかな| D[iTunes Card]
C -->|これかな| E[iPhone XS Max]
C -->|ま まさか| F[fa:fa-car The CLS Coupé]
{{< /mermaid >}}

な風に書いておくと

02.png

こうなってくれます

素晴らしい!!