30,962 颗星背后：让 AI 编程 Agent 画出编辑级专业图表，diagram-design 做到了

你让 Claude 画过架构图吗？如果它给你返回了一堆扁平的圆角方块、蓝色渐变背景、还带个模糊阴影——那你大概已经放弃用它做图了。

我之前也是这样。直到我装了这个 Skill：diagram-design，30,962 颗星，39 种图表类型，输出的每一张图都是可以直接放进技术文档的编辑级质量。

它解决了什么问题

这个问题的本质不是”AI 不会画图”，而是”AI 不知道你要什么风格的图”。Claude Code 默认生成的图表，本质上是从 prompt 里猜了一个最安全的布局——结果就是谁用都是那副样子。

diagram-design 的解法很直接：给你 39 种经过设计的图表类型，每种都有语义标签。你要画的是”当前系统状态 + 改造路径”，就选 IT current-state；要画的是”SRE 告警链路”，就选 sequence；要画的是”团队决策流程”，就选 swimlane。AI 不再靠猜，而是靠语义匹配。

更重要的是：它会读你的品牌。

运行一行命令，onboard diagram-design to https://yoursite.com，它就会抓取你网站的主色调、字体，把整套图表风格改成你品牌的样子。不是 CSS 变量替换，是真正的语义映射——accent 色给重点节点，muted 色给辅助信息，背景色匹配页面。

39 种图表类型，覆盖真实场景

当前 v2.5.10 版本包含的图表类型：

流程与逻辑类：Flowchart（决策逻辑）、Sequence（时序消息）、State machine（状态转换）、Swimlane（跨职能流程）、Process（多角色顺序工作流）、Gantt（任务时间线）

结构与架构类：Architecture（组件连接）、High-Level（端到端集群栈）、Deployment（部署区域与制品）、Dependency graph（依赖关系，含循环检测）、UML class（类图）、Database schema（物理表结构）

分析与可视化类：Timeline（时间轴事件）、Bar / Line / Radar / Scatter / Treemap（各类图表）、Quadrant（双轴定位）、Pyramid（层级/漏斗）、Sankey（分流/合流定量）、Fishbone（因果分析）、Wardley map（价值链×演进）、Polar chart（极坐标）

组织与协作类：Org chart（所有权/路由）、User journey（阶段+动作+情感）、Story map（骨架×发布切片）、Kanban（看板）、IT current-state（现状+现代化路径）

每种类型都提供三种视觉变体：minimal light（白底素色）、minimal dark（深色主题）、full-editorial（编辑级完整风格）。直接用浏览器打开，无需任何构建工具或外部依赖。

项目边界：适合谁，不适合谁

适合：

• 技术写作者，需要在文档里放专业图表
• AI 编程 Agent 用户，想让代码仓库的 README 和文档更专业
• 需要快速出图的工程师，不愿意花时间在 Figma 里调像素
• 团队需要统一图表风格，通过品牌 onboarding 自动化

不适合：

• 需要复杂交互的图表（它输出静态 HTML/SVG，不是 Web 应用）
• 需要和数据源实时绑定的动态图表
• 对图表有精确印刷/出版要求的设计师

安装与使用

Claude Code：

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

然后启用自动更新：运行 /plugin → 打开 Marketplaces → 选 diagram-design → 开启 Enable auto-update。

Codex：

codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design

Pi：

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

运行 /reload。

支持的主机还包括 Factory Droid、Kiro、OpenCode、Claude Cowork（组织市场）。具体安装方式参考 官方安装文档。

安装完成后，直接用自然语言请求：

• “用 diagram-design 画一个用户注册流程的 flowchart”
• “onboard diagram-design to https://yoursite.com“
• “/import-mermaid 然后导出为 editorial 风格”

和 Mermaid / draw.io 比怎么样

Mermaid 的优势是纯文本、可以版本控制，劣势是输出样式不可控、社区风格过于趋同（扁平蓝灰色调）。

diagram-design 本质上是 Mermaid/draw.io 的编辑质量升级路径：它支持直接导入 Mermaid 或 draw.io 源文件，按你的主题重新渲染——不是替换，是提质。

从实测反馈看，用了 diagram-design 的用户普遍提到”告别 Visio”、”AI 一句话生成专业图表”，中文技术社区（今日头条、知乎）也有多个实测帖子给出了正面评价。

下一步建议

1. 今天就试：Claude Code 用户一行命令装好，用 onboard diagram-design to https://yoursite.com 完成品牌适配，然后用一次
2. 如果是团队用：考虑把 repo 镜像到你的 GitHub 组织，用 organization marketplace 做统一分发，配合 ~/.diagram-design/profiles/ 管理品牌配置
3. 关注更新：v2.5.10 刚加了 10 种新图表类型（Wardley map、Kanban、Story map 等），维护者更新节奏稳定

仓库：https://github.com/cathrynlavery/diagram-design
在线画廊：https://cathrynlavery.github.io/diagram-design/