Mermaid記法

Mermaid記法ってご存知ですか？
テキストだけでフローチャートやガントチャートが描けちゃうという魔法の記法です。

公式サイト

Mermaid | Diagramming and charting tool

見本

見ていただいたほうが早いと思うので、ご覧ください。
こんな感じのフローチャートがテキストだけで表現できます。

フローチャートの見本

flowchart TB A([開始]) --> B{"気分は？"} B --> |コーヒー| C[スタバ] B --> |ビール| D[ビアガーデン] C --> E([終了]) D --> E

中身

中身はこんな感じになっています。

flowchart TB
  A([開始]) --> B{"気分は？"}
  B --> |コーヒー| C[スタバ]
  B --> |ビール| D[ビアガーデン]
  C --> E([終了])
  D --> E

全角の？がうまく認識されずエラーになるので、そんなときは"で囲めばオッケーです。

Hugoで使いたいんじゃ

Hugoのみでの対応はありません。
利用するにはちょっとした準備をしてあげるか、Mermaid記法に対応したテーマを使う感じになります。

Hugoのドキュメントと利用手順

Diagrams | Hugo

  1. Mermaid用のテンプレートを作成します。
    • サンプルでは layouts/_default/_markup/render-codeblock-mermaid.html
  2. 記事を表示させるテンプレート内にコード（※1）を追記します。
    • layouts/_default/single.html とかで、.Content の呼び出しよりも後に追記します。
  3. 記事内でMermaid記法が利用可能になります。

※1 追記するコード

{{ if .Page.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 }}

使えるようになりました

あっさりHugoで使えるようになりましたね。

勢いで設定してみましたけど、 実際に使うときが来るのかは不明です。

ここまで書いて気付いた

これ、あっちのサイトのネタだわ・・・。

k-kaz が Hugo で遊ぶサイト

また時間のあるときに、そっちでも書くか・・・というか、転記だな。