Hugoにmermaidを組み込んでみた

2590 ワード
作業ログ mermaid.js Hugo 作業ログ テキストリンク

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

What's mermaid ?

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



公式サイト：mermaid

設定メモ

mermaidを取ってくる

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

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/partialsのheader.htmlかfooter.htmlのscriptタグが書かれているところに追記しておく
個人的にはthemes/theme/layouts/partialsのscripts.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 >}}

な風に書いておくと

こうなってくれます

素晴らしい！！