hugoでUMLを図で表示させる方法

記事内に商品プロモーションを含む場合があります。

2023.9.5 15 views

手順

HUGOの公式を参考にmermaidに対応した形式でUMLを図で表示させたいと思います。
生成されるHTMLにmermaidクラスを指定したいので、layouts/_default/_markup/render-codeblock-mermaid.htmlファイルを作成します。
書く内容は次のとおりです。

<pre class="mermaid">
  {{- .Inner | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}

.Contentの後にmermaid.jsを読み込む必要があるので、</body>の直前に記載。
すべてのページで読み込ませる必要がないのでmermaid形式の記述があるページだけmermaid.jsを読み込ませます。
私の場合はlayouts/_default/baseof.htmlの</body>の直前に記載しました。

{{ 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 }}

マークダウンファイルにはこのように書くと、実際のWEBページでは図として表示されます。

```mermaid
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!
```

↓のように表示されます。※図になっているはず。

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 
prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!