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 --> [*]
```

設定

Mermaidサポートはsrc/config/settings.tsのmermaid設定で制御されます：

export const settings = {
  // ...
  mermaid: true, // デフォルトで有効
};

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