昨天是拆開來逐段看，今天把 flow-chart-creator 目前實際使用版本的完整內容整份貼出來，方便對照昨天拆過的每一段，也留一份完整版本備查。

完整內容

---
name: flow-chart-creator
description: 業務流程梳理與 draw.io 流程圖生成。包含 User Flow、Swimming Lane、ER Diagram、Sequence Diagram 等多種圖表類型。
when_to_use: 當使用者想討論業務功能流程、梳理流程步驟、或希望生成 draw.io 流程圖時觸發。只要使用者提到「畫流程圖」、「梳理流程」、「draw.io」、「流程圖」、「業務流程」，就應立即使用此 skill。
allowed-tools: mcp__drawio__open_drawio_xml
---

# Flow Chart Creator

透過與使用者的互動討論，先梳理業務功能流程、整理成結構化的流程說明文件，再生成對應的 draw.io 流程圖。流程圖以 draw.io XML（mxGraphModel）格式生成，並透過 `open_drawio_xml` 直接在瀏覽器中開啟。

核心鐵則：任何情況下都不得使用 `open_drawio_mermaid`，也不得使用 Mermaid 作為中間格式。官方文件雖預設推薦 Mermaid，但本工作流刻意選擇 XML —— 因為唯有 XML 能精確控制版面、樣式與位置，這正是這套流程的價值所在。

## 參考資料（references/）

這個 skill 自帶兩份參考檔，需要時讀取：

- `references/flow-desc-template.md`：流程說明文件的空白模板。當使用者沒有現成的流程說明文件時，依這份模板的欄位結構，透過提問引導使用者逐步填寫。
- `references/drawing-spec.md` —— 繪圖規格，包含所有圖表共用的品質要求，以及 User Flow 的自訂顏色、U 型佈局與連線規則。在生成任何圖表之前，務必先完整讀過這份規格。User Flow 需完整套用自訂規格；其他圖表類型則依共用規則、draw.io MCP 提供的官方 XML 規則與該圖表的一般慣例生成。

> 為什麼分兩份：模板管「文件結構」，規格管「視覺一致性」。兩者都是滾動式累積、會持續演進的素材，所以獨立於 SKILL.md 之外，方便單獨維護。

## 互動工具

在以下三個關鍵決策點，必須使用 `AskUserQuestion` 工具呈現選項彈窗，不得改用純文字問句：

| 決策點 | 觸發時機 |
|--------|---------|
| ① 是否有既有文件 | 打招呼後，詢問文件狀態時 |
| ② 選擇圖表類型 | 讀完文件（或建好新文件）後 |
| ③ 確認繪圖範圍（兩層） | 確認圖表類型後；第一層選主流程或子流程，選「部分子流程」時追加第二層勾選 |

其餘問答（補充流程細節、確認內容正確、收集修改意見等）維持一般文字對話。

## 互動流程

1. **打招呼並詢問是否有既有文件**：簡短打招呼後，**立即呼叫 `AskUserQuestion`** 詢問是否已有流程說明 md 檔案。不要先問「想梳理哪個業務流程」—— 流程主題會在讀檔或依模板討論的過程中自然帶出。

   ```
   AskUserQuestion({
     questions: [
       {
         question: "您是否已有可參考的流程說明 md 檔案？",
         header: "既有文件",
         options: [
           { label: "有", description: "請在下方提供檔名或路徑，我會先完整閱讀" },
           { label: "沒有", description: "我會依模板引導您逐步建立一份新的流程說明文件" }
         ],
         multiSelect: false
       }
     ]
   })
   ```

   - **有** → 請使用者提供檔名或路徑，先完整讀過該文件，再進入步驟 3。
   - **沒有** → 讀取 `references/flow-desc-template.md`，依其欄位結構透過互動提問，引導使用者逐步補齊（流程目標、角色、系統、步驟、判斷點、輸入輸出、例外…），整理成一份新的流程說明 md，存到 `04-input/`，再進入步驟 3。

2. （承上，建立新文件時）特別留意模板的「繪圖備註」：若步驟中有呼叫外部系統（含 MCP Server），要在步驟描述裡標注資料傳送方向（例：「調用 MCP Server 查詢設備清單（回傳：設備清單）」），方便後續畫箭頭標籤。

3. **選擇圖表類型**：讀完文件（或完成新文件）後，**立即呼叫 `AskUserQuestion`** 詢問圖表類型。

   ```
   AskUserQuestion({
     questions: [
       {
         question: "請選擇要繪製的圖表類型：",
         header: "圖表類型",
         options: [
           { label: "User Flow", description: "呈現使用者操作路徑與系統回應" },
           { label: "Swimming Lane", description: "依角色或系統分欄，呈現跨角色的流程責任" },
           { label: "ER Diagram", description: "描述資料模型與實體之間的關係" },
           { label: "Sequence Diagram", description: "呈現系統元件之間的時序互動" }
         ],
         multiSelect: false
       }
     ]
   })
   ```

   若使用者選 Other，請進一步以文字對話確認所需的圖表形式。

   - **User Flow**：套用 `drawing-spec.md` 的完整自訂規格。
   - **Swimming Lane、ER Diagram、Sequence Diagram**：套用 `drawing-spec.md` 的共用品質規則，並依 draw.io MCP 官方 XML 規則與該圖表的一般慣例生成；不得強制套用 User Flow 的 U 型佈局。

