GitHub 趋势 · 第 8 期
Mermaid 翻车现场？38+ 型编辑级图表一键替掉
#GitHub趋势#AI智能体#图表设计
我的判断：diagram-design 是目前把「AI 生成的图」从「能看懂」拉到「能直接进 PPT / 发公众号」最省事的方案之一——前提是你在用 Claude Code、Codex 或 Pi 这类客户端。它不跟 Mermaid 拼语法，而是直接产出自包含 HTML+SVG，样式可控、导出即用。
上期（第 4 期）我们聊过 archify 用自包含 HTML 做架构 / 流程图还能带动效；这期同赛道的 diagram-design 走另一条路——更偏「编辑设计感」、覆盖近 40 种类型，并且原生接入 Claude Code、Codex、Pi、Factory Droid、Kiro、OpenCode、Cursor、Cline 等一众 AI 客户端。
痛点：写技术文档时，Mermaid 画出来的图要么丑、要么语法一改就崩；让 AI 直接吐 SVG/HTML 又常常样式失控。架构图、时序图、ER 图想放进周报或公众号，最后往往还得手动在画图工具里重画一遍。
它到底是什么
cathrynlavery/diagram-design 是一个面向 AI 编码客户端的图表技能 / 插件包。它提供 38+ 种编辑型图表（README 当前版本已扩到 39 种），全部是自包含 HTML+SVG：没有构建步骤、没有外部图片依赖、没有阴影，并且明确拒绝「Mermaid slop」。换句话说，它把「画图」变成 AI 客户端里的一个技能——你说一句话，它就产出一张能直接用的图。
核心能力
覆盖的类型相当全，下面是几个代表（每种都提供 minimal light / minimal dark / full-editorial 三种风格变体）：
| 类型 | 用途 |
|---|---|
| Architecture | 组件 + 连接关系 |
| Sequence | 随时间推进的消息流 |
| Flowchart | 决策逻辑 |
| ER / Data model | 实体 + 字段 |
| State machine | 状态 + 转移 |
| Swimlane | 跨职能流程 |
| Gantt | 任务 + 时间相位 |
| Sankey | 分流 / 合流的量化流转 |
| Wardley map | 价值链 × 演进 |
| Database schema | 物理表 + 列 + 外键 |
除此之外，它还支持：
- ▪从 draw.io（.drawio）或 Mermaid 导入，重绘成编辑级样式；
- ▪导出 PNG / SVG（可指定 --scale、--svg-only 等参数）；
- ▪可 onboarding 成你自己的品牌配色，统一全团队出图风格；
- ▪自带 /import-mermaid、/export-diagram、/profile、/doctor 等提示词模板。
上手：几条命令的事
以 Claude Code 为例，README 原命令如下：
/plugin marketplace add cathrynlavery/diagram-design /plugin install diagram-design@diagram-design
装完记得开一次自动更新（第三方 marketplace 默认关）：进 /plugin → Marketplaces → diagram-design → Enable auto-update，再 /reload-plugins。Codex、Pi、Factory Droid、Kiro 的安装命令 README 也都给了，例如 Pi：
pi install https://github.com/cathrynlavery/diagram-design
本地想直接看全部 39 种图样，克隆后打开画廊：
open skills/diagram-design/assets/index.html # macOS cp skills/diagram-design/assets/template.html my-diagram.html
我的判断：适合谁 / 不适合谁 / 坑
适合：用 Claude Code / Codex / Pi 写文档、做技术分享、需要统一品牌配色的人；想把架构图、时序图、ER 图直接发周报或公众号的人。
不适合：只想在浏览器里临时画一张图、不想装插件的人——它本质是技能包，不是在线画板。
几个坑：
- ▪第三方 marketplace 默认关闭自动更新，要手动开启，否则收不到新图类型；
- ▪受管安装会在包更新时覆盖 references/style-guide.md 的自定义，要改样式请走 editable install（clone + symlink）；
- ▪Pi 没有自动刷新，拉更新要手动 pi update --extensions；
- ▪它是技能包不是可视化编辑器，复杂定制需要改模板 HTML。
仓库地址：https://github.com/cathrynlavery/diagram-design
总 Star：约 36.3k（今日 +2,286，数据来自 GitHub Trending 快照）
许可证：MIT
抓取时间：2026-09-10
你平时画架构图 / 时序图用什么？Mermaid、draw.io，还是直接让 AI 出图？评论区聊聊，下期想看哪个项目也可以点名。
下期预告
本周榜上 ChromeDevTools/chrome-devtools-mcp（给编码智能体用的 Chrome DevTools，周增 3,615）和 TauricResearch/TradingAgents（多智能体金融交易框架）都很热，下期二选一，先到评论区投票。
#GitHub趋势#AI智能体#图表设计