Mermaid ダイアグラムのプレビュー検証

このドキュメントでは、Markdown 内に記述された mermaid コードブロックがどのようにレンダリングされるかをテストします。

1. フローチャート (Flowchart)

flowchart TD
    Start --> FindFile[Markdownファイルを追加]
    FindFile --> Build[Astroビルド / 開発サーバー起動]
    Build --> Render[ブラウザでプレビュー]
    Render --> ShowMermaid{Mermaidコードを含むか?}
    ShowMermaid -- Yes --> Parse[mermaid.jsで動的レンダリング]
    ShowMermaid -- No --> ShowText[通常のMarkdown表示]
    Parse --> End[美しい図面の表示]
    ShowText --> End

2. シーケンス図 (Sequence Diagram)

sequenceDiagram
    autonumber
    ユーザー->>HP: プレビューページにアクセス
    HP->>Astro: Markdownファイルの一覧を要求
    Astro-->>HP: ファイルリストの生成 (SSG)
    ユーザー->>HP: ファイル名をクリック
    HP->>ブラウザ: 該当ファイルのHTMLを描画
    Note over ブラウザ: Mermaidコードブロックを検出
    ブラウザ->>mermaid.js: テキストをパースしてSVG生成
    mermaid.js-->>ブラウザ: ダイアグラムを描画完了

3. 円グラフ (Pie Chart)

pie title 週末の開発時間の内訳
    "Gemini / Claude との対話" : 55
    "コーディング" : 25
    "リファクタリング" : 10
    "デバッグ" : 10

4. ガントチャート (Gantt Chart)

gantt
    title 検証機能開発ロードマップ
    dateFormat  YYYY-MM-DD
    section 設計・準備
    要件定義           :active, 2026-06-11, 1d
    フォルダ・構成設計 : 2026-06-11, 1d
    section 実装
    コレクション追加   : 2026-06-12, 1d
    UI・レンダラー実装 : 2026-06-12, 2d
    section 検証
    動作確認・テスト   : 2026-06-14, 1d