Hugo で PlantUML のようなシーケンス図を描画する

Hugo で PlantUML を描画して埋め込めないものかと調べていると、

• Add exec shortcode #796 - gohugoio/hugo・GitHub

Hugo の Shortcodes の機能を使って、HTML の生成をフックにしてレンダリングした後に埋め込む、みたいなことをできるようにする議論自体はあったものの進んでいないようで、他の案はないかと調べると PlantUML ではなく mermaid が良いとわかった。

vjeantet/hugo-theme-docdock にあったディレクトリ構成を真似て以下のようにした。

• b4b4r07/tellme.tokyo - f8fe64c・GitHub

Shortcodes を使って以下のようなシーケンス図を書くと、

{{\< mermaid align="left" \>}}
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!
{{\< /mermaid \>}}

次のようにレンダリングされる。

便利になった。

mermaid の書き方は公式のドキュメントが参考になる。

• mermaid・GitBook

参考

• Mermaid :: Documentation for Hugo Learn Theme
• Introduce Mermaid diagram support - feature - Hugo Discussion