Diagram Design — 29 種編輯級圖表 for Claude Code/Codex/Pi

• URL: https://github.com/cathrynlavery/diagram-design
• Date Saved: 2026-08-16
• Source: GitHub
• Tags: ai-tools, design-tools, dev-tools
• Repo: https://github.com/cathrynlavery/diagram-design

Summary

Cathryn Lavery 做的 Claude Code agent skill，生成設計師不會討厭的編輯級圖表。19.3K stars，MIT License。

核心：

• 29 種圖表類型（architecture, flowchart, sequence, state machine, ER, timeline, swimlane, quadrant, nested, tree, org chart, venn, loop/flywheel 等）
• 自包含 HTML + SVG，無需 build step、無 JavaScript、無外部圖片依賴
• 三種靜態 variant：minimal light、minimal dark、full-editorial
• 可選動態效果（用於有序說明）
• 能讀你的網站自動匹配品牌（60 秒）

設計哲學：

• No Figma、no generic rounded boxes、no Mermaid-slop
• “The highest-quality move is usually deletion” — 每個節點都要有存在價值
• Accent color 只用於 1-2 個讀者應該先看的東西
• 目標密度：4/10

用途：

• Claude Code / Codex / Pi 的 agent skill
• 也能重繪 draw.io 或 Mermaid 來源為指定格式/大小/細節等級
• Semantic patterns 描述行為（queue, policy trace, trust boundary）獨立於 layout

背景： 作者經營 littlemight.com 和 BestSelf.co，每次需要圖表都被 Claude 生成的 generic rounded-box 困擾，或在 Figma 花 30 分鐘，所以自己做了這個 skill。