最適合誰
需要在 Claude Code 工作流裡快速生成高品質圖表的人，特別是：
- 技術文件作者（架構圖、流程圖、時序圖）
- 研究報告、科普文章需要搭配視覺化說明的寫作者
- 想從 Mermaid 升級到視覺品質更高方案的人
- 有品牌設計規範需求，希望圖表與網站色彩一致的設計師或工程師
如果你只需要快速草稿，Mermaid 就夠了。如果你的圖表最終會出現在報告、簡報或公開文件中，diagram-design 的輸出品質差距是可見的。
我實際怎麼看待它
diagram-design 解決的是一個你可能沒有意識到已經存在的問題：AI 生成的圖表，通常長得像 AI 生成的圖表。
這個 skill 的設計哲學有一條核心規則：「每個節點必須賺到自己的位置。」如果刪掉它不會造成訊息損失，就刪掉它。accent 色只留給最重要的 1–2 個元素。所有座標可被 4 整除（防止 AI 美學失準）。這些不是風格偏好，而是對「AI 生圖容易犯的毛病」的系統性對抗。
13 種圖表類型覆蓋範圍完整：Architecture、Flowchart、Sequence、State Machine、ER、Timeline、Swimlane、Quadrant、Nested、Tree、Layers、Venn、Pyramid。每種都有三個視覺變體，開 browser 直接用，輸出是自包含 HTML+SVG，不需要任何構建工具或外部依賴。
品牌 onboarding 功能特別值得一提：給定一個網站 URL，自動萃取 CSS 色彩系統並映射為 paper/ink/muted/accent 語義 token，所有後續圖表都自動繼承這套色系。1127 顆星且作者 Cathryn Lavery 維護積極，社群品質高。
真正強的地方
- 13 種圖表 x 3 種視覺變體，覆蓋幾乎所有技術文件需要的圖表類型，輸出品質明顯優於 Mermaid
- 給網站 URL 就能自動萃取色彩系統並套用至所有圖表，含 WCAG AA 對比度驗證
- 自包含輸出：HTML+SVG，零依賴零構建，貼到任何文件都能用
- 節點最小化、accent 色嚴格限制、座標強制 4 的倍數。這些規則讓輸出「不像 AI 畫的」
- MIT 授權，一行安裝：
npx skills add cathrynlavery/diagram-design
它會失敗在哪裡
- 這是靜態 SVG，不是互動式圖表。需要可縮放、可篩選的動態視覺，另找工具
- 設計哲學本身偏向精簡，幾十個節點的複雜關係圖可能需要手動調整佈局
- 品牌萃取依賴 CSS 規範性：如果目標網站的色彩定義不在 CSS 變數或常見位置，自動萃取效果會打折
價格、難度與風險
完全免費，MIT 授權。難度低：安裝後在 Claude Code 裡描述需要的圖表類型，skill 處理所有細節。沒有 API 費用，沒有外部服務依賴。
結論
Mermaid 的升級路徑。Mermaid 快，但輸出品質有上限；diagram-design 慢一點，但輸出結果可以直接用在正式文件裡不需要調整。
想讓圖表「看起來像人設計的」，這是目前 Claude Code ecosystem 裡覆蓋最完整的方案。品牌 onboarding 功能讓它在有設計規範的組織或個人品牌場景裡格外實用。