ExcelやPowerPointに業務フローを出力

# 業務フロー図SVG生成プロンプト

あなたは業務フローデータからスイムレーン図（SVG）を生成する専門家です。

## 基本ルール

1. **JSONの座標をそのまま使う**（勝手に調整しない）
2. **計算過程を必ず出力する**
3. **余白は最小限にする**
4. **ラベルエリア分の座標シフトを行う**

---

## 生成手順

### STEP 1: データ読み取り

JSONから以下を抽出：
- **Actors**: type="actor"のノード → スイムレーンになる
- **Actions**: type="action"のノード → 処理ボックス
- **Memos**: type="memo"のノード → メモボックス
- **Edges**: 矢印の接続情報

### STEP 2: 座標変換

#### ラベルエリアの設定
\```
ラベルエリア幅: 200px（固定）
全ノードのX座標: JSONのposition.x + 200
\```

#### アクターのレーン位置
\```
actor.data.index = 0 → レーンY = 0
actor.data.index = 1 → レーンY = 150
actor.data.index = 2 → レーンY = 300
...
レーンY = index × 150
\```

#### 処理ボックスの配置
\```
X座標: JSONのposition.x + 200（ラベルエリア分シフト）
Y座標: レーンY + 45（レーン内で中央配置）
幅: 120px（固定）
高さ: 60px（固定）
\```

#### メモボックスの配置
\```
X座標: JSONのposition.x + 200（ラベルエリア分シフト）
Y座標: レーンY + 50（レーン内で中央配置）
幅: 130px（固定）
高さ: 50px（固定）
\```

### STEP 3: データボックス（Artifact）の配置

Artifactは座標がないため、矢印上に配置：

\```
接続元と接続先の中間点に配置
X座標 = (始点X + 終点X) / 2 - 40（ボックス幅の半分）
Y座標 = 矢印のY座標 - 15（矢印の上）
幅: 80px（短い名前の場合）または 100px（長い名前の場合）
高さ: 28px
\```

### STEP 4: viewBox計算【重要】

以下の形式で**必ず出力**してください：

\```
=== viewBox計算 ===

【幅の計算】
ラベルエリア: 200px

Action要素（ラベルエリア分200pxシフト後）:
- action1: (52 + 200) + 120 = 372
- action2: (402 + 200) + 120 = 722
- action11: (2152 + 200) + 120 = 2472
→ Action最大: 2472

Memo要素:
- memo1: (1452 + 200) + 130 = 1782
→ Memo最大: 1782

最大値: max(2472, 1782) = 2472
viewBox幅 = 2472 + 70 = 2542

【高さの計算】
アクター数: 5
viewBox高さ = 5 × 150 = 750

【確定】
viewBox="0 0 2542 750"
\```

### STEP 5: SVG生成

確定したviewBoxでSVGを生成

---

## SVG構造

\```xml
<svg viewBox="0 0 [計算した幅] [計算した高さ]" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>/* スタイル */</style>
    <marker id="arrowhead">/* 矢印 */</marker>
    <marker id="arrowhead-memo">/* メモ用矢印 */</marker>
  </defs>
  
  <!-- スイムレーン -->
  <!-- 処理ボックス -->
  <!-- メモボックス -->
  <!-- データボックス -->
  <!-- 矢印 -->
</svg>
\```

---

## スタイル定義

\```css
.lane { stroke: #9e9e9e; stroke-width: 2; }
.lane-human { fill: #e3f2fd; }
.lane-system { fill: #fff3e0; }
.lane-label { fill: #f5f5f5; stroke: #9e9e9e; stroke-width: 2; }
.actor-label { 
  font-family: 'Segoe UI', Arial, sans-serif; 
  font-size: 13px; 
  font-weight: bold; 
  fill: #212121; 
  text-anchor: middle;
}
.process-box { 
  fill: white; 
  stroke: #212121; 
  stroke-width: 2; 
  rx: 5;
}
.process-text { 
  font-family: 'Segoe UI', Arial, sans-serif; 
  font-size: 11px; 
  fill: #212121; 
  text-anchor: middle;
}
.data-box { 
  fill: #f3e5f5; 
  stroke: #7b1fa2; 
  stroke-width: 1.5; 
  rx: 3;
}
.data-text { 
  font-family: 'Segoe UI', Arial, sans-serif; 
  font-size: 9px; 
  fill: #4a148c; 
  text-anchor: middle;
}
.memo-box { 
  fill: #fff9c4; 
  stroke: #f57f17; 
  stroke-width: 1.5; 
  rx: 5;
}
.memo-text { 
  font-family: 'Segoe UI', Arial, sans-serif; 
  font-size: 10px; 
  fill: #e65100; 
  text-anchor: middle;
}
.arrow { 
  stroke: #424242; 
  stroke-width: 2; 
  fill: none; 
  marker-end: url(#arrowhead);
}
.arrow-memo { 
  stroke: #f57f17; 
  stroke-width: 1.5; 
  fill: none; 
  stroke-dasharray: 5,3; 
  marker-end: url(#arrowhead-memo);
}
\```

---

## 矢印マーカー

\```xml
<marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
  <polygon points="0 0, 10 3, 0 6" fill="#424242" />
</marker>

<marker id="arrowhead-memo" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
  <polygon points="0 0, 10 3, 0 6" fill="#f57f17" />
</marker>
\```

---

## 矢印の描画ルール

### 同じレーン内の接続
\```xml
<path class="arrow" d="M [始点X] [Y] L [終点X] [Y]"/>
\```

### 異なるレーン間の接続
\```xml
<path class="arrow" d="M [始点X] [始点Y] L [中間X] [始点Y] L [中間X] [終点Y] L [終点X] [終点Y]"/>
\```

中間X座標 = 始点X + 30（始点の少し右）

### メモから処理への接続（点線）
\```xml
<path class="arrow-memo" d="M [始点X] [始点Y] L [始点X] [終点Y]"/>
\```

**重要**: メモから処理への矢印は、メモの上端から処理の下端に向かって描画する

---

## スイムレーンの描画

\```xml
<!-- レーン背景 -->
<rect class="lane lane-[human/system]" 
      x="0" 
      y="[index × 150]" 
      width="[viewBox幅]" 
      height="150"/>

<!-- ラベルエリア背景 -->
<rect class="lane-label" 
      x="0" 
      y="[index × 150]" 
      width="200" 
      height="150"/>

<!-- アクター名（1行の場合） -->
<text class="actor-label" 
      x="100" 
      y="[index × 150 + 80]">
  [アクター名]
</text>

<!-- アクター名（2行の場合） -->
<text class="actor-label" 
      x="100" 
      y="[index × 150 + 72]">
  [アクター名1行目]
</text>
<text class="actor-label" 
      x="100" 
      y="[index × 150 + 88]">
  [アクター名2行目]
</text>

<!-- 区切り線 -->
<line x1="200" 
      y1="[index × 150]" 
      x2="200" 
      y2="[index × 150 + 150]" 
      stroke="#9e9e9e" 
      stroke-width="2"/>
\```

**アクター名の改行ルール**:
- 7文字以下: 1行表示
- 8文字以上: 2行に分割（適切な位置で改行）

---

## 処理ボックスの描画

\```xml
<rect class="process-box" 
      x="[JSONのposition.x + 200]" 
      y="[レーンY + 45]" 
      width="120" 
      height="60"/>
<text class="process-text" 
      x="[JSONのposition.x + 200 + 60]" 
      y="[レーンY + 72]">
  [処理名1行目]
</text>
<text class="process-text" 
      x="[JSONのposition.x + 200 + 60]" 
      y="[レーンY + 85]">
  [処理名2行目]
</text>
<!-- 必要に応じて3行目 -->
<text class="process-text" 
      x="[JSONのposition.x + 200 + 60]" 
      y="[レーンY + 98]">
  [処理名3行目]
</text>
\```

**テキスト改行ルール**:
- 6文字以下: 1行
- 7-12文字: 2行に分割
- 13文字以上: 3行に分割

---

## データボックスの描画

\```xml
<rect class="data-box" 
      x="[計算したX座標]" 
      y="[矢印Y - 15]" 
      width="[80 or 100]" 
      height="28"/>
<text class="data-text" 
      x="[X座標 + 幅/2]" 
      y="[矢印Y - 15 + 17]">
  [データ名]
</text>
\```

**データボックスの配置位置**:
- 水平矢印上: 矢印の中間点の上
- 垂直矢印上: 矢印の中間点の横

---

## メモボックスの描画

\```xml
<rect class="memo-box" 
      x="[JSONのposition.x + 200]" 
      y="[レーンY + 50]" 
      width="130" 
      height="50"/>
<text class="memo-text" 
      x="[JSONのposition.x + 200 + 65]" 
      y="[レーンY + 72]">
  [メモ1行目]
</text>
<text class="memo-text" 
      x="[JSONのposition.x + 200 + 65]" 
      y="[レーンY + 85]">
  [メモ2行目]
</text>
\```

**メモの配置ルール**:
- 他のノードと被らないように配置
- 処理ボックスの下に配置する場合: Y座標 = レーンY + 120（処理の下）
- 処理ボックスの上に配置する場合: Y座標 = レーンY + 50（処理の上）

---

## 座標計算の具体例

### 例: action1の配置

\```
JSONのposition.x = 52
JSONのposition.y = 140（無視）
actor.data.index = 0

計算:
X座標 = 52 + 200 = 252
Y座標 = 0 × 150 + 45 = 45
幅 = 120
高さ = 60

結果:
<rect x="252" y="45" width="120" height="60"/>
\```

### 例: 矢印の始点・終点

\```
action1の右端 = 252 + 120 = 372
action2の左端 = 602

矢印:
<path d="M 372 75 L 602 225"/>
\```

---

## 出力形式

必ず以下の順序で出力：

\```
1. === viewBox計算 ===
   （計算過程を詳細に記載）

2. <svg>...</svg>
   （SVGコード全文）

3. === 検証 ===
   - viewBox: [値]
   - 最右端要素: [要素名] at x=[座標]
   - 余白: [計算した余白]px
   - レーン幅: [viewBox幅]px（全レーン共通）
\```

---

## 絶対に守ること

1. ❌ JSONの座標を勝手に調整しない
2. ✅ 全ノードのX座標に+200のシフトを適用
3. ✅ 計算過程を必ず出力する
4. ✅ viewBox幅 = 最大右端 + 70
5. ✅ viewBox高さ = アクター数 × 150
6. ✅ 全レーンの幅 = viewBox幅（必ず一致させる）
7. ✅ ラベルエリア幅 = 200px（固定）
8. ✅ 矢印は黒色統一（メモ用点線を除く）
9. ✅ メモは他のノードと被らないように配置

---

## トラブルシューティング

### 問題: レーンの幅が足りない
**原因**: viewBox幅とレーン幅が一致していない
**解決**: レーンのwidth属性をviewBox幅と同じ値にする

### 問題: ノードがラベルエリアに被る
**原因**: X座標に+200のシフトが適用されていない
**解決**: 全ノードのX座標 = JSONのposition.x + 200

### 問題: メモがアクションに被る
**原因**: Y座標の計算ミス
**解決**: メモをアクションの下（Y座標+75）または上（Y座標-75）に配置

---

このプロンプトに従って、添付されたJSONからSVGを生成してください。

<svg viewBox="0 0 6560 600" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      .lane { stroke: #9e9e9e; stroke-width: 2; }
      .lane-human { fill: #e3f2fd; }
      .lane-system { fill: #fff3e0; }
      .lane-label { fill: #f5f5f5; stroke: #9e9e9e; stroke-width: 2; }
      .actor-label { 
        font-family: 'Segoe UI', Arial, sans-serif; 
        font-size: 13px; 
        font-weight: bold; 
        fill: #212121; 
        text-anchor: middle;
      }
 
...
  
</svg>