Diagram Design Skill：让 AI 生成专业编辑级图表的 SKILL.md

Skill超级捕获手 技术创作者 2026-09-10 83 阅读

Diagram Design Skill：让 AI 生成专业编辑级图表的 SKILL.md

AI 生成的图表有个通病：圆角盒子和霓虹紫背景一个样，每个节点等宽，箭头标签直接压在连线上——一看就是机器画的，但又说不出哪一步画错了。cathrynlavery/diagram-design 的解决思路是：与其塞一个渲染引擎，不如把排版规则写成可执行的规范，让模型自己掌握编辑级图表的全部决策权。

功能与原则

diagram-design 是一个纯 SKILL.md 的 AI Agent 技能包，专为 Claude Code、Codex、Pi 等兼容 Agent Skills 的宿主设计，输出物为自包含的 HTML + SVG 文件，无需构建步骤、无外部图片依赖。核心原则是”语义与布局分离”：每种图型有独立的布局规范文档，描述的是行为模式而非具体尺寸——队列、策略追踪、信任边界都可以复用同一种布局而不必新增图型类别。

认可度

  • GitHub Star：截至 2026-09-09，约 34,912 ★（4,635 颗本周新增），社区高度活跃
  • fork 数：2,207 个，说明大量开发者正在基于它二创或定制
  • 分类排名：GitHub claude-code 主题下 Top 42、agent-skills 主题下 Top 16、diagrams 主题下 Top 6
  • 话题热度：2026 年 9 月多次登上 GitHub Trending，并引发技术博客深度解析（Hacker News、稀土掘金周报均有收录）
  • 持续更新：创建于 2026-04-16，距今约 4 个月，仍保持每日 commit 节奏

链接

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

原作者

@cathrynlavery（GitHub username: cathrynlavery），独立开发者，同时运营 littlemight.com 博客与 BestSelf.co 品牌，专注于内容创作与 AI 辅助写作工具。

介绍

diagram-design 的核心洞察是：Graphviz 和 Mermaid 的自动布局算法本身就会带出渲染器的”气质”——固定间距、固定路由、固定节点样式。要去掉这种廉价感，就必须去掉渲染器。

整个项目由三部分构成：

  • SKILL.md（538 行 / 33KB）：设计系统，包含复杂度预算、五条连接线强制规则、20 项输出前检查清单
  • references/type-*.md × 39：每种图型的专属布局规范，包含反模式、示例与可接受变体
  • Python 工具（约 4,600 行）：仅用于解析他人图表（Mermaid / draw.io 导入）和检查输出（lint），实际坐标计算完全交由模型完成

这意味着所有几何决策——节点位置、连接线走向、间距计算——全部由 AI 模型自主完成，SKILL.md 负责提供精确到像素级和语法细节的设计规则，而非硬编码的布局引擎。

特点

  • 39 种编辑级图型：覆盖 Architecture、IT current-state、Flywheel / Loop、Sankey、Fishbone、Wardley Map、Kanban、User Journey、Deployment、Dependency Graph、UML Class、Story Map、Database Schema 等
  • 三种视觉风格：minimal light、minimal dark、full-editorial，每种图型均提供三种变体，可直接在浏览器打开
  • 五条不可协商的连接线规则：圆角右角弯头（r=8）、箭头标签距连线 6-10px、禁止重叠或共享路径、同一边缘多条连线需 ≥12px 间隔、连接线禁止穿过非终点节点（唯一例外需虚线标注）
  • 20 项输出前检查清单：涵盖颜色色板合规性、字体白名单（禁止 JetBrains Mono 全局滥用）、SVG 无障碍规范等
  • 导入重绘：支持将 draw.io、Mermaid 或 Excalidraw 源文件导入并以更高编辑质量重新渲染为目标格式
  • 可选动效：默认静态输出，可选择开启有序解释类动效

使用方法

安装（Claude Code）：

claude plugins install cathrynlavery-diagram-design

或会话内：

/plugin install cathrynlavery-diagram-design

安装（Codex / 其他兼容 Agent）：

npx skills@latest add cathrynlavery/diagram-design

基本调用：安装后在 Agent 会话中直接描述所需图表类型与内容，例如：

“帮我生成一张微服务架构图，包含 API Gateway、Auth Service、User Service、Order Service 和它们之间的调用关系”

Agent 会根据 SKILL.md 中的布局规范生成自包含 HTML 文件，可直接拖入浏览器预览或嵌入文档。

使用场景与人群

  • 内容创作者与博主：需要架构图、流程图但不想花 30 分钟折腾 Figma
  • AI 编程助手用户：Claude Code / Codex / Pi 用户需要在对话中快速生成专业配图
  • 技术文档作者：需要内嵌图表的 README、API 文档、架构设计文档
  • 演讲 PPT 制作：输出 HTML 可导出为静态图片插入幻灯片
  • UI/UX 设计师：作为 AI 辅助设计的初稿生成工具，再在设计工具中精细调整

输入与输出案例

案例 1：架构图

Input：

生成一个电商微服务架构图，包含前端、Nginx 负载均衡、三台后端实例、Redis 缓存、PostgreSQL 主从库，以及前端到后端、HTTPS 到 Nginx 的两条入口箭头

Output：

自包含 HTML + SVG 文件，minimal dark 风格，所有节点根据语义层级分配视觉权重，主色调用于突出”PostgreSQL 主库”这一关键节点，连接线遵循正交路由规范

案例 2：重绘 Mermaid 源

Input：

将以下 Mermaid 源代码重绘为 diagram-design 风格的架构图：[粘贴 Mermaid 代码]

Output：

Agent 调用 mermaid_extract.py 解析结构，参照 references/type-architecture.md 重新计算布局，输出不含 Mermaid 渲染器痕迹的 HTML 图表

diagram-design 真正值得关注的创新不是”又一个图表工具”，而是它对”AI 能做什么不能做什么”的精准切分：机器能检查的（颜色合规、无障碍标签、字体白名单），机器严格检查；机器算不了的（节点几何位置、连接线走向），交给模型判断，SKILL.md 只负责告诉模型”什么算对、什么算错”。这是目前见过的最干净的可执行设计规范格式。

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 83 阅读