懶惰之最｜GitHub 實測

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

2026-10-20｜專案：cathrynlavery/diagram-design｜Markdown 版

重點摘要

  • 自製出貨流程由本輪 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 才有東西可以忠實重畫：

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

從專案根目錄執行：

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

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

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

第一版實際匯出結果：圖本體在，網頁標題不會跟著輸出

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

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

修正版錄影：標題放進圖本體，匯出後仍可看到

實測項目 結果
來源與重畫圖 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。授權：MIT。匯出範圍可查官方說明。

測試設備：Mac mini M4 Pro（12 核、64GB）。內容依實際執行結果撰寫，數據為撰寫當時的實測值。

← 所有實測