## Pre-flight Checklist

|  #  | 項目                                 | 状態 | 備考 |
| :-: | ------------------------------------ | :--: | ---- |
|  1  | スタイル仕様の確認（本ファイル内蔵） |  ⬜  |      |
|  2  | 図解対象の要素数・関係性の把握       |  ⬜  |      |
|  3  | レイアウトパターンの選定             |  ⬜  |      |

> 全項目 ✅: 実行進行 / 1つでも ❌: 即時中断 + 理由報告

## Post-flight Checklist

|  #  | 項目                                       | 状態 | 備考 |
| :-: | ------------------------------------------ | :--: | ---- |
|  1  | SVGファイルが正しいXMLとして生成されている |  ⬜  |      |
|  2  | スタイル仕様準拠確認                       |  ⬜  |      |
|  3  | テキストの可読性確認（重なりなし）         |  ⬜  |      |

> 全項目 ✅: 完了報告 / 1つでも ❌: 修正後再検証

font-family: 'Nunito', 'Quicksand', system-ui, sans-serif;

<!-- 黄系 Blob -->
<path id="blob-c1" d="M 50,-80 C 100,-90 120,-30 110,20 C 100,80 50,110 -20,100 C -90,90 -120,30 -100,-30 C -80,-80 -10,-70 50,-80 Z"/>

<!-- 青系 Blob -->
<path id="blob-c2" d="M 60,-70 C 110,-60 120,0 90,50 C 60,100 -10,120 -60,90 C -110,60 -120,-10 -90,-60 C -60,-100 10,-80 60,-70 Z"/>

<!-- ピンク系 Blob -->
<path id="blob-c3" d="M 30,-90 C 90,-80 110,-20 100,40 C 90,100 20,110 -40,90 C -100,70 -110,10 -80,-40 C -50,-90 -20,-100 30,-90 Z"/>

<!-- 緑系 Blob -->
<path id="blob-c4" d="M 80,-60 C 120,-30 110,40 70,80 C 30,120 -40,110 -80,70 C -120,30 -110,-40 -70,-80 C -30,-120 40,-90 80,-60 Z"/>

<!-- 大きいハブ Blob -->
<path id="blob-hub" d="M 90,-120 C 150,-100 160,-20 140,50 C 120,120 40,160 -40,140 C -120,120 -160,40 -130,-30 C -100,-100 -10,-140 90,-120 Z"/>

        [要素1]     [要素3]
             \       /
              [ハブ]
             /       \
        [要素2]     [要素4]

[Step1] ~~> [Step2] ~~> [Step3] ~~> [Step4]

          [親]
         / | \
    [子1] [子2] [子3]

Pre-flight Checklist 出力 + 確認
        ↓ (全て ✅)
Phase 1: コンテキスト収集
  - 本ファイル内のスタイル仕様を確認
  - 図解対象の要素・関係性を分析
        ↓
Phase 2: レイアウト設計
  - 要素数と関係性からレイアウトパターン(A/B/C/D)を選定
  - 各要素の位置・色割り当てを決定
        ↓
Phase 3: SVG生成
  - <defs> セクション（グラデーション、Blob、スタイル）※シャドウなし
  - 背景レイヤー
  - コネクタレイヤー
  - 要素レイヤー（Blob + バッジ + テキスト）
  - フッターレイヤー
        ↓
Phase 4: 品質検証
  - XML整合性、テキスト重なり、色コントラスト確認
        ↓
Post-flight Checklist 出力 + 検証
        ↓ (全て ✅)
完了報告 + ファイルパス出力