4. **確認繪圖範圍（兩層彈窗）**：確認圖表類型後，依文件的「主流程 → 子流程」階層，最多分兩層詢問。

   > 階層說明：流程說明文件分三層 —— 主流程（整份文件）→ 子流程（子流程清單的項目）→ 步驟（子流程內的流程步驟）。**最小繪圖單位是子流程**，步驟不是繪圖單位，不得出現在彈窗選項中。

   **第一層 —— 主流程或子流程**，呼叫 `AskUserQuestion`：

   ```
   AskUserQuestion({
     questions: [
       {
         question: "請選擇要繪製的流程範圍：",
         header: "繪圖範圍",
         options: [
           { label: "完整主流程", description: "繪製端到端流程，包含所有子流程的串接" },
           { label: "部分子流程", description: "從子流程清單中挑選要繪製的子流程" }
         ],
         multiSelect: false
       }
     ]
   })
   ```

   - **完整主流程** → 直接進入步驟 5。
   - **部分子流程** → 進入第二層。

   **第二層 —— 勾選子流程**（僅在第一層選「部分子流程」時觸發）：選項從流程說明文件的「子流程清單」**動態生成**，label 使用文件中的子流程名稱，description 放該子流程的目標摘要，並設 `multiSelect: true` 讓使用者可一次勾選多個相鄰子流程畫成銜接圖。

   ```
   AskUserQuestion({
     questions: [
       {
         question: "請勾選要繪製的子流程（可複選）：",
         header: "子流程",
         options: [
           { label: "<子流程 1 名稱>", description: "<該子流程的目標摘要>" },
           { label: "<子流程 2 名稱>", description: "<該子流程的目標摘要>" },
           ...
         ],
         multiSelect: true
       }
     ]
   })
   ```

   子流程數量的處理規則（每題最多 4 個選項）：
   - **≤ 4 個** → 一題列完。
   - **5～12 個** → 照清單順序拆成多題放在同一次呼叫（一次最多 4 題）。**注意：彈窗要求每一題都必須作答才能送出**，因此拆成多題時，每題都必須加一個 `{ label: "（此題不勾選）", description: "本題沒有要繪製的子流程" }` 選項，讓使用者即使只勾選其中一題的子流程也能順利送出。扣除這個選項後，每題最多放 3 個子流程（例：5 個拆 3＋2）。
   - **超過 12 個**或使用者需要特殊組合 → 請使用者用 Other 以文字說明。

   收到答案後，「（此題不勾選）」一律視為該題未選任何子流程，不得當成繪圖範圍的一部分。

5. **整理流程內容**：依指定範圍，整理角色、步驟、判斷點、輸入輸出、外部系統與子流程串接關係，並以文字向使用者確認內容正確。
6. **生成流程圖**：先讀 `references/drawing-spec.md`，再用 `open_drawio_xml` 生成 draw.io XML 並在瀏覽器開啟。**呼叫時務必帶 `routing: "libavoid"` 參數**——它會保留你擺好的節點位置，只把所有連線自動重算成繞開方塊的直角線，解決連線壓線／穿越節點的問題（draw.io 預設 router 不會繞開障礙物）。
7. **確認與修正**：以文字詢問是否符合預期，依回饋持續修正，直到滿意為止。

## 輸入與輸出

- **輸入**：使用者的業務流程需求與初步想法、既有或依模板新建的流程說明 md、指定的繪圖範圍。前提是使用者對業務流程具備初步理解，能反覆討論與確認。
- **輸出**：一份符合模板格式的流程說明 md、一張 draw.io XML（mxGraphModel）流程圖，於瀏覽器開啟，可直接檢視並進一步手動編輯。

## 判斷點摘要

- 有無既有 md？有 → 讀取；無 → 依模板引導建立。
- 是否指定繪圖範圍？否 → 兩層彈窗確認：完整主流程，或從子流程清單勾選部分子流程。
- 流程內容是否確認正確？否 → 持續討論修正後再產圖。
- 對流程圖是否仍有修改需求？是 → 依回饋調整。

## User Flow 顏色規範（速查）

完整規範見 `references/drawing-spec.md`，這裡列出 User Flow 最常用的配色，每張 User Flow 頂部都要附顏色圖例（Legend）：

| 節點類型 | fillColor | strokeColor |
|---------|-----------|-------------|
| 使用者操作 | `#dae8fc` | `#6c8ebf` |
| 系統處理 | `#d5e8d4` | `#82b366` |
| MCP Server | `#e1d5e7` | `#9673a6` |
| 外部系統 | `#ffe6cc` | `#d79b00` |
| 決策節點 | `#fff2cc` | `#d6b656` |
| 開始／結束 | `#f5f5f5` | `#666666` |

## 例外處理

- 流程資訊不足 → 持續追問補齊再產圖。
- 無既有 md → 先依模板建立文件再繪圖。
- 未指定範圍 → 以兩層彈窗確認完整主流程或部分子流程。
- draw.io MCP server 無法呼叫 → 明確告知使用者目前無法開啟流程圖頁面。
- 圖有重疊／錯位／缺漏 → 依回饋重新調整。

明天，把套用規格後實際跑出來的流程圖攤開來看，對照規格逐項確認：規格說的顏色、佈局、連線規則，是不是真的照著做出來了。