diagram-design 是一个跑在你常用 AI Agent 里的编辑级图表设计 Skill。这个 软件工具 走 MIT 协议，5.2 万星，支持 Claude Code、Codex、GitHub Copilot、Cursor、Factory Droid 和 Pi。作为一个 开源软件，它提供 44 种图表类型，输出自包含 HTML 加 SVG，不要阴影不要 Mermaid 那种丑图。
场景痛点
让 AI 画个架构图，出来的都是圆角方块加彩虹色，字重没有层次，一个强调色都没有。Mermaid 画出来的图设计师看了摇头，draw.io 手画又费时间。想让 AI 出的图能直接放进博客和文档，不用再找设计师重画。做AI应用和Skill工具的人想要的，不是一个把盒子摆来摆去的工具，是一个把”品味”写进规则里、输出编辑级图表的 Agent Skill。
场景痛点
让 AI 画个架构图，出来的都是圆角方块加彩虹色，字重没有层次，一个强调色都没有。Mermaid 画出来的图设计师看了摇头，draw.io 手画又费时间。想让 AI 出的图能直接放进博客和文档，不用再找设计师重画。做AI应用和Skill工具的人想要的，不是一个把盒子摆来摆去的工具，是一个把”品味”写进规则里、输出编辑级图表的 Agent Skill。
主要功能特点
44 种真实图表类型
架构图、Sankey、热力图、爆炸等距图、数据库 schema 等 44 种。每种都是真的有自己规则的类型，不是一种盒子样式改 44 遍。
品牌匹配约 60 秒
指向你的网站，它读取你的颜色和字体，应用到每张它画的图上。一个强调色指向最重要的那个节点，其他地方不抢色。
自包含 HTML 加 SVG
一个文件，双击打开，离线可用。不要构建步骤，不要仪表盘，不要托管。字重和分组承载意义，不是彩虹填充。这种设计工具级别的输出，比 Mermaid 精美。
导入重画不是转换
指向 draw.io、Mermaid 或 Excalidraw 的源文件，它重画而不是转换，按目标受众和尺寸重新组织细节。
默认可访问加可选动画
屏幕阅读器宣布每张图的标题和描述，不是空白矩形。默认静态，需要解释时才加动画。这种开发者工具级别的规范，比 demo 图表严谨。
简易使用教程
- 在你常用的 Agent（Claude Code、Codex、Copilot、Cursor 等）里安装这个 Skill。
- 直接说”画一张我们部署流程的图”。
- Skill 自动从 44 种类型里选合适的。
- 想品牌匹配就指一下你的网站，它读颜色和字体。
- 想重画已有图就贴 draw.io、Mermaid 或 Excalidraw 的源文件。
- 输出是一个 HTML 文件，双击打开看效果。
- 想离线用就把 HTML 文件存本地，不需要网络。
- 想加动画就在提示里说要动画，默认静态。
- 日常用下来画架构图和流程图都在 Agent 里完成，想找类似工具推荐里的 AI工具可以翻酷软趣站。
官方网站
GitHub https://github.com/cathrynlavery/diagram-design
下载地址
https://pan.quark.cn/s/3124b3017126
https://www.guangyapan.com/s/1957005129089699879_aeWhI5wocgzRgCO6 （光鸭新用户注册福利：永久免费空间：所有新用户注册即可解锁 2TB 永久免费存储空间，无需额外任务或付费）
相关推荐
huashu-art-motion — 给 Coding Agent 用的艺术动画 Skill，代码画风格动起来
2026-10-12
qiaomu-codex-imagegen 乔木 Codex 生图 — 让任何 Agent 都能调 Codex 生图｜24 类模板 48 预设
2026-10-07
