ox-hugo で mermaid.js を使う方法
はじめに このブログは、以下のワークフローで運用されています。 graph LR org-mode -- <a href="https://ox-hugo.scripter.co/">ox-hugo</a> --> markdown -- <a href="https://gohugo.io/">Hugo</a> --> HTML 上のようなフローチャートなどのダイアグラムを載せようとすると、どのような方法が思い浮かぶでしょうか？ まさか、パワポ等で作ったダイアグラムを画像としてエクスポートして…なんて方法は考えていませんよね？ それ、Dティアです 図1: パワポはまじでDティア それはさておき、私はダイアグラムを作る方法について詳しくなかったので、ox-hugo を使うという前提で Gemini 2.5 Pro に、Deep research してもらいました。 結果、以下のようなTier Listができました。1 表 1: ox-hugo でのダイアグラム作成方法のTier List by Gemini 2.5 Pro & me S HugoレンダーフックによるMermaid.js A Org Babel + Hugo Kroki 純粋なOrg Babel実行 (PlantUML/Ditaa) B GUIツール (Excalidraw等) で作成し、SVG/PNG画像として挿入 レガシーなHugoショートコード C iFrame埋め込み アスキーアート (ditaa, GoAT) D 🤮 M社製品 (PowerPoint, Visio)で作成+バイナリ挿入 🤮 表で示しているように、個人的にはmermaid.js を使うのがベストです。 しかし、方法がそれほどシンプルではなく、 少し面倒だったので、書き残しておきます。 ...