GitHub日榜第一！这个AI图表插件让Claude Code告别"Mermaid丑图"
十有八九，你会得到一张这样的图：圆角矩形堆叠、配色随机、布局歪歪扭扭，放PPT里会被设计师同事直接diss，发文章里会让读者觉得"又是AI生成的垃圾图"。
如果你用过Claude Code、Codex或者Pi这类AI编程助手，大概率已经体验过这种绝望。你让它画个系统架构图，它返回一堆Mermaid代码——渲染出来就是一坨灰色的方框加箭头，跟"专业"二字毫不沾边。
但今天推荐的这个GitHub项目，直接把这个痛点连根拔起。
cathrynlavery/diagram-design，一个专为AI编程Agent打造的图表生成技能插件，GitHub日榜连续多天霸榜第一，累计17,000+ Star。它提供27种编辑级视觉图型，60秒自动匹配你的品牌色，输出干净自包含的HTML——打开浏览器就能看，零依赖，零构建。
项目地址：https://github.com/cathrynlavery/diagram-design
先说痛点。当前AI编程Agent画图有三个普遍问题：
第一，样式太丑。 AI生成的Mermaid图、PlantUML图，默认样式像是2005年的产品。圆角、灰底、单调的配色，放在技术博客或产品文档里格格不入。
第二，品牌不一致。 你的网站用了特定的配色方案和字体，但AI画的图完全不管这些。每次都需要手动调整颜色、字体、间距，费时费力。
第三，交互成本太高。 想要一张像样的图，要么在Figma里折腾30分钟，要么用draw.io手动拖拽，要么忍受AI生成的丑图。
diagram-design的作者Cathryn Lavery自己就深受其害。她写技术博客、运营电商网站BestSelf.co，每次需要配图时都要经历一轮"AI生成→丑→Figma重做→放弃"的循环。于是她干脆做了一个Claude Code技能插件，让AI直接产出编辑级的图表。
结果这个项目火了。27种视觉图型，涵盖从架构图到甘特图、从泳道图到雷达图的几乎所有常见类型。更关键的是，它输出的不是截图，不是图片——是自包含的HTML文件，可以直接嵌入网页，可以导出SVG丢进Figma，可以转PNG做PPT。
这个项目最硬核的地方在于图型数量和质量。不是随便糊几个模板，而是每种图型都有light、dark、full-editorial三种变体，还有语义化设计。
| 图型分类 | 具体类型 |
|---|
| 系统架构 | 架构图、状态机、ER/数据模型、层级堆叠 |
| 流程逻辑 | 流程图、泳道图、跨角色流程、多角色顺序流程 |
| 数据展示 | 柱状图、折线图、散点图、甘特图 |
| 关系表达 | 时序图、树形图、组织架构图、嵌套层级 |
| 对比分析 | 象限图、韦恩图、雷达图、漏斗/金字塔 |
| 数据工程 | 勋章图（多层数据存储）、数据流图、集成图、安全矩阵 |
| 特殊场景 | 循环飞轮图、IT现状图、咨询2×2矩阵、高层概览 |
每个图型都有明确的用途定义和使用场景。比如"Loop"图型专门用于表现飞轮效应——多个节点围绕一个共享记忆中心循环协作，非常适合描述AI Agent的工作流程。
操作流程极简： 你对Agent说"onboard diagram-design to https://yoursite.com"，它会自动抓取你的网站首页，提取主色调、字体栈，然后映射到语义角色——背景色、文字色、强调色、辅助色。
| 从网站提取的元素 | 映射为图表中的角色 |
|---|
| 图表背景纸色 |
| 主文字颜色 | 图内主要文字色 |
| 次要/说明文字色 | 辅助说明色 |
| 品牌主色（CTA/链接） | 强调色（accent） |
| 标题字体 |
| 节点名称字体 |
| 技术标签字体 |
更贴心的是，它会自动做WCAG AA对比度检查。如果你的品牌色在图表尺寸下对比度不够，它会主动建议调整值并解释原因。
整个过程大约60秒，之后所有新生成的图表都自动使用你的品牌风格。
🔹 2.3 draw.io / Mermaid导入重绘
如果你手头已经有draw.io或Mermaid格式的图表，这个插件可以直接读取并重绘。
/diagram-design:import platform.drawio --size=slide-16x9 --detail=simplified --audience=executive
一条命令，它会把你的draw.io文件按照指定尺寸、细节级别和目标受众重新绘制。而且它输出忠诚度账本——哪些节点被合并了、哪些被删除了、哪些保留了，清清楚楚。
比如一个12节点的draw.io文件，导入后输出8个绘制节点，其中2个决策节点被折叠为边标签，1个便签因无连接被丢弃——你会精确知道发生了什么变化。
| 旋钮 | 选项 | 控制什么 |
|---|
| 格式 | HTML / SVG / PNG / HTML+PNG | 交付物形态 |
| 尺寸 | doc-inline / slide-16x9 / social-og 等9种 | 视口大小 + 字体字号 |
| 细节 | faithful(≤24节点) / balanced(≤12) / simplified(≤7) | 内容保留程度 |
| 受众 | engineer / mixed / executive | 文案措辞深度 |
同一个数据源，针对工程师输出"Auth Service / JWT · RS256 · :8443"，针对管理层输出"Sign-in"——自动适配受众理解水平。
v2.3版本新增了语义系统模式和可选的可访问动画。动画模式有四种：none（静态）、reveal（渐显）、step（逐步）、loop（循环），且完全遵循prefers-reduced-motion规范——需要减少动画的用户看到的是完整静态帧。
每张图的SVG都自带ARIA标签和title/desc描述，屏幕阅读器可以正确朗读图表内容。
这个项目的架构设计同样值得学习。它采用了渐进式加载策略——Agent启动时只看到技能名称和描述，当用户提出具体需求时，才按需加载对应的参考文件。
| 你说了什么 | Agent实际加载的文件 |
|---|
| "画个流程图" | SKILL.md + type-flowchart.md |
| "画架构图" | SKILL.md + type-architecture.md |
| "对比两个策略有什么区别" | SKILL.md + semantic-patterns.md + type-flowchart.md |
| "给那个图加上动画" | 已有选择 + animation.md |
| "适配我的网站品牌色" | SKILL.md + onboarding.md + style-guide.md |
不管总共支持多少种图型，Agent每次请求只读取它真正需要的那一份参考文档。这意味着即使项目扩展到50种图型，单次调用的上下文窗口也不会爆炸。
这种设计对Agent开发者很有启发：把大而全的能力拆成小而专的模块，用语义路由决定加载策略，既保证了功能的丰富性，又控制了Token消耗。
项目的设计系统只有一句话概括：每个节点都必须有存在的理由。
具体规则：只用一个强调色，每张图只突出1-2个焦点元素；三种字体族（Instrument Serif用于标题、Geist Sans用于节点名、Geist Mono用于技术标签）；1px细线边框，无阴影，最大圆角10px；所有坐标和间距都是4的整数倍——作者认为这是"让图表不像AI生成物"的关键。
默认配色方案也很讲究：白烟纸色背景、墨黑文字、原子橘强调色、蓝灰辅助色、银色发丝线。这种低饱和+单点强调的配色方案，既保证了可读性，又避免了AI生成内容常见的"彩虹色灾难"。
# 添加插件市场
/plugin marketplace add cathrynlavery/diagram-design
# 安装插件
/plugin install diagram-design@diagram-design
# 开启自动更新（只需一次）
/plugin → Marketplaces → diagram-design → Enable auto-update
用户：onboard diagram-design to https://your-site.com
Agent：→ 抓取首页 → 提取配色和字体 → 生成diff预览
用户：yes, apply it
→ 写入 style-guide.md，所有后续图表自动匹配
"帮我画一个架构图：前端用React，后端用FastAPI，数据库用PostgreSQL，缓存用Redis"
"画一个泳道图，展示用户注册流程：用户→前端→API→数据库→邮件服务"
"做一个象限图，按影响力vs工作量排列我们Q3的项目"
Agent会自动选择最合适的图型，加载对应参考文件，生成一张自包含的HTML。双击浏览器打开就能看到效果。
/diagram-design:export my-diagram.html --svg-only # SVG → Figma
/diagram-design:export my-diagram.html --png-only --scale=3 # 高清PNG → PPT
| 维度 | diagram-design | Mermaid | draw.io | Figma |
|---|
| 上手速度 | 自然语言描述即可 | 需学语法 | 手动拖拽 | 手动设计 |
| 输出质量 | 编辑级，品牌匹配 | 通用，偏简陋 | 取决于手动调整 | 取决于设计能力 |
| AI集成 | 原生Agent技能 | 间接 | 无 | 无 |
| 格式灵活 | HTML/SVG/PNG | SVG/PNG | XML/SVG | 专有 |
| 品牌一致性 | 60秒自动匹配 | 不支持 | 手动调 | 手动调 |
| 成本 | 免费开源 | 免费 | 免费 | 付费 |
| 图型数量 | 27种 | 约10种 | 无限（手动） | 无限（手动） |
核心差异： Mermaid解决的是"能用"，diagram-design解决的是"好看且专业"。draw.io和Figma功能强大但需要大量手动操作——而diagram-design的核心价值在于让AI直接产出达到编辑发布标准的图表，省去中间的人工调整环节。
另外还有一个容易被忽略的维度：协作效率。传统流程中，开发者画完图要交给设计师润色，设计师改完再返给开发者确认，来回至少两三轮。diagram-design直接把这条链路砍掉了——开发者用自然语言描述需求，Agent直接输出编辑级图表，设计师只需要做最终审核。从三天缩短到三小时，这就是工具的力量。
技术博主和写作者： 写技术文章、做教程时需要配架构图、流程图，不想每次都在Figma里手动调。尤其适合那些更新频率高、配图需求大的创作者，一篇博文可能需要3-5张不同类型的图表，手动画根本不现实。
产品经理和架构师： 需要快速产出专业级别的系统图、数据流图，用于汇报或文档。以前做竞品分析要用Excel画象限图，现在直接一句话搞定，而且配色和排版直接可以放进汇报材料。
AI Agent开发者： 正在构建AI编程工作流，希望Agent能自主产出高质量可视化内容。这个项目的渐进式加载架构和语义路由设计，本身就是很好的Agent Skill开发范例。
前端开发者和全栈工程师： 日常需要画各种技术方案图、API时序图、数据模型图。有了这个插件，描述需求就能出图，而且导出的SVG可以直接嵌入前端项目。
独立开发者和创业者： 没有设计师团队，但又需要专业级别的文档和展示材料。diagram-design相当于一个免费的"AI设计师"，让你的产品文档和投资BP看起来更专业。
• GitHub Stars： 17,000+（据趋势平台trendshift.io统计）
• 日增Star： 单日最高增长3,646星（GitHub日榜第一）
• 图标库： 55个单色IT/云图标（Tabler Icons MIT + Simple Icons CC0）
• 兼容Agent： Claude Code、Codex、Pi
• 最新版本： v2.3.2（2026年8月13日发布，新增语义模式+动画支持）
这个项目之所以能火，本质上是因为它解决了一个被长期忽视的问题：AI编程Agent的"最后一公里"可视化。
我们一直在提升AI的代码能力、推理能力、记忆能力，但输出的可视化内容却长期停留在"能用但丑"的阶段。diagram-design证明了：只要给Agent一套好的设计系统和语义路由规则，它完全可以产出编辑级的图表。
而且它的设计哲学很克制——不追求花哨的特效，不做多余的装饰，每个节点都必须有存在的理由，强调色只留给1-2个最重要的元素。这种"少即是多"的思路，恰恰是AI生成内容最需要的约束。
更值得关注的是这个项目的工程化思维。从CI流水线来看，它不仅验证代码正确性，还验证几何精度（标签不遮挡节点）、语义路由正确性、文档同步性、甚至对抗性测试（确保动画控制器不被篡改）。这种严谨的工程标准，在开源插件中非常罕见。
如果你也在用AI编程Agent画图，强烈建议试试这个项目。 它可能不会改变你的工作方式，但一定会让你下次跟设计师同事交差时少挨一顿骂。
你平时用AI画图遇到过哪些尴尬时刻？ 评论区聊聊，也欢迎分享你觉得好用的AI图表工具。觉得这篇有用的话，记得点赞+在看，我们下期见 👋
夜雨聆风