Mermaidダイアグラム

フローチャート、シーケンス図などのMermaidダイアグラムサポート。

mermaid言語のフェンスドコードブロックでダイアグラムを描画できます。Mermaidはオンデマンドで読み込まれるため、Mermaidブロックのないページにはオーバーヘッドがありません。

フローチャート

```mermaid

graph LR
  A[開始] --> B{判定}
  B -->|はい| C[アクション]
  B -->|いいえ| D[別のアクション]
  C --> E[終了]
  D --> E

```

シーケンス図

```mermaid

sequenceDiagram
  participant ユーザー
  participant アプリ
  participant API
  ユーザー->>アプリ: ボタンクリック
  アプリ->>API: データ取得
  API-->>アプリ: JSONレスポンス
  アプリ-->>ユーザー: 結果表示

```

状態遷移図

```mermaid

stateDiagram-v2
  [*] --> Draft
  Draft --> Review : 提出
  Review --> Published : 承認
  Review --> Draft : 変更依頼
  Published --> Archived : アーカイブ
  Archived --> [*]

```

拡大とズーム・パン

描画されたすべての図には、その右上に拡大ボタンが表示されます。これは Image Enlarge と同じ操作感です。クリックすると、Google マップのようなズーム・パン操作ができるダイアログで図が開き、情報量の多い図も近くで確認できます。

ダイアログには 3 つのコントロールがあります。

• + で拡大します。

• − で縮小しますが、ダイアログの元の全幅サイズより小さくはなりません。

• パン（手のアイコン） で、拡大した図をドラッグして移動できます。

有効・無効の挙動は次のとおりです。

• 開いた直後は、図が全サイズで表示されます。− とパンは無効で、クリックできるのは + のみです。

• + をクリックすると拡大され、− とパンが有効になります。

• パンが有効な状態では、ドラッグして図をパンできます。

• − をクリックすると縮小し、元の全幅に戻ると − とパンは再び無効になります。

下の図で試してみてください。拡大ボタンをクリックし、+ でズーム、手のアイコンでパンできます。

設定

Mermaidサポートはzfb.config.tsのmermaidフィールドで制御されます：

export default defineConfig(
  zudoDoc({
    // ...
    mermaid: true, // デフォルトで有効
  }),
);

サポートされているダイアグラムの種類については、Mermaid公式ドキュメントを参照してください。

関連ページ

• Mermaid（Markdown 機能） — mermaid の設定フィールドとフェンス構文