日榜 #12026-08-13

cathrynlavery/diagram-design

29 editorial diagram types for Claude Code. Self-contained HTML + SVG. No shadows, no Mermaid-slop.

★ 10.3k stars · ▲ +2,855 今日 · 🔶 HTML · 📜 MIT在 GitHub 開啟 ↗

這是什麼

cathrynlavery/diagram-design 是一套給 Claude Code、Codex 與 Pi 使用的圖表設計 skill，目標很直接：把代理生成的架構圖、流程圖、序列圖等，從常見的圓角方塊與臨時配色，拉到可直接放進文章或簡報的編輯品質。README 目前描述它提供 27 種視覺類型，每種都有 minimal light、minimal dark、full-editorial 三種靜態變體，輸出是可直接在瀏覽器開啟的自含 HTML / SVG，不需要 build step、JavaScript 或外部圖片依賴。它的設計哲學不是「把所有資訊塞進圖裡」，而是強調刪減：每個節點都要有存在理由，重點色只留給讀者最該先看的 1–2 件事，目標密度約 4/10。

為什麼上榜

這個專案今天拿到 2,855 顆星、累計超過 10,000 顆星，爆紅點很清楚：它正好踩中「AI 會畫圖，但常畫得很醜」的痛點。許多開發者已經習慣請模型產生 Mermaid、draw.io 草圖或架構說明，但最後仍要人工整理成品牌一致、可發佈的視覺稿。diagram-design 的差異在於，它不是單純多給幾個模板，而是把圖表類型、品牌 token、語意模式、動態規則與匯入流程包成 agent skill，讓代理能先判斷適合的圖型，再產生受約束的輸出。README 也特別反對「Mermaid-slop」：重點不只是能畫，而是畫面要有取捨、有層次、可閱讀。

適合誰，可以拿來做什麼

它最適合會用 Claude Code、Codex 或 Pi 的技術寫作者、產品團隊、開發者與顧問型工作者。如果你常需要把系統架構、資料模型、OAuth 流程、專案優先級、時程、治理流程或抽象概念放進文章、README、提案、內部文件，這類工具可以把「請 AI 畫一張圖」變成更穩定的產線。上手門檻主要在於你要願意用 agent skill 工作流，而不是只複製一段 Mermaid。它也提供品牌 onboarding：代理可讀取網站首頁，抽取背景色、文字色、CTA 色與字體，映射成 paper、ink、muted、accent、link 等語意 token，讓之後的圖更像你的網站，而不是通用模板。

上手

README 提供多種安裝方式，依你使用的代理工具而定。Pi、Claude Code 與 Codex 都有對應指令；若要長期客製 references/style-guide.md，README 建議 clone repo 後做可編輯安裝，避免套件更新覆蓋修改。

# Pi
pi install https://github.com/cathrynlavery/diagram-design

# Claude Code
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

# Codex
npx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design

# 從 cloned checkout 開啟 gallery
xdg-open skills/diagram-design/assets/index.html

實際使用時，可以直接要求代理：「幫我的 app 畫 architecture diagram：frontend、backend、database、Redis cache」，或要求 quadrant、sequence 等圖。若已有 draw.io 或 Mermaid，也可用 import 指令重繪成同一套設計系統。

README 重點摘要

README 目前列出 27 種圖表類型，涵蓋 architecture、flowchart、sequence、state machine、ER、timeline、swimlane、quadrant、tree、radar、loop、Gantt、scatter 等常見文件需求。
輸出預設是靜態、script-free 的 HTML / SVG；可選 motion，但必須保留完整靜態第一幀、確定性時間軸與 reduced-motion fallback。
品牌 onboarding 會從網站抽取色彩與字體，並產生 sampled URLs、色彩角色、字體來源與 fallback 等 fidelity receipt。
可從 draw.io / diagrams.net 或 Mermaid 匯入並重繪，支援 size、detail、audience、format、page 等調整旋鈕。
授權為 MIT，適合拿來放進既有文件與 agent workflow 中試用。