diagram-design Skill：一套让 AI 图表彻底告别「Mermaid 味」的编辑级视觉技能

diagram-design Skill：一套让 AI 图表彻底告别「Mermaid 味」的编辑级视觉技能

总结

diagram-design 是近期 GitHub 最炙手可热的新晋 Skill 之一——它把 39 种「编辑级」（editorial-grade）图表做成了自包含的 HTML + SVG 模板，打包成 Claude Code / Codex / Pi 可直接调用的 Skill。核心解决的是一个被压抑已久的需求：AI 生成的图表为什么一看就知道是 AI 画的？答案藏在一条「除得尽 4」的规则里——所有坐标、宽度、间距必须能被 4 整除，这让图表瞬间有了节奏感，彻底告别 AI 生成内容那种散乱随机的观感。单日最高新增 2,951 stars，曾登 GitHub 全语言 Trending 榜首，是当前图表类 Skill 中增速最快的项目。

功能与原则

diagram-design 的核心定位是「让 AI 生成专业级图表」，而非「让 AI 生成能看的图表」。它为 Claude Code 等 Agent 提供了一套完整的设计系统——39 种视觉类型，覆盖架构图、流程图、时序图、象限、甘特图、数据流、循环图、因果图、Wardley 图、甘特图、用户旅程图、部署图、依赖图、UML 类图、故事地图、数据库 Schema 等。每种类型同时提供三种样式变体：极简浅色、极简深色、完整编辑级。用户只需给 Agent 一个主题，Skill 自动完成排版、配色、字体匹配，品牌适配只需 60 秒读取目标网站。

设计原则高度具体：
– 所有坐标、宽度、间距必须能被 4 整除（这是 AI 图表「不像 AI 画」的核心规则）
– 强调色最多用 1–2 处，给读者明确焦点，而非均匀上色
– 目标信息密度 4/10（高品质动作通常是删除）
– 1 像素细边框，完全不用阴影，圆角上限 10 像素
– 三种字体各司其职：衬线体用于标题、无衬线体用于节点名称、等宽字体仅用于技术性标签

认可度

GitHub Star：约 25,200（截至 2026-08-22，star-history.com 实时追踪数据）
本周新增：约 1,500+ stars（持续增长中）
许可协议：MIT
创建时间：2026 年 4 月，至今仅 4 个月
Trending 履历：曾登 GitHub 全语言 Trending 榜首；2026-08-13 单日 +2,855 stars，为当日全球最大涨幅
特色：支持 draw.io / Mermaid 源文件自动重绘为编辑级输出

链接

GitHub：https://github.com/cathrynlavery/diagram-design

原作者

Cathryn Lavery（GitHub: @cathrynlavery），独立开发者，运营个人博客 littlemight.com 及自我管理工具 BestSelf.co。她在博客中记录了这个 Skill 的诞生动机：「每次需要图表时，要么花 30 分钟在 Figma 里折腾，要么直接放弃——diagram-design 就是为了让 AI 直接产出我真正愿意放在网站上的图」。

介绍

diagram-design 最初是 Cathryn 在日常写作和技术文档工作中遭遇的真实挫败：让 Claude 生成一张架构图，得到的永远是「圆角方框加箭头」——那种一看就知道是 AI 生的廉价感。她没有选择忍受或放弃，而是花了大量时间提炼了一套视觉设计规则，把它们转写成 Claude Code 可执行的 Skill 指令。

整个项目最反直觉的设计是「无渲染器」：4,671 行 Python 代码只做两件事——解析他人图表（导入）和检查输出（校验），而真正负责排版的全部交给模型本身。这种设计是有意的：Mermaid 和 Graphviz 因为内置自动布局，它们的输出永远带着「渲染器的口音」——固定的间距、固定的路由、固定的节点样式。要摆脱 AI 生成感，就必须摆脱渲染器。代价是每次几何计算都要模型自己完成，但结果是一张真正属于「你的设计」的图。

v2.0 引入了 Loop（飞轮图），v2.3 加入语义系统模式和可选可访问动画，v2.5.10 新增 10 种布局语法（Sankey、鱼骨图、Wardley 图、Kanban、用户旅程、部署图、依赖图、UML 类图、故事地图、数据库 Schema），当前版本共 39 种图表类型。

特点

• 39 种图表类型，覆盖技术文档全场景：从架构图到数据库 Schema，从用户旅程到 Wardley 图，一个 Skill 全搞定
• 自包含 HTML + SVG，零外部依赖：不引入 shadows，不依赖 CDN，任何渲染 HTML 的环境都能用，无需构建步骤
• 品牌级配色自动匹配：读取目标网站配色和字体，60 秒完成品牌适配，产出与网站视觉风格一致的图表
• draw.io / Mermaid 源文件重绘：已有 draw.io 或 Mermaid 图表？丢给 Skill，自动转换为编辑级输出，保持原始内容但升级视觉
• 除得尽 4 规则 + WCAG AA 对比度检查：内置可访问性保障，产出的图表在视觉上经过设计系统校验，非随机生成
• 三样式变体一键切换：极简浅色 / 极简深色 / 完整编辑级，按输出场景自由选择

使用方法

安装步骤（30 秒上手）：

npx skills@latest add cathrynlavery/diagram-design

或通过 Claude Code 插件市场 / .claude-plugin / .codex-plugin / Pi 包安装。

基本调用：在 Claude Code 中直接描述需求即可，例如：

生成一张微服务架构图，包含 API Gateway、Auth Service、Order Service，使用浅色极简样式

Skill 会自动执行设计系统规则，输出可直接在浏览器打开的 HTML 文件。

也可以重绘已有 Mermaid 图表：

python3 mermaid_extract.py < source.mmd > digest.json
# 将 digest 交给 Claude Code 结合 Skill 生成编辑级版本

使用场景与人群

适用场景：
– 技术博客、方案汇报、产品文档的架构图 / 流程图 / 时序图
– 团队需要统一品牌视觉的技术材料
– 需要在文档中插入图表但不想开 Figma 的开发者
– 希望 AI 生成可交付级别视觉内容的 Agent 用户

目标用户：
– 经常制作技术图表的开发者与技术写作者
– 需要统一品牌视觉的内容团队
– 使用 Claude Code / Codex / Pi 且希望 AI 产出专业级视觉内容的 Agent 用户

输入与输出案例

案例一：
输入：「为我们的 React 前端架构生成一张组件层级图，包含状态层、视图层、API 层，用深色极简样式」
输出：一张自包含 HTML 文件，深色背景、三层节点清晰分层、连接线间距全部为 4 的倍数、强调色仅用于状态层节点，可直接在浏览器打开或嵌入文档。

案例二：
输入：「将以下 Mermaid 流程图重绘为编辑级 SVG：」+ Mermaid 源码
输出：同内容、同节点，但排版升级——坐标对齐、字体匹配、间距规则化，原本散乱的 AI 生成感消失，变成一张专业级的信息图。

作者：Skill超级捕获手

GitHub: https://github.com/cathrynlavery/diagram-design