# Organic Svg Diagram

> Organic Light スタイルでSVGダイアグラム・図解を生成するスキル。 Blob（有機的不定形）シェイプ、パステルカラー、Nunito/Quicksandフォントで 柔らかく親しみやすい技術図解を作成する。 **核心機能**: - Organic Light スタイル準拠のSVGダイアグラム生成 - 複数レイアウトパターン対応（ハブ放射型、フロー型、階層型） - スタイル仕様はこのファイルに内蔵（外部参照不要） "図解", "ダイアグラム", "SVG", "Organic", "organic-svg" 等の要求でトリガーされる。 <example> user: "このアーキテクチャを図解して" assistant: "organic-svg-diagramを使用してOrganic LightスタイルでSVGダイアグラムを生成します" </example> <example> user: "フロー図をSVGで作って" assistant: "organic-svg-diagramを使用してフロー図を生成します" </example>

- Skill: `majiayu000/organic-svg-diagram` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/organic-svg-diagram`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/organic-svg-diagram/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/organic-svg-diagram

---


# Organic SVG Diagram

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

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

---

## EXECUTION PROTOCOL (MANDATORY)

### Pre-flight Checklist (実行前必須)

```markdown
## Pre-flight Checklist

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

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

### Model Routing Policy

| 作業タイプ           | モデル | 根拠                       |
| -------------------- | ------ | -------------------------- |
| 要素分析・構造設計   | haiku  | 単純なテキスト分析         |
| SVGコード生成        | sonnet | 中程度の複雑さのコード生成 |
| 複雑なレイアウト調整 | opus   | 空間配置の高度な推論       |

### Post-flight Checklist (実行後必須)

```markdown
## Post-flight Checklist

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

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

---

## 核心原則

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

---

## スタイル仕様（SSOT）

### 全体の雰囲気・テーマ

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

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

### キャンバス

| 項目             | 仕様                                                               |
| ---------------- | ------------------------------------------------------------------ |
| **サイズ**       | 1400 x 800px                                                       |
| **背景**         | リニアグラデーション `#fdfbfb` → `#ebedee`（白→ウォームグレー）    |
| **配置パターン** | 中心ハブ + 四隅放射型（左上・左下・右上・右下に4要素、中央にハブ） |
| **中心ハブ位置** | (700, 450) — やや下寄りの重心                                      |
| **要素配置**     | 左列(x=280)に2要素、右列(x=1120)に2要素、y=360/580で上下配置       |
| **コネクタ**     | 各要素からハブへ二次ベジェ曲線(Q)で接続                            |
| **フッター**     | 最下部(y=740)にピル型の要約メッセージ                              |

### カラーパレット

#### Blob 塗り + アクセント

| 要素  | Blob色（パステル）       | アクセント（番号円） | 意味の例         |
| ----- | ------------------------ | -------------------- | ---------------- |
| 要素1 | `#fef08a` (淡い黄)       | `#eab308` (ゴールド) | 指示・ガイダンス |
| 要素2 | `#bfdbfe` (淡い青)       | `#3b82f6` (ブルー)   | スキル・能力     |
| 要素3 | `#fbcfe8` (淡いピンク)   | `#ec4899` (ピンク)   | 外部連携         |
| 要素4 | `#bbf7d0` (淡い緑)       | `#22c55e` (グリーン) | 実行者           |
| ハブ  | `#8b5cf6` (バイオレット) | —                    | 中核・統合       |

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

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

| 用途                 | 色                    |
| -------------------- | --------------------- |
| タイトル             | `#334155` (Slate-700) |
| 見出し               | `#1e293b` (Slate-800) |
| 説明文               | `#475569` (Slate-600) |
| サブタイトル         | `#64748b` (Slate-500) |
| 白文字（番号・ハブ） | `#ffffff`             |

#### コネクタ色

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

### フォント

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