<svg xmlns="http://www.w3.org/2000/svg" width="1400" height="800" viewBox="0 0 1400 800">
  <defs>
    <!-- 背景グラデーション -->
    <linearGradient id="org-bg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#fdfbfb"/>
      <stop offset="100%" stop-color="#ebedee"/>
    </linearGradient>

    <!-- Blob パス定義 (要素数に応じて追加) -->
    <path id="blob-c1" d="M 50,-80 C 100,-90 120,-30 110,20 C 100,80 50,110 -20,100 C -90,90 -120,30 -100,-30 C -80,-80 -10,-70 50,-80 Z"/>
    <!-- ... blob-c2, blob-c3, blob-c4, blob-hub ... -->

    <!-- シャドウなし: フラットスタイル -->

    <style>
      .og-title { font: 800 46px 'Nunito', 'Quicksand', system-ui, sans-serif; fill: #334155; letter-spacing: -0.5px; }
      .og-sub { font: 600 22px 'Nunito', 'Quicksand', system-ui, sans-serif; fill: #64748b; }
      .og-h { font: 800 24px 'Nunito', 'Quicksand', system-ui, sans-serif; fill: #1e293b; }
      .og-s { font: 600 16px 'Nunito', 'Quicksand', system-ui, sans-serif; fill: #475569; }
      .og-num { font: 900 42px 'Nunito', 'Quicksand', system-ui, sans-serif; fill: #ffffff; }
      .og-center { font: 800 32px 'Nunito', 'Quicksand', system-ui, sans-serif; fill: #ffffff; }
    </style>
  </defs>

  <!-- 背景 -->
  <rect width="1400" height="800" fill="url(#org-bg)"/>

  <!-- タイトル -->
  <text x="700" y="110" text-anchor="middle" class="og-title">{{TITLE}}</text>
  <text x="700" y="150" text-anchor="middle" class="og-sub">{{SUBTITLE}}</text>

  <!-- コネクタ -->
  <g stroke="#94a3b8" stroke-width="4" stroke-dasharray="12 12" fill="none" stroke-linecap="round">
    <!-- 各要素→ハブへのベジェ曲線 -->
  </g>

  <!-- 要素群（順序あり: 番号バッジ付き） -->
  <!-- 注意: filter属性は使わない。Blobは1つの<use>のみ（レイヤード禁止） -->
  <!-- 注意: Blob内にはバッジ+テキストのみ。カスタムアイコン/イラスト/装飾図形は一切禁止 -->
  <g transform="translate(X,Y)">
    <use href="#blob-cN" fill="{{PASTEL_COLOR}}"/>
    <circle cx="-50" cy="-50" r="30" fill="{{ACCENT_COLOR}}"/>
    <text x="-50" y="-35" text-anchor="middle" class="og-num">1</text><!-- 数字のみ。略語禁止 -->
    <text x="0" y="10" text-anchor="middle" class="og-h">{{HEADING}}</text>
    <text x="0" y="40" text-anchor="middle" class="og-s">{{DESCRIPTION}}</text>
  </g>

  <!-- 要素群（順序なし: 番号バッジなし） -->
  <!-- 注意: Blob内にはテキストのみ。カスタムアイコン/イラスト/装飾図形は一切禁止 -->
  <g transform="translate(X,Y)">
    <use href="#blob-cN" fill="{{PASTEL_COLOR}}"/>
    <text x="0" y="10" text-anchor="middle" class="og-h">{{HEADING}}</text>
    <text x="0" y="40" text-anchor="middle" class="og-s">{{DESCRIPTION}}</text>
  </g>

  <!-- ハブ (中心要素がある場合) -->
  <g transform="translate(700,450)">
    <use href="#blob-hub" fill="#8b5cf6"/>
    <text x="0" y="10" text-anchor="middle" class="og-center">{{HUB_LABEL}}</text>
    <text x="0" y="40" text-anchor="middle" class="og-s" fill="#e2e8f0">{{HUB_SUB}}</text>
  </g>

  <!-- フッター -->
  <g transform="translate(700, 740)">
    <rect x="-350" y="-30" width="700" height="60" rx="30" fill="#ffffff"/>
    <text x="0" y="8" text-anchor="middle" class="og-sub">{{FOOTER_MESSAGE}}</text>
  </g>
</svg>

# Organic SVG Diagram 生成完了

> **出力ファイル**: `docs/diagrams/{{FILENAME}}.svg`
> **レイアウト**: Pattern {{A/B/C/D}}
> **要素数**: {{N}}個

## スタイル準拠チェック

- Blobシェイプ: ✅
- パステルカラー: ✅
- Nunito/Quicksandフォント: ✅
- フラットスタイル（シャドウ/レイヤードなし）: ✅
- ダッシュ線コネクタ: ✅

# 基本実行（対象を指定）
/organic-svg-diagram アーキテクチャ概要を図解して

# レイアウト指定
/organic-svg-diagram --layout=flow パイプラインを図解して

# 既存SVGのスタイル修正
/organic-svg-diagram --restyle docs/existing-diagram.svg