diagram-design 是什麼、怎麼安裝使用：按你的品牌色畫「編輯級」圖表的 Agent Skill（44 種圖，單文件 HTML + SVG）

本文根據 cathrynlavery/diagram-design 倉庫 README 與項目網站整理，資料核對於 2026-10-11。

是什麼

讓大模型畫架構圖，最常見的產物是一段 Mermaid 代碼：能看，但千篇一律，放進文章或演示裏很出戲。Diagram Design 走的是另一條路線——README 的說法是畫「編輯級」的圖表：輸出一個自包含的 HTML + SVG 文件，按你的品牌來，設計規則內建，「沒有陰影，沒有 Mermaid 式的敷衍」。

用法就是說人話。智能體會自己選圖表類型、先陳述它的計劃，再寫出一個雙擊就能打開的 .html 文件。README 說目前有 44 種圖表類型，另帶一套 87 個單色的 IT / 雲圖標（伺服器、數據庫、Docker、Kubernetes 等）用於架構圖，以及手繪風格的可選濾鏡。

它的特色是品牌接入：對它說一句「把 diagram-design 接入到某個網址」，它會從你的網站提取配色和字體，此後每張圖都與網站風格一致；對比度檢查自動進行。

截至 2026-10-11，GitHub 顯示該倉庫約 4.9 萬 Star，最近一次推送在 2026-10-10。

包含哪些 Skill

一個技能 diagram-design，覆蓋的圖表類型包括 README 舉例的架構圖、四象限圖、時序圖等共 44 種。導出方面，預設產物是 HTML；需要 PNG 時通過 Playwright 以 2 倍解像度柵格化（要先一次性安裝 Playwright 和 Chromium）。它還能讀取 Excalidraw 的場景文件，只解析其中的文字。

怎麼安裝

任何支持 Agent Skills 的工具：

bash
npx skills add cathrynlavery/diagram-design

Claude Code 走插件市場可以獲得更新和斜槓命令：

text
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

Codex：codex plugin marketplace add cathrynlavery/diagram-design，再 codex plugin add diagram-design@diagram-design。README 提醒 Claude Code 對第三方市場預設不自動更新，需要在 /plugin → Marketplaces 裏手動打開。

怎麼用

README 給的幾句示例：

• 「給我的應用畫一張架構圖：前端、後端、數據庫、Redis 緩存」；
• 「我需要一個四象限圖，按影響和投入展示第二季度的項目」；
• 「畫一個帶令牌的接口調用時序圖，包含 401 之後刷新令牌的流程」；
• 「把 diagram-design 接入到 https://yoursite.com」——提取你網站的配色和字體。

適合誰 / 不適合誰

適合：

• 寫技術網誌、產品文檔、對外演示，需要好看且風格統一的配圖的人；
• 給多個客戶出圖、需要在不同品牌之間切換的顧問和設計師（README 有多客戶工作方式的說明）。

不適合：

• 需要隨代碼自動更新、放在倉庫裏以文本形式評審的圖——那正是 Mermaid 的強項；
• 需要在白板工具裏多人拖拽編輯的場景，成品是靜態文件。

注意事項

• 許可證：GitHub 標註為 MIT。
• 聯網行為：README 說明圖表預設從 Google Fonts 加載三款字體，這是它發出的唯一網絡請求；要求使用系統字體後則完全離線。國內網絡下 Google Fonts 可能加載緩慢或失敗，建議改用系統字體。品牌接入功能會訪問你指定的網址。倉庫另有一份 PRIVACY.md 列出技能會通過網絡發送的內容。
• 認準官方來源：README 聲明正式版本只來自這個倉庫，作者公司 LittleMight 負責在各插件目錄上架，其他名字的同名條目是非官方副本。
• 安全：導出 PNG 會安裝並運行 Playwright；安裝前瀏覽 SKILL.md。
• 與本站介紹過的 Archify 同屬畫圖類技能，Archify 偏可交互的架構圖，這個偏靜態、可出版的圖表。