# AI 畫的流程圖字被切掉，檢查器卻說 OK？diagram-design 實測

- 網址：https://blog.valenvan.uk/posts/cathrynlavery-diagram-design-2.html
- 發布日期：2026-10-23
- 測試設備：Mac mini M4 Pro（12 核、64GB）
- 專案：cathrynlavery/diagram-design（https://github.com/cathrynlavery/diagram-design），MIT 授權
- 測試版本：diagram-design 2.6.119（commit 7a12007）
- 實測影片：https://www.youtube.com/shorts/GwxQHZybWFM

## 重點摘要

- 官方 210 個範例用自帶 self_check 檢查，0.435 秒全數通過；倉庫的瀏覽器版 lint-render 渲染 215 個檔案也是 0 個問題。
- 把範例流程圖的字挪到畫布最右邊，自帶 self_check 回 OK，lint-render 才抓到右側被切掉 68 像素。
- 90 字的長標籤衝出方框，自帶 self_check 與 lint-render 都回報 0 個問題，但輸出的 PNG 肉眼可見文字超出方框。
- 外連圖片、會送出 cookie 的程式、onclick 屬性三種壞法，自帶 self_check 全部擋下；PNG 匯出每張約 1.0 到 1.7 秒。
- **結論：** 擋得住單檔安全問題，但看得見的排版錯（字被切、字衝出方框）會漏，畫完要自己看一眼。
- **適合：** 常請 AI 畫圖放簡報或貼文、願意自己檢查成品的人
- **不適合：** 想完全靠檢查器把關、或需要可編輯原始檔的人

| 實測項目 | 結果 |
|---|---|
| 官方範例 self_check（210 個） | 0.435 秒，全數 OK |
| lint-render --all（215 個） | 0 個問題，1 則備註，2 分 14 秒 |
| 字挪到畫布邊緣 | self_check OK；lint-render 切掉 68px |
| 90 字長標籤 | 兩支都 0 個問題 |
| 外連圖片／藏程式／onclick | self_check 皆擋下 |
| PNG 匯出（2 倍） | 約 1.0～1.7 秒 |

假設你要給新員工一張退貨流程圖，請 AI 畫好，準備貼進公司群組。圖畫完了，你怎麼知道它沒畫壞？diagram-design 是一套讓 AI 助理照固定美術規則畫圖的技能包，輸出是單一 HTML＋SVG 檔，還附了檢查器。我想知道：圖真的畫壞時，檢查器抓得到嗎？

測試設備：Mac mini M4 Pro（12 核、64GB）。版本：diagram-design 2.6.119（commit 7a12007，2026-10-21），MIT 授權。

## 先確認它本身能跑

它的檢查與匯出都是 Python 腳本，轉 PNG 需要 Playwright。我在乾淨環境裝好（pip 約 55 秒、瀏覽器下載約 37 秒）後實測：

```bash
python3 skills/diagram-design/scripts/self_check.py assets/example-*.html
python3 scripts/lint-render.py --all
python3 skills/diagram-design/scripts/export_png.py 圖.html 圖.png 2
```

| 項目 | 結果 |
|---|---|
| 自帶 self_check，210 個官方範例 | 0.435 秒，全數 OK |
| 倉庫 lint-render（瀏覽器實際渲染），215 個檔案 | 0 個問題、1 則「無法量測」備註，共 2 分 14 秒 |
| 匯出 PNG（2 倍） | 每張約 1.0～1.7 秒 |

官方範例全部乾淨，這是預期的；真正的問題是圖壞了它抓不抓得到。

## 故意弄壞：兩種檢查結果不同

我拿範例流程圖，改出五種壞圖：

| 壞法 | 自帶 self_check | 倉庫 lint-render |
|---|---|---|
| 字挪到畫布最右邊（x=999） | OK（放行） | 抓到：右邊被切掉 68 像素 |
| 90 字的長標籤塞進方框 | OK（放行） | 0 個問題（放行） |
| 外連圖片 | 抓到（remote reference） | 未測 |
| 藏一段會送出 cookie 的程式 | 抓到 | 未測 |
| 文字加 onclick | 抓到 | 未測 |

![字被挪到邊緣，右側被切掉，原本方框裡的字不見](https://blog.valenvan.uk/img/cathrynlavery-diagram-design-2-article_1.png)

![標籤太長，文字衝出方框兩側，兩支檢查都說零問題](https://blog.valenvan.uk/img/cathrynlavery-diagram-design-2-article_2.png)

## 怎麼判讀

自帶檢查器偏重「單檔安全」：外連資源、可執行屬性、不明程式它都擋得住。但字被切掉、字衝出方框這類肉眼看得見的排版錯，它放行了；瀏覽器版 lint-render 能抓到被畫布切掉的字，卻抓不到「字衝出方框但還在畫布內」。另外 export 指令文件說預設輸出在原檔旁，但 export_png.py 實際要求自己給輸出路徑，這點我是照腳本用法才跑通。

## 我的看法

我會用它，但畫完一定自己看一眼再貼出去。這次只測了「改壞的範例」，沒有測 AI 實際畫圖的成功率，也沒評審好不好看，所以不能說它的圖一定出錯，只能說檢查器有這兩個盲點。

適合：常請 AI 畫圖放簡報、貼文，願意自己多看一眼的人。不適合：想完全交給檢查器把關、不看成品的人；也不適合要可編輯原始檔的人（輸出是 HTML＋SVG，不是 drawio）。

專案連結：https://github.com/cathrynlavery/diagram-design（MIT）