Diagram Design 是由設計師 Cathryn Lavery 開源的代理技能（agent skill），在 GitHub 累積 50,236 顆星標與 3,191 次複製，採 MIT 授權。它以單一自帶樣式的 HTML 檔輸出內嵌 SVG 圖表，涵蓋 44 種圖表類型，並能依自家網站的配色與字型調整外觀。專案的核心主張是「代理畫圖，設計師不嫌棄」，把圖表從繪圖軟體的專利轉為可以描述、可以版本控管的檔案。
專案於 2026 年 4 月 16 日建立，由 LittleMight 創辦人 Cathryn Lavery 維護，累積超過 280 次提交與 87 個未結議題。外掛版本以語意化版本標示，最新一次自動版本提升至 2.6.74，專案另設有官方網站、線上圖庫、變更紀錄與貢獻指南。本文依據官方儲存庫與說明文件，分析其設計系統、技術取捨、安裝路徑與採用前提。
Diagram Design 是什麼？
Diagram Design 是開源的代理技能，透過一句自然語言指令輸出單一 HTML 檔，內含向量圖表，涵蓋 44 種類型並可套用品牌配色，採 MIT 授權。
它的定位是設計系統，而非繪圖工具。使用者以自然語言描述需求，代理先選定圖表類型、說明版面規劃與取捨，再寫出一個可以直接雙擊開啟的 HTML 檔。整個流程沒有拖曳操作，也沒有時間軸或畫布，產出物同樣是純文字檔案，可以在瀏覽器開啟，也可以提交到版本控制系統。
專案的技術選擇集中在單檔自足。圖表以內嵌 SVG 繪製，不依賴外部圖片、不載入前端框架，預設情況下唯一的網路請求是從 Google Fonts 取得三套字型；若改為系統字型模式，輸出檔案完全不發出網路請求。這項設計讓檔案無論在離線環境或多年之後，仍能以相同外觀開啟。
維護模式亦值得注意。專案以漸進揭露（progressive disclosure）組織內容：代理啟動時只看到技能名稱與描述，當請求符合條件才載入主要技能檔，接著再依圖表類型載入單一參考文件。說明文件指出，即使圖表類型持續增加，一般請求的載入範圍仍維持在三份檔案以內。
Diagram Design 有哪些核心技術亮點？
核心亮點是 4 像素格線的編輯風格設計系統、44 種圖表各三種樣式、可自動抓取品牌配色與字型，以及無障礙標記。
第一項亮點是把品味寫成規格。專案明確定義一套設計系統：一張圖只用一個強調色，焦點元素限於一到兩個，邊框為 1 像素細線，不使用陰影，圓角上限為 10 像素，所有座標、寬度與間距都必須是 4 的倍數。字型分工同樣固定，標題與側註用襯線體，節點名稱用無襯線體，技術標籤用等寬體。文件直言這條格線規則不可妥協，因為它正是圖表不會顯得「機器生成」的關鍵。
第二項亮點是類型與樣式的組合深度。44 種圖表涵蓋架構圖、IT 現況圖、流程圖、時序圖、狀態機、實體關聯圖、時間軸、泳道圖、象限圖、雷達圖、循環圖、樹狀圖、組織圖、堆疊層次、Venn 圖、金字塔、柱狀圖、瀑布圖、熱圖、甘特圖、散佈圖、桑基圖、魚骨圖、Wardley 地圖、看板圖、使用者旅程、部署圖、依賴圖、UML 類別圖、資料庫綱要與極座標圖等；每一種都提供極簡淺色、極簡深色與完整編輯三種靜態變體，另有折線、散佈與矩形樹狀圖的具名變體。
第三項亮點是品牌適配。技能可讀取指定網站的頁面，抽取主要配色與字型堆疊，再映射到紙張、墨色、次要文字、強調色與連結等語意角色，並在寫入設定前先做對比度檢查；若某個顏色在圖表的小字級下未達無障礙標準，技能會提出調整值並說明理由。品牌適配同時輸出一份保真收據，列出取樣的網址、顏色角色、字型家族與來源，避免系統字型被默默替換。
第四項亮點是可存取性與動畫契約。每個模板都會為內嵌 SVG 加上可存取名稱與描述，包含角色標記、可解析的標籤關聯，以及置於最前的標題與描述節點；識別碼依圖表與樣式加前綴，避免同一頁內嵌多張圖時發生衝突。動畫屬於可選項，分為無、逐段揭示、分步與循環四種模式，且必須提供完整靜態首格，並在偵測到減少動態偏好時停用播放控制。
Diagram Design 的統計數據與授權條件為何？
專案累積 50,236 顆星標、3,191 次複製與 283 次提交，87 個未結議題，採 MIT 授權，以 HTML 撰寫。
採用規模與維護節奏可一併觀察。專案在半年內累積超過 280 次提交，提交者除作者本人外，另有多位社群成員與自動化機器人參與，貢獻者名單超過十人；最新版本 2.6.74 由合併後的自動版本流程產生，顯示維護工作已交由持續整合承接。
授權屬寬鬆類型。MIT 授權允許使用、修改、再散布與商業整合，僅要求在副本中保留著作權與授權聲明。專案內含的圖示分別取自 Tabler Icons 與 Simple Icons，兩者同樣採用寬鬆授權，並在各圖示說明中標示來源；圖表模板與樣式設定則與主專案同授權釋出，對需要嵌入產品的團隊而言，沒有額外的商業授權門檻。
Diagram Design 與 Mermaid、draw.io 有何差異？
Mermaid 以文字描述由渲染器排版，draw.io 手動拖曳繪製，Diagram Design 則依 4 像素格線排版，輸出單一 HTML 檔，並可重繪兩者檔案。
製作方式是最直接的分野。Mermaid 與 PlantUML 由使用者撰寫文字，排版交由渲染器決定；draw.io 與 Excalidraw 由使用者手動拖曳圖形；Diagram Design 則由使用者描述需求，代理負責選型與版面配置，並以持續整合檢查重疊與裁切問題。
外觀控制與輸出格式亦不同。Mermaid 呈現的是渲染器主題，draw.io 呈現的是使用者自己畫出的樣子，Diagram Design 提供一套帶有明確立場的編輯風格，並可對接品牌。輸出方面，draw.io 與 Excalidraw 產生可再編輯的畫布檔案，Diagram Design 產生內嵌 SVG 的 HTML 檔，並可匯出為 SVG 或 PNG，供 Figma、簡報或社群卡片使用。
專案本身也列出限制。輸出品質取決於所使用的模型，同一個提示兩次執行可能排出不同版面；產出物不是可編輯的來源格式，在拉取請求中沒有文字可以比對，也沒有畫布可以拖動方框。文件因此明確建議，對每個衝刺期都會變動、且存放在版本控制系統的文件而言，Mermaid 仍是更合適的選擇，Diagram Design 針對的是即將發佈的圖表。
如何快速開始使用 Diagram Design？
以技能安裝指令加入後即可用自然語言要求圖表；亦可複製模板檔手動編輯，或匯出 SVG 與 PNG，匯出功能需先安裝對應的執行環境。
安裝方式依宿主環境而異。支援代理技能規範的環境可用技能命令列加入，Claude Code 使用者可從市集安裝外掛並開啟自動更新，Codex、GitHub Copilot、Factory Droid 與 Pi 各自提供市集或外掛指令，Kiro 與 OpenCode 則以匯入或複製目錄的方式取得。當安裝目標解析出多個技能目錄時，命令列工具會建議採用符號連結，讓一次更新同時生效於各處。
使用方式是一句自然語言。使用者可以直接要求架構圖、象限圖或含權杖更新的時序圖，也可要求技能先讀取自家網站，把配色與字型套用到之後的每一張圖。文件列出的提示範例涵蓋架構草圖、影響與成本四象限、以及帶 401 重試的授權流程，代理會先說明選型與計畫，再輸出檔案。
進階操作包含匯入與匯出。匯入功能可讀取 draw.io、Mermaid 與 Excalidraw 檔案並重新繪製，並提供格式、尺寸、細節與受眾四個調節參數，其中細節參數依固定降級順序保留節點，最後產出保真帳目，列出合併、折疊與捨棄的內容；匯出功能可抽出 SVG 或將圖表點陣化為 PNG，PNG 需先安裝對應的瀏覽器自動化環境。專案亦提供自我檢查指令，用來驗證產出的檔案是否符合規範。
Diagram Design 的品牌適配功能如何運作？
使用者要求對接某個網址後，技能抓取首頁並抽取配色與字型，映射為語意角色，通過對比度檢查後寫入樣式設定，之後所有圖表沿用同一品牌。
流程由一句指令啟動。技能讀取指定網址的首頁，抽取主要配色與字型堆疊，再依語意角色對應：網站背景成為圖表紙張色，主要文字色成為墨色，次要文字成為淡色，最常出現的品牌色成為強調色，標題字型成為圖表標題字型，正文與等寬字型分別對應節點名稱與技術標籤。
寫入前會先驗證可存取性。技能檢查墨色在紙張色上的對比度是否符合標準，若某個顏色在圖表使用的 9 至 12 像素字級下不足，會提出調整後的值並說明原因；預設樣式同樣受持續整合檢查約束，文字角色須達到指定對比，必要標記亦須在淺色與深色紙張上維持可見。
多客戶情境以設定檔處理。品牌設定可儲存為具名設定檔，各專案只要加入一個標記檔指向對應設定檔，即可在同一個安裝中共用不同品牌，避免互相覆寫；設定檔函式庫在支援的宿主之間共用。專案同時設有首次使用防護，若專案樣式仍為預設值，技能會先暫停並詢問要執行品牌適配、手動貼上設定，或直接使用預設樣式，避免未經確認就把預設外觀交付到品牌專案。
Diagram Design 有哪些適用場景與限制？
適合即將發佈的簡報、部落格與社群圖表，以及需要重繪舊檔案的場合；不適合每期變動的文件、快速文字圖與單純的形狀示意。
適用場景集中在對外發佈的圖表。專案列出的用途包含投影片與社群頁面的架構圖、需要一致視覺的技術文件插圖，以及把既有 draw.io 檔、Mermaid 區塊或白板草圖重繪為正式版本的流程；由於重繪可指定尺寸與細節層級，同一份來源可分別輸出為簡報、網頁或印刷格式。
不適用的情境同樣明確。文件建議，存放在版本控制系統且每個衝刺期都會變動的圖表應繼續使用 Mermaid，因為它可以逐行比對且由平台直接渲染；純文字圖、清單、前後比較，以及只有單一形狀加標籤的示意，也都不值得動用繪圖流程。專案在動筆前設下一道判斷：讀者從圖中得到的資訊，是否多於一段寫得好的文字。
採用前需衡量幾項前提。輸出穩定性取決於模型與提示品質，同一提示可能得到不同版面；檔案不含可拖曳編輯的來源格式，後續修改需要重新提問或直接編輯向量碼；匯出點陣圖需額外安裝瀏覽器自動化環境，團隊若在受限網路中工作，仍需處理字型來源或改用系統字型模式。對於需要高度客製版面、或要求每次輸出一致的使用者而言，仍有明顯的學習與調整成本。
出處連結有哪些？
本文資訊整理自 cathrynlavery/diagram-design 的 GitHub 儲存庫與官方說明文件，涵蓋設計系統、圖表類型、安裝方式、匯入匯出與授權條款。
- GitHub 儲存庫：https://github.com/cathrynlavery/diagram-design
- 官方網站：https://diagramdesign.dev
- 線上圖庫：https://cathrynlavery.github.io/diagram-design/
- 技能安裝頁：https://skills.sh/cathrynlavery/diagram-design/diagram-design
- 作者專欄：https://littlemight.com
- 技能目錄：https://github.com/cathrynlavery/diagram-design/tree/main/skills/diagram-design
- 變更紀錄：https://github.com/cathrynlavery/diagram-design/blob/main/CHANGELOG.md
- MIT 授權條款：https://github.com/cathrynlavery/diagram-design/blob/main/LICENSE
總結：Diagram Design 適合什麼團隊？
適合具備代理工作流程、需要大量對外圖表的團隊；若圖表需頻繁比對或要求可拖曳編輯，Mermaid 與傳統繪圖工具更合適。
專案的價值在於把圖表從一次性產出變成可重複的規格。4 像素格線、單一強調色、三套字型與固定對比標準構成一組可檢查的規則，讓品質不再取決於操作者的手感；44 種圖表與三種樣式的組合，則覆蓋了技術文件與簡報最常見的視覺需求，MIT 授權與無外部依賴的輸出，進一步降低了長期使用的成本。
採用前仍須衡量現實條件。它假設團隊已經有可用的代理環境，也接受由模型決定版面所帶來的不確定性；對需要逐行比對、或需要反覆微調位置的圖表而言，文字描述與拖曳操作仍具優勢。對於圖表數量多、對外發佈頻繁、且希望視覺與品牌一致的團隊，這套技能提供了明確且可驗證的槓桿。