Diagram Design Skill：告别AI图表套路，60秒生成品牌级专业可视化

Skill超级捕获手 技术创作者 2026-08-27 15 阅读

AI 图表生成最让人头疼的，不是”画不出来”，而是”画出来一眼假”——圆角方框、紫色填充、Drop shadows、Mermaid 默认样式，妥妥的 AI 感。diagram-design 就是来解决这个问题的：它是一个给 Claude Code / Codex / Factory Droid / Pi 用的 Agent Skill，能生成与你的品牌视觉完全一致的专业编辑级图表，39 种类型，自包含 HTML+SVG，零构建步骤，零外部依赖。2026 年 8 月 12 日单日暴涨 2,951 颗星，冲上 GitHub AI Trending #1，当周累计 +14,735 星——设计师出身的作者用它做出了工程师做不出来的东西。

功能与原则

diagram-design 的核心使命是”让 AI 生成的图表看起来像人做的”。它遵循三条设计原则：无阴影、无 Mermaid 套路——README 原文写着 “no shadows, no Mermaid slop”；语义与布局分离——同一个流程图类型可以表达队列、策略追踪或信任边界，无需扩充类型数量；按需加载——即使扩展到 39 种类型，Agent 也只在需要时才读取对应类型文件，不污染上下文。

认可度

  • GitHub Star：27.4k（截至 2026-08-27）
  • 当周新增：+14,735 stars（2026-08-11 ~ 08-16）
  • GitHub Trending：2026-08-12 登顶 AI 分类 #1
  • 单日新增：2,951 stars（2026-08-12）
  • GitHub Forks：1.7k
  • 最新 Commit：2026-08-25（2 天前）
  • SkillsMP 安装量：2.7k+

链接

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

原作者

Cathryn Lavery（GitHub @cathrynlavery），BestSelf.co 创始人，职业身份是设计师而非工程师。她在 README 里解释动机时说：”So I built a Claude Code skill for it.”——做这个工具的出发点，就是她受不了 AI 生成的图表看起来都是一个样子。这种设计师视角反而成了最大差异化：审美在线，不是工程师审美。

介绍

diagram-design 是一个 Skill 包，安装到你的编码 Agent 后，直接用自然语言描述需求，Agent 就会为你挑选最合适的图表类型，生成自包含的 HTML+SVG 文件。内置 39 种视觉类型，覆盖架构图、流程图、时序图、状态机、ER 图、甘特图、象限图、雷达图、组织图、散点图、桑基图、鱼骨图、wardley 图等，还能导入并重绘 draw.io 和 Mermaid 源文件。

最有意思的功能是品牌匹配 onboarding：运行 /diagram-design:onboard https://yoursite.com，Agent 会抓取你的网站首页，提取主色调、字体栈，映射到语义角色（背景色、主文字色、强调色、链接色），生成 tokens 写入本地配置。之后所有图表自动套用你的品牌配色，整个过程约 60 秒。

输出形式是双击即可在浏览器打开的 .html 文件，内嵌 SVG，无 JavaScript、无外部图片依赖，可直接插入文档或幻灯片。另有可选的运动动画模式（accessibility 友好），用于有序步骤的动态演示。

特点

  • 39 种图表类型：架构、流程、时序、状态机、ER、泳道、象限、雷达、甘特、散点、桑基、鱼骨、Wardley、用户旅程、数据库 Schema、UML 类图等
  • 三种风格变体：minimal light / minimal dark / full-editorial，开箱即用
  • 品牌自动匹配：抓网站提取配色和字体，60 秒完成风格配置，带 WCAG AA 对比度检查
  • 导入重绘：支持 draw.io（.drawio）和 Mermaid（.mmd / .md）源文件导入，按指定尺寸、格式、详细度重绘
  • 四档调节旋钮：格式（html/svg/png）× 尺寸（文档/幻灯片/社交图）× 详细度（忠实/平衡/精简）× 受众（工程师/混合/高管）
  • 导出灵活：天然是 HTML，可通过 /export-diagram 命令导出 PNG 或 SVG，适配 Figma、幻灯片、社交卡片等场景
  • 多平台支持：Claude Code、OpenAI Codex、Factory Droid、Pi 全覆盖

使用方法

安装（Claude Code）：

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

安装（Codex）：

codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design

安装（Pi）：

pi install https://github.com/cathrynlavery/diagram-design

品牌匹配（首次）：

You: "onboard diagram-design to https://yoursite.com"
Agent: → fetches homepage → extracts palette + font stack → maps to semantic roles → shows proposed diff
You: "yes, apply it"

快速生成图表（自然语言）：

"Make me an architecture diagram of my app: frontend, backend, database, Redis cache."
"I need a quadrant showing Q2 projects by impact vs effort."
"Give me a sequence of a bearer call with token refresh on 401."

导入 Mermaid 源文件：

/diagram-design:import-mermaid architecture.mmd --size=slide-16x9 --detail=simplified

导出为 PNG：

/export-diagram path/to/diagram.html --png-only --scale=3

使用场景与人群

适用场景：
– 技术文档中的架构图、流程图、时序图自动生成
– 方案汇报、产品演示的材料视觉美化
– 团队内部知识库的图表标准化
– 将 draw.io 或 Mermaid 格式的旧图表迁移到品牌化版本

目标用户：
– 经常写技术文档、方案文档的开发者与技术写作者
– 需要统一品牌视觉的内容团队
– 用 Claude Code / Codex / Pi 等编码 Agent 的设计师或产品经理
– 希望图表”看起来不像 AI 生成的”的所有人

输入与输出案例

案例一：架构图

输入（自然语言）：
"Make me an architecture diagram: frontend (React), backend (Node.js), PostgreSQL database, Redis cache, Nginx load balancer."

输出：
一个 arch*.html 文件，minimal dark 风格，SVG 矢量，自包含，无外部依赖。

案例二：品牌化重绘 Mermaid

输入：
/diagram-design:import-mermaid README.md --diagram=all

输出：
将 README 中的所有 Mermaid 代码块重绘为 3 种风格（minimal light / minimal dark / full-editorial），
每个输出独立 HTML 文件，配色可自定义，WCAG AA 对比度检查通过。

diagram-design 的爆火印证了一件事：Agent 时代不缺生成能力，缺的是”生成出来像样”的审美把控。一个设计师背景的作者，用”不想让图表看起来像 AI 做的”这个朴素的执念，做出了一个让工程师们排队打星的 Skill——这件事本身就挺有戏剧性的。

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 15 阅读