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

業務フローをSVGで出力してExcelやPowerPointに貼り付けることで編集可能にする方法を紹介します。

Acsimで作成した業務フローのJSONデータをもとに、SVGファイル形式の業務フロー概観図を作成できます。

SVGとして保存しておくと、ブラウザで確認したり、ExcelやPowerPointに貼り付けて図形として編集したりできます。

STEP 1. 業務フローJSONをダウンロード

Acsimの業務フロー画面から、JSONファイルをダウンロードします。

STEP 2. Acsim Chatなどで業務フローのSVGを生成

Acsim Chatを開いて、ダウンロードしたJSONを添付し、目的に応じたプロンプトを実行します。

Acsimで作成した業務フローは、要件定義や設計で使いやすいように細かい粒度になっていることがあります。PowerPointなどの提案資料に貼り付ける場合は、JSONの全ステップをそのまま再現するのではなく、主要な業務工程だけに要約した概要図としてSVG化すると見やすくなります。

Acsim Chatでは、業務フローJSONをもとにSVGコードを生成できます。生成されたコードをSTEP 3の手順で .svg ファイルとして保存してください。Claudeを利用する場合は、SVGコードをそのまま画像としてプレビュー・出力できることがあり、仕上がりを確認しながら進めやすいです。Microsoft Copilotでは、JSONが大きすぎると全体を詳細に解析できない場合があります。大きな業務フローでは、セクションごとにJSONを分けるか、主要工程だけを抽出して依頼してください。

提案資料向けの概要図としてSVG化する場合

詳細な業務フローJSONをもとに、Acsim Chatで概要レベルの業務フロー概観図SVGを直接生成できます。このとき、目指したい粒度や見た目に近いフロー図・スライドなどのアウトプットイメージがあれば、JSONと一緒に添付するのがおすすめです。

参考イメージを添付すると、「どれくらい工程をまとめるか」「横長の図にするか」「説明資料としてどの程度シンプルにするか」が伝わりやすくなり、出力品質が安定しやすくなります。

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

あなたは、詳細な業務フローを提案資料向けの概要図に整理する専門家です。

添付した業務フローJSONをもとに、PowerPointなどの提案資料に貼り付けやすい業務フローの概要図をSVG形式で作成してください。

参考となるアウトプットイメージを添付している場合は、その図と同じくらいの粒度・情報量・見た目に近づけてください。

## 整理の方針

- JSON内の全ステップをそのまま再現せず、主要な業務工程にまとめる
- 1つの業務セクションは2〜4ステップ程度を目安にする
- 操作レベルの細かい手順、例外的な分岐、詳細な確認作業は省略する
- 顧客や社内関係者が業務全体を直感的に理解できる粒度にする
- アクター、主要な成果物、業務の前後関係は維持する
- 必要に応じて、複数の細かいノードを1つの工程名に統合する

## SVGの作成方針

- スイムレーン形式で作成する
- PowerPointに貼り付けたときに見やすい横長のレイアウトにする
- ノード数は多くしすぎず、1枚のスライドで読める情報量に抑える
- 工程名は短く、提案資料に載せても読みやすい表現にする
- SVGコード全文を出力する

## 出力形式

1. 概要化の方針
   - どの工程を統合したか
   - どの詳細を省略したか

2. SVGコード
   - そのまま `.svg` ファイルとして保存できる形式で出力する

3. PowerPoint貼り付け時の補足
   - 図形に変換して編集する際の注意点があれば簡潔に記載する

詳細な業務フローをそのままSVG化する場合

業務フローJSONの内容をできるだけ忠実にSVG化したい場合は、以下のプロンプトを実行します。
なお、業務フローが大きい場合は、プロンプトを調整して特定のセクションに絞って生成することも可能です。

# 業務フロー図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を生成してください。

STEP 3. SVGファイルを保存

生成されたSVGコードをコピーし、業務フロー.svg のようなファイル名で保存します。
SVGファイルは、画像ファイルのように見えますが、中身はテキストです。メモ帳やテキストエディタにSVGコードを貼り付けて、拡張子を .svg にして保存すれば作成できます。

1. SVGコードだけをコピーする

AIの出力から、<svg ...> で始まり </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>