Organic Svg Diagram

Organic SVG Diagram

核心コンセプト: "柔らかく親しみやすい有機的な技術図解"

Blob（不定形有機曲線）とパステルカラーを用いて、硬い技術的な印象を和らげた インフォグラフィック風のSVGダイアグラムを生成するスキル。

EXECUTION PROTOCOL (MANDATORY)

Pre-flight Checklist (実行前必須)

## Pre-flight Checklist

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

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

Model Routing Policy

Post-flight Checklist (実行後必須)

## Post-flight Checklist

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

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

核心原則

1. スタイル仕様内蔵: 本ファイル内のスタイル仕様が唯一の真実のソース。逸脱禁止。
2. 有機的シェイプ優先: 直線矩形禁止。全てBlobまたは曲線ベースのシェイプを使用。
3. 可読性最優先: テキストの重なり、小さすぎるフォント、コントラスト不足を許さない。

スタイル仕様（SSOT）

全体の雰囲気・テーマ

「Organic Light」 — 有機的で柔らかい、自然な曲線と淡いパステルで構成された親しみやすいインフォグラフィック。直線や角張った矩形を排除し、Blob（不定形の有機的形状）を主要シェイプとして使用することで、硬い技術的な印象を和らげている。

キーワード: 柔らかい、親しみやすい、ナチュラル、非テクニカル、有機的

キャンバス

カラーパレット

Blob 塗り + アクセント

配色ルール: Tailwind の 100〜200 相当をBlob塗りに、500 相当をアクセント円に使用

テキスト色（Slate系グレー統一）

コネクタ色

#94a3b8 (Slate-400) — ミュートグレー

フォント

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

フォント選択の意図: Nunito / Quicksand は丸みを帯びたジオメトリックサンセリフで、Blobの有機的な形状と調和する。タイトルのみ letter-spacing: -0.5px で少し詰める。

シェイプ

Blob（主要シェイプ）

• <path> で描かれた不定形の閉じた曲線
• 各要素ごとに微妙に異なる形状（コピペ感を排除）
• 半径おおよそ 80〜120px 相当の有機的形状
• 直線・矩形は使用しない

Blob定義

<!-- 黄系 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"/>

番号バッジ

• 各Blobの左上 (-50, -50) に配置
• 正円 r=30、濃い色背景（要素のアクセント色）
• 白文字で番号（900 weight, 42px）
• 数字のみ許可: 1, 2, 3... のアラビア数字のみ使用可能
• 略語・アルファベット禁止: V, B, L, A, EV 等の頭文字や略語をバッジに入れてはならない
• 番号が不適切な場合はバッジ省略: 要素に自然な順序がない場合（例: 並列なエージェント群、対等な概念の列挙）は番号バッジ自体を省略し、Blobとテキストのみで表現する

Blob内部の構成要素（厳格制限）

Blob内に配置して良い要素は 以下のみ。これ以外の一切の要素（アイコン、イラスト、装飾図形等）を追加してはならない。

• カスタムアイコン・ミニイラスト禁止: 温度計、矢印、星、チェックマーク等のSVG図形をBlob内に描画してはならない
• 絵文字・Unicode記号禁止: テキスト要素内に絵文字やUnicode記号（🔥, ⭐, ▶ 等）を入れてはならない
• 理由: Organicスタイルの統一感を損ない、Blobの有機的な柔らかさと視覚的に衝突するため

フッター

• rx=30 の角丸ピル型矩形（白背景 #ffffff）
• 幅 700px, 高さ 60px

コネクタ仕様

エフェクト

禁止: <feDropShadow>, filter="url(#...shadow...)", 同一Blobの複数スケール重ね（レイヤード効果）, ハブ内の半透明白円オーバーレイ(<circle fill="#ffffff" opacity="0.2"/>)

レイアウトパターン

Pattern A: ハブ放射型（デフォルト）

中央にハブ、周囲に要素を放射状に配置。要素→ハブへダッシュ線ベジェ曲線で接続。

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

• 適用場面: 中心概念と構成要素の関係図、アーキテクチャ概要
• 要素数: 3〜6個 + ハブ

Pattern B: フロー型（左→右）

左から右へ流れるパイプライン。各ステップをBlobで表現し、曲線矢印で接続。

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

• 適用場面: 処理フロー、パイプライン、ワークフロー
• 要素数: 3〜6個

Pattern C: 階層型（上→下）

上から下へ階層構造。親→子をダッシュ線で接続。

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

• 適用場面: 組織図、分類体系、依存関係ツリー
• 要素数: 1親 + 2〜5子

Pattern D: 比較型（左右対称）

中央線を挟んで左右に対比する要素を配置。

• 適用場面: Before/After、比較分析、Pro/Con

実行フロー

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

SVGテンプレート骨格

<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

変更履歴