# 小店交接怕漏單？把六個步驟畫成流程圖，匯出時記得保留標題

- 網址：https://blog.valenvan.uk/posts/cathrynlavery-diagram-design.html
- 發布日期：2026-10-20
- 測試設備：Mac mini M4 Pro（12 核、64GB）
- 專案：cathrynlavery/diagram-design（https://github.com/cathrynlavery/diagram-design），MIT 授權
- 測試版本：2.6.115 (f2f4d49ea8d632f17cf196ba26599277a93f767b)
- 實測影片：https://www.youtube.com/shorts/6xUPOLt-VVM

## 重點摘要

- 自製出貨流程由本輪 Codex 依技能規則重畫，六個節點、五條連線與兩條具名分支均保留。
- 三次 PNG 匯出為 0.914、0.910、0.916 秒，輸出 1920×1202 像素；秒數不含 AI 作圖、安裝或修改。
- 頁面 h1 未包含在 PNG；將可見標題放入 SVG 後，修正版匯出成功保留標題。
- 本次只測一份繁中小圖，未測大型圖、不同模型品質或簡報軟體匯入。
- **結論：** 本次六節點繁中交接圖完成匯入、Codex 重畫、檢查及 PNG／SVG 匯出。
- **適合：** 本次驗證的是一張有付款分支的小店出貨交接圖，使用既有 Codex，無額外生成模型。
- **不適合：** 本次證據不能判定大型圖、不同模型或簡報軟體匯入的品質，也不能宣稱省下多少排版時間。

| 實測項目 | 結果 |
|---|---|
| 來源圖 | 6 節點／5 連線／2 具名分支 |
| PNG 匯出秒數 | 0.914／0.910／0.916 |
| 錄影重跑秒數 | 0.938／0.912／0.955 |
| PNG 尺寸 | 1920×1202 |
| 標題 | h1 不含；SVG 內可見標題成功保留 |
| 離線與幾何檢查 | 通過；不能證明流程語意正確 |

小店找人幫忙出貨，光說「收到訂單就處理」其實不夠：還沒付款怎麼辦？提醒後是繼續寄，還是先等回覆？這種交接最需要的是一張分支清楚的圖。今天拿 Diagram Design 試做的，就是這個具體問題。案例與訂單都是自製，沒有使用真實客戶資料。

## 這次到底讓誰畫圖？

受測版本是 2.6.115，來源提交 f2f4d49ea8d632f17cf196ba26599277a93f767b。它提供給 AI 使用的繪圖規則、範例和匯入／匯出程式，並不是獨立的生圖模型。這次由本輪 Codex 讀取技能、流程圖版型及匯入規則，依來源重畫 HTML 內的 SVG；不是讓擷取程式自己完成排版，也沒有量測 AI 作圖速度。

測試設備為 Mac mini M4 Pro（12 核、64GB）。圖片匯出使用 Playwright Chromium，字型補上 Noto CJK；圖檔採系統字型，不另外請求線上字型。這些條件會影響別人重跑的速度與字形。

## 先把交接規則寫清楚

我用以下 Mermaid 文字當輸入。先有明確的付款分支，AI 才有東西可以忠實重畫：

```text
flowchart TD
 A([收到訂單]) --> B{付款完成？}
 B -->|是| C[列印出貨單]
 B -->|否| D[提醒付款]
 D --> E([等待回覆])
 C --> F([包裝寄出])
```

從專案根目錄執行：

```bash
python3 skills/diagram-design/scripts/mermaid_extract.py order.mmd
python3 skills/diagram-design/scripts/self_check.py --offline order-fixed.html
python3 scripts/verify-geometry.py order-fixed.html
python3 skills/diagram-design/scripts/export_svg.py order-fixed.html order-fixed.svg --system-fonts
python3 skills/diagram-design/scripts/export_png.py order-fixed.html order-fixed.png
```

擷取結果為六個節點、五條連線、兩條具名分支。重畫後，我逐一核對「是」通往列印與寄出，「否」通往提醒與等待；六個中文節點都保留。離線檢查與幾何檢查也通過，但這些檢查不等於替你證明商業流程正確。

## 匯出成功，為什麼標題沒了？

![第一版實際匯出結果：圖本體在，網頁標題不會跟著輸出](https://blog.valenvan.uk/img/cathrynlavery-diagram-design-article_1.png)

第一版把標題放在 HTML 的 h1。PNG 成功產生，圖上的中文清楚，頁面標題卻沒出現在圖檔裡。查閱匯出說明後，原因很直接：它刻意只輸出第一個 SVG，外面的標題與卡片不包含在內。這是工具的既定範圍，不是當機或漏存檔。

做交接圖時，檔案離開原網頁仍要看得懂，所以我把「出貨交接流程」改放成 SVG 內可見的文字，再匯出一次，標題就保留了。

![修正版錄影：標題放進圖本體，匯出後仍可看到](https://blog.valenvan.uk/img/cathrynlavery-diagram-design-article_2.png)

| 實測項目 | 結果 |
|---|---|
| 來源與重畫圖 | 6 個節點、5 條連線、2 條具名分支保留 |
| 三次 PNG 匯出 | 0.914、0.910、0.916 秒 |
| PNG 實際尺寸 | 1920 × 1202 像素 |
| 正式錄影中的三次匯出 | 0.938、0.912、0.955 秒 |
| 頁面 h1 標題 | 不包含在 PNG 內 |
| SVG 內可見標題 | 修正後成功保留 |

上述秒數只計執行圖片匯出程式，不含安裝、AI 排版或修改時間；不能解讀成一秒從需求生出流程圖，也沒有與手動拖框做計時比較。

## 我會不會用？

我會拿它做這類要交給別人看的小型交接圖，讓 AI 依一套明確規則畫，再核對內容。這次繁中六節點範例完成了匯入、重畫、檢查和兩種格式輸出；大型圖、不同 AI 模型及簡報軟體重新開啟都未測。需要頻繁用滑鼠拖動修改的人，也應先確認這種 HTML／SVG 工作方式合不合手。

專案：[cathrynlavery/diagram-design](https://github.com/cathrynlavery/diagram-design)。授權：[MIT](https://github.com/cathrynlavery/diagram-design/blob/f2f4d49ea8d632f17cf196ba26599277a93f767b/LICENSE)。匯出範圍可查[官方說明](https://github.com/cathrynlavery/diagram-design/blob/f2f4d49ea8d632f17cf196ba26599277a93f767b/skills/diagram-design/references/export.md)。