最後更新：2026 年 8 月 13 日｜本文所有數據於發文當日親自到 GitHub 專案頁核對
你有沒有這種經驗：叫 AI 幫你畫一張架構圖，出來的東西一看就知道是 AI 畫的。圓角方框、灰色陰影、五顏六色的箭頭。貼進簡報裡，格格不入。
一句話結論：diagram-design 是一個免費開源（MIT）的 Claude Code／Cowork 技能包，用 27 種編輯級圖表模板取代 AI 預設的醜圖，昨天一天衝了 2,951 顆星，現時 10,270 星。要在文章、簡報、技術文件裡放圖的人值得裝；只想在推特發一張示意圖的人不用。
diagram-design 到底是什麼？
它是一個 agent skill（技能包），裝進 Claude Code、Claude Cowork、Codex 或 Pi 之後，你用日常語言描述要什麼圖，它就直接輸出一個能雙擊打開的 HTML 檔案，裡面是純 SVG 向量圖。沒有建置步驟，沒有 JavaScript 依賴，離線也打得開。
作者是 Cathryn Lavery，BestSelf.co 的創辦人。她在專案說明裡寫了做這個東西的理由，講得很白：每次她要一張圖，問 Claude 拿回來的都是「一個通用的圓角方框玩意，跟網站其他部分長得完全不一樣」，結果她不是跟 Figma 耗三十分鐘，就是乾脆不放圖了。
這個痛點很多人有。專案的一句話簡介只有三句，最後一句是 No shadows, no Mermaid-slop（沒有陰影，沒有 Mermaid 味），把「AI 出的圖一看就知道是 AI 出的」這件事直接講了出來。
| 項目 | 現況（截至 2026 年 8 月 13 日） |
|---|---|
| 專案名稱 | cathrynlavery/diagram-design |
| 授權 | MIT（可商用、可修改） |
| GitHub 星數 | 10,270 星／668 fork |
| 單日新增 | 約 2,951 星，登上 GitHub 全語言熱門榜首位 |
| 圖表類型 | 27 種視覺類型 × 3 種樣式變體 |
| 支援平台 | Claude Code、Claude Cowork、Codex、Pi |
| 輸出格式 | HTML／SVG／PNG |
| 價格 | 免費 |
| 維護狀態 | 活躍，最後一次更新就在本文發布當天早上 |
為什麼 AI 畫的圖一看就知道是 AI 畫的？
答案藏在專案說明最底下一段，只有一句話，但這是整個專案最值錢的部分：
每一個座標、寬度、間距都必須能被 4 整除。這點沒得商量，正是它讓圖表不會有 AI 生成的感覺。
diagram-design 專案說明
這句話值得想一下。AI 排版之所以看起來怪，通常不是因為配色醜，而是因為間距是隨機的。這裡 13 像素，那裡 17 像素，人眼說不出哪裡不對，但就是覺得散。把所有數值鎖在 4 的倍數上，整張圖立刻有了節奏。
同一套規則還有幾條，都很具體：
- 只用一個強調色，而且整張圖只留 1 到 2 個焦點元素。強調色是給讀者「先看這裡」用的，不是拿來上色的。
- 目標資訊密度 4／10。作者的原話是「最高品質的動作通常是刪除」，每個節點都要自己掙到位置。
- 1 像素細邊框，完全不用陰影，圓角上限 10 像素。
- 三種字體各司其職：標題用襯線體、節點名稱用無襯線體、技術性標籤（連接埠、網址、欄位型別）才用等寬字體。等寬字體是給技術內容用的，不是拿來營造工程師氛圍。
就算你完全不裝這個工具，這幾條規則本身也能直接拿去改善你現在用任何工具畫的圖。這是我覺得這個專案最實用的地方。
27 種還是 29 種？先講清楚這個矛盾
GitHub 頁面上方的專案簡介寫「29 editorial diagram types」，但說明文件內文從頭到尾都寫 27 種，畫廊也是 27 個範例。轉載這則消息的中文內容多半照抄了 29 這個數字。
實際情況是 27 種，簡介還沒跟上改版。原因說明文件裡有交代：2.3 版加入了「語意模式」（semantic patterns），這套設計刻意把「行為」和「版面」分開描述，所以像佇列、政策追蹤、信任邊界這類新場景會沿用最接近的既有類型，不會為了新場景硬開一個新類型出來。類型數字因此停在 27。
這個取捨其實比數字本身有意思：多數工具靠「我們支援 XX 種圖表」來競爭，這個專案反而刻意不讓數字長大。
27 種涵蓋的範圍包括架構圖、流程圖、時序圖、狀態機、實體關聯圖、時間軸、泳道圖、四象限、樹狀圖、組織圖、文氏圖、分層堆疊、金字塔／漏斗、雷達圖、飛輪圖、甘特圖、長條圖、折線圖、散點圖，以及幾種偏資料工程的類型。日常寫文章、做簡報會用到的，基本都在裡面。
怎麼裝？不會寫程式也能裝
四個平台各一行指令，選你在用的那個貼上就好。Claude Cowork 使用者連指令都不用打，走圖形介面就行。
- Claude Cowork（最適合非工程師）：Customize → Directory → Plugins → 按 + → 貼上
cathrynlavery/diagram-design→ Sync，然後從 Personal 清單安裝。 - Claude Code：先
/plugin marketplace add cathrynlavery/diagram-design，再/plugin install diagram-design@diagram-design。 - Pi：
pi install https://github.com/cathrynlavery/diagram-design，然後在對話中/reload。 - Codex：
npx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design。 - 裝完做品牌校準（這步別跳）：直接對 AI 說「onboard diagram-design to 你的網址」（例如 yoursite.com）。它會去抓你首頁的主色和字體，對應成紙張色、墨色、強調色等語意角色，先給你看一份差異對照，你點頭才寫入設定。之後所有圖都自動用你的品牌色。
品牌校準這步有兩個細節做得不錯。一是它會先幫你檢查對比度：如果你網站那個顏色縮到圖表常用的 9 到 12 像素字級會看不清楚，它會提出一個調整後的數值並解釋原因，而不是照抄了事。二是它會給一張「保真收據」，列出抓了哪些網址、每個顏色對應什麼角色、字體從哪裡來、有沒有用到替代字體。
還有一個小設計值得一提：第一次在新專案用的時候，如果偵測到你還沒做品牌校準，它會停下來問你要不要先設定，而不是默默出一張預設配色的圖給你。
跟 Mermaid、draw.io、Napkin AI 差在哪？
差在定位完全不同。Mermaid 和 draw.io 是「畫圖的工具」，diagram-design 是「一套設計規範加上讓 AI 遵守它的說明書」。它自己不畫圖，是你原本就在用的 AI 照著它的規則畫。
| 工具 | 價格（截至 2026 年 8 月，以官網為準） | 怎麼用 | 適合誰 |
|---|---|---|---|
| diagram-design | 免費（MIT） | 在 AI 對話中用日常語言描述 | 已經在用 Claude Code／Cowork，要圖風格統一的人 |
| Mermaid | 免費；Mermaid Chart 有免費方案 | 寫類似 Markdown 的語法 | 要把圖直接寫進程式碼庫、跟著版本控制走的人 |
| draw.io | 免費 | 滑鼠拖拉 | 要完全手動控制每個元素位置的人 |
| Napkin AI | 免費版每週約 500 點；付費約 9 至 22 美元／人／月 | 貼一段文字自動生圖 | 寫完文章要快速配圖、不想碰指令的人 |
| Whimsical | 免費版 3 個看板；付費約 10 至 20 美元／人／月 | 線上白板協作 | 要多人同時在一張圖上討論的團隊 |
| Excalidraw | 免費開源 | 手繪風白板 | 要那種隨手畫草稿感覺的人 |
比較值得注意的一點：diagram-design 可以直接吃你現有的 draw.io 和 Mermaid 檔案，把它們照這套規範重畫。它讀得懂 .drawio、.drawio.xml、.drawio.png、.drawio.svg，以及壓縮過、在編輯器裡看起來像亂碼的那種內容；Mermaid 則支援 .mmd、.mermaid 和 Markdown 裡的程式碼區塊。
重畫的時候有四個可調參數，這部分設計得比預期細緻：輸出格式（HTML／SVG／PNG）、尺寸（文件內嵌、16:9 投影片、社群卡片、A4 列印等）、細節程度（完整最多 24 個節點／平衡 12 個／精簡 7 個）、以及受眾（工程師／混合／高階主管）。
受眾這個參數改的是用字而不是數量。同一個節點，對工程師顯示「Auth Service ／ JWT · RS256 · :8443」，對高階主管就變成「登入」。每次轉換結束它會給一份帳目，列出哪些東西被合併、被收摺、被丟掉。
一年能省多少訂閱費？
如果你現在有在付費用圖表工具，可以算一下這筆帳。調整下面的人數和方案看看：
要說清楚的是：這筆帳只有在你原本就付費、而且用途以架構圖流程圖為主的情況下才成立。如果你買 Whimsical 是為了多人同時在白板上開會，diagram-design 取代不了，它沒有協作功能。
誰該裝？誰不該裝？
先講該裝的：
- 經營部落格或電子報的人：品牌校準那步會讓每張圖都跟你的網站同一個調性，這是免費工具最難做到的事。
- 要做簡報的上班族：16:9 尺寸加上「高階主管」受眾參數，是為了給老闆看而設計的。
- 寫技術文件的人：現有的 draw.io 和 Mermaid 檔案可以直接倒進去重畫，不用從頭做。
- 已經在用 Claude Cowork 或 Claude Code 的人：安裝成本接近零，裝了不用也不佔什麼。
不該裝的，作者自己在說明文件裡列得比我還老實，我照著轉述：想在推特發張示意圖的、只是想列清單的（用表格或條列就好）、要做前後對照的（也是表格）、以及那種一個方框配一行字的所謂「圖」。最後這句我覺得該裱起來：
畫之前先問自己：讀者從這張圖學到的，會比從一段寫得好的文字更多嗎？如果不會，就別畫。
diagram-design 專案說明
一個工具肯在自己的說明書裡寫「這些情況不要用我」，可信度通常比講一堆好話的高。
會畫圖之後，能多做什麼？
把工具接回收入這件事，這裡有幾條路是走得通的。
內容變現這條最直接。圖文內容在社群平台的停留時間本來就比純文字長，而風格統一的圖會慢慢累積成辨識度。你發第十張圖的時候，別人已經認得出那是你的圖。這件事以前要嘛請設計師，要嘛自己學 Figma，現在門檻降到裝一個免費技能包。
接案的話，交付物的賣相值錢。同樣一份顧問建議或系統規劃，附幾張像樣的架構圖和一份純文字報告，客戶感受到的專業度差很多，報價空間也不一樣。
在公司裡，這是低成本的能見度。會把複雜的事講清楚，本來就是加分項。把部門流程畫成一張看得懂的圖，比寫三頁報告更容易被記住。
要留意的是這類技能包正在快速變多。同一週的 GitHub 熱門榜上，光是「管理一整隊 AI agent」的專案就有六個。工具本身的稀缺性只會愈來愈低，真正累積下來的是你把東西講清楚的能力。工具幫你降低執行成本，判斷力還是得自己長。
如果不喜歡，還有什麼可以用？
- 想要更省事：Napkin AI。貼一段文字自動生圖，完全不用碰指令，免費版每週約 500 點額度。代價是風格由它決定。
- 想要完全掌控：draw.io。免費、手動、要拖多久拖多久。
- 想跟程式碼一起版本控制：Mermaid。語法寫進 Markdown，GitHub 直接渲染。
- 想要團隊一起討論：Whimsical 或 FigJam。這是 diagram-design 完全不碰的場景。
- 想要手繪草稿感：Excalidraw，免費開源。順帶一提，diagram-design 裡也有一個手繪風濾鏡，作者建議用在散文類文章，不要用在技術文件。
常見問題
不會寫程式可以用嗎？
可以。Claude Cowork 的安裝路徑完全是圖形介面，裝完之後你只要用日常語言描述要什麼圖。專案說明裡的示範就是這種寫法：「幫我畫一張我的應用架構圖，前端、後端、資料庫、Redis 快取」。
免費版有什麼限制？
沒有免費版和付費版之分，整個專案是 MIT 授權，可商用可修改。真正的成本是你原本那個 AI 工具的訂閱費，圖表功能本身不另外收錢。
出來的圖可以放進簡報或 Figma 嗎？
可以。匯出 SVG 給 Figma 和 Illustrator 用，匯出 PNG 給簡報用，預設是 2 倍解析度，可以調到 3 倍。要注意匯出的只有圖本身，完整版式裡的編輯卡片和頁首不會一起出來，那種要用瀏覽器的整頁截圖或列印成 PDF。
星數這麼高代表好用嗎？
星數只能說明它現在很紅，說明不了合不合你用。這個專案值得留意的訊號不是 10,270 顆星，而是它有跨三個作業系統的自動測試、有正式的設計決策紀錄檔，而且最後一次更新就在本文發布當天早上。這些比星數更能反映維護狀況。
它會不會把我的圖傳到網路上？
匯入 draw.io 或 Mermaid 檔案時，專案說明寫明只做純文字解析，不渲染、不執行 JavaScript、不開瀏覽器、不連網、不跟隨檔案裡的連結。輸出的 HTML 除了 Google Fonts 之外沒有其他外部請求。
新手行動清單
- 先去看線上畫廊，確認 27 種類型裡有沒有你要的那種，再決定裝不裝。
- 照你在用的平台貼那一行安裝指令，Cowork 使用者走圖形介面。
- 裝完立刻做品牌校準，對 AI 說「onboard diagram-design to 你的網址」。這步跳過等於白裝。
- 拿一張你手邊最醜的舊圖丟進去重畫，直接比對差異。
- 就算最後不裝，也把那條「所有數值除得盡 4」記下來，用在你現在的工具上。
延伸閱讀
- Hallmark：另一個專門對付 AI 味設計的技能包
- Next AI Draw.io：用對話改圖的另一條路
- Claude Skills 裝太多會怎樣？swyx 的刪減實驗
- book-to-skill：把一本書變成 Claude Code 技能包
參考資料
- cathrynlavery/diagram-design GitHub 專案頁（星數、授權、說明文件，2026 年 8 月 13 日查核）
- diagram-design 線上圖表畫廊
本文為資訊分享，不構成任何投資或採購建議。文中提及的第三方工具價格為 2026 年 8 月各官網公開資訊，可能隨時調整，實際以官網為準。本文不含任何聯盟或推薦連結，作者與文中提及的工具及其開發者無任何商業往來。
發表迴響