Hugo で Mermaid 記法を使用する方法

Hugo
目次

Hugo の v0.92.1以前のバージョンで Mermaid 記法を使用する方法を記載します。

環境

ますはバージョンチェックをします。

PS /path/to/your-directory> hugo version
hugo v0.92.1-85E2E862 windows/amd64 BuildDate=2022-01-27T11:44:41Z VendorInfo=gohugoio

ディレクトリ構造

/path/to/your-directory
├─archetypes
├─assets
├─content
├─layouts
│  ├─partials
│  │  ├─gtm
│  │  └─widgets
│  ├─posts
│  ├─shortcodes
│  │  └─mermaid.html   # 追加するファイル
│  └─_default
│     └─baseof.html    # 変更するファイル

HTML レイアウトの変更

layouts/_default/baseof.html を開き、以下の内容を追加します。 11.1.0 の部分には Mermaid のバージョンを入力します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.1.0/mermaid.min.js"></script>
<script>
    window.onload = function () {
        mermaid.init(undefined, ".language-mermaid");
    };
</script>

ショートコードの追加

shortcodes layouts/shortcodes/ に mermaid.html を作成し、以下の内容を記述します。

<div class="mermaid">
    {{ safeHTML .Inner }}
</div>

表示

以下の内容を記事に記述して、フローチャートを表示してみます。

\```mermaid
---
title: Sample
config:
  theme: forest
---
flowchart LR
    X(Start)
    A[Entry]
    B{Received data ?}
    D[[Do process]]
    Z(End)

    X --> A
    A --> B
    B -- Yes --> D
    D --> Z
    B -- No --> Z
\```

---
title: Sample
config:
  theme: forest
---
flowchart LR
    X(Start)
    A[Entry]
    B{Received data ?}
    D[[Do process]]
    Z(End)

    X --> A
    A --> B
    B -- Yes --> D
    D --> Z
    B -- No --> Z