Mermaid ダイアグラム

Mermaid のフローチャートやダイアグラムを Markdown 内で直接描画する。

mermaid 機能は、Mermaid のフェンス付きコードブロックをビルド時にマークします。zfb はコードブロックを <div class="mermaid"> に置き換えます。図の描画は、Mermaid runtime がその要素を処理するときにクライアントサイドで行われます。

有効化

// zfb.config.ts
export default defineConfig({
  markdown: {
    features: {
      mermaid: true,
    },
  },
});

使い方

mermaid 言語タグを付けたフェンス付きコードブロックを書きます:

```mermaid
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
```

ビルド時に、プラグインは <pre><code class="language-mermaid"> ブロックを次のように置き換えます:

<div class="mermaid" data-mermaid="">graph TD; ...</div>

data-mermaid 属性と mermaid クラスは、クライアントサイドの Mermaid レンダラーにこのブロックを処理するよう知らせます。生のダイアグラムソースはそのまま埋め込まれる（山括弧などの文字は HTML エスケープされません）ため、レンダラーは無変更の Mermaid DSL を受け取ります。

ビジターの順序

MermaidPlugin は hast フェーズで SyntectPlugin の前に実行されます。これにより、syntect が mermaid ブロックをシンタックスハイライトしようとしないことが保証されます。<pre> が <div class="mermaid"> に置き換えられると、syntect の <pre><code> セレクターはもう一致しなくなるためです。