| 用途           | クラス       | Weight | Size | Color     |
| -------------- | ------------ | ------ | ---- | --------- |
| メインタイトル | `.og-title`  | 800    | 46px | `#334155` |
| サブタイトル   | `.og-sub`    | 600    | 22px | `#64748b` |
| 要素見出し     | `.og-h`      | 800    | 24px | `#1e293b` |
| 要素説明       | `.og-s`      | 600    | 16px | `#475569` |
| 番号           | `.og-num`    | 900    | 42px | `#ffffff` |
| ハブラベル     | `.og-center` | 800    | 32px | `#ffffff` |

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

### シェイプ

#### Blob（主要シェイプ）

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

#### Blob定義

```xml
<!-- 黄系 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内に配置して良い要素は **以下のみ**。これ以外の一切の要素（アイコン、イラスト、装飾図形等）を追加してはならない。

| 許可される要素         | 説明                      |
| ---------------------- | ------------------------- |
| 番号バッジ（任意）     | 上記仕様の正円 + 数字のみ |
| 見出しテキスト         | `.og-h` クラス            |
| 説明テキスト（1〜2行） | `.og-s` クラス            |

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

#### フッター

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

### コネクタ仕様

| 属性             | 値                                        |
| ---------------- | ----------------------------------------- |
| stroke           | `#94a3b8`                                 |
| stroke-width     | 4                                         |
| stroke-dasharray | `12 12`（等間隔ダッシュ）                 |
| stroke-linecap   | round                                     |
| fill             | none                                      |
| 曲線タイプ       | 二次ベジェ(Q) — 制御点1つで柔らかいカーブ |

### エフェクト

| エフェクト           | 仕様         | 効果                                         |
| -------------------- | ------------ | -------------------------------------------- |
| **フラットスタイル** | シャドウなし | 影やレイヤード効果は使用しない               |
| **単一Blob**         | 1層のみ      | 同一Blobの多重レイヤー重ねは禁止             |
| **opacity**          | なし or 1.0  | Blob塗りに半透明のopacityは使用しない        |
| **白円オーバーレイ** | 禁止         | ハブ内の半透明白円（ガラス効果）は使用しない |

> **禁止**: `<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テンプレート骨格

```xml
<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>
```

---

## 制約事項

| 制約                             | 理由                           | 違反時                           |
| -------------------------------- | ------------------------------ | -------------------------------- |
| 直線矩形(`<rect>` rx=0)禁止      | Organicスタイルの一貫性維持    | Blob/角丸に置き換え              |
| フォントはNunito/Quicksand系     | 丸みのある書体でスタイル統一   | 指定フォントに修正               |
| 要素数は最大8個                  | それ以上は可読性が低下する     | 分割を提案                       |
| テキスト重なり禁止               | 可読性最優先                   | 位置調整                         |
| パステル+アクセントのペア使用    | スタイルガイドの配色ルール     | ペアで修正                       |
| フッターはピル型のみ             | Organicスタイルの統一性        | rx=30の角丸に修正                |
| バッジに略語・アルファベット禁止 | 不自然で無理やり感が出る       | 数字に変更またはバッジ省略       |
| Blob内にカスタムアイコン禁止     | スタイル統一性・有機的印象維持 | アイコン削除、テキストのみで表現 |

---

## 出力形式

### 成功時

```markdown
# Organic SVG Diagram 生成完了

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

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

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

---

## 使用例

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

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

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

---

## 変更履歴

| 日付       | バージョン | 変更内容                                                                                       |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------- |
| 2026-02-25 | v1.0       | 新規生成 - harness-light-v13-organic.svg から抽出                                              |
| 2026-02-25 | v1.1       | スタイルガイドをSKILL.md内に統合（外部参照廃止）                                               |
| 2026-02-25 | v1.2       | 番号バッジに略語/アルファベット禁止ルール追加、順序なし要素はバッジ省略                        |
| 2026-02-25 | v2.0       | フラットスタイル化: ドロップシャドウ廃止、レイヤード(多重Blob重ね)廃止、Blob単一レイヤーに統一 |
| 2026-02-25 | v2.1       | Blob内部構成要素の厳格制限追加: カスタムアイコン・ミニイラスト・装飾図形の挿入を明示的に禁止   |
| 2026-02-25 | v2.2       | ハブの半透明白円オーバーレイ廃止: テンプレート・仕様・エフェクトルールから完全削除             |