diagram-design Skill：让 AI 图表从「机器味」变「编辑级」的视觉神器

diagram-design Skill：让 AI 图表从「机器味」变「编辑级」的视觉神器

一句话总结

diagram-design 是一个给 Claude Code / Codex / Pi 使用的 Agent Skill，内置 39 种编辑级图表类型，输出自包含 HTML+SVG，无需 Figma、无 Mermaid 廉价感，60 秒读网站自动适配品牌配色——2026 年 8 月 13 日空降 GitHub Trending 第一，单日暴涨 +4,475 星。

核心功能与设计原则

这个 Skill 解决的是一个具体又普遍的痛点：让 AI 画图，出来的永远是圆角矩形 + 箭头的「机器味」通用图，设计师看了直摇头。

diagram-design 把「图的语义」与「布局」分开处理：同一个 queue（队列）语义，根据场景可以套进流程图、状态机或时序图，不需要为每种组合单独造模板。39 种图表类型涵盖架构图、流程图、时序图、状态机、飞轮（Flywheel）、Sankey、鱼骨图、Wardley 图、甘特图、雷达图、UML 类图、数据库 Schema 等。

设计原则三条：无阴影、无 Mermaid-slop、强调色只给读者最该先看的 1-2 个节点。目标密度 4/10——「最高质量的动作通常是删除」。

认可度

• GitHub Star：截至 2026-08-22 约 25,200 ★（全球排名 #1587），8 月 10–16 日单周新增约 15,600 星
• GitHub Trending：2026-08-13 空降第一，8 月 12 日单日 +4,475 星，为当周全球增幅最大开源项目
• 传播路径：GitHub Trending → V2EX / 掘金 / 今日头条 → 微信技术圈刷屏，多个科技号自发解读

链接

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

原作者

cathrynlavery（真实姓名 Cathryn Lavery），独立开发者，运营 littlemight.com 技术博客，业余经营 BestSelf.co。其技术写作风格以「具体场景 + 可操作方案」著称，在开发者社区有稳定受众。

项目介绍

diagram-design 最早只有 27 种图表类型，2026 年 8 月快速迭代至 39 种（含 2.5.10 版本新增的 Sankey、鱼骨、Wardley Map、看板、用户旅程、部署图、依赖图、UML 类图、故事图、数据库 Schema 十种）。

核心工作流：用户用自然语言描述需求 → Claude 自动选择最合适的图表类型 → 匹配品牌色和字体（60 秒内通过读取网站 HTML 提取）→ 输出自包含 HTML+SVG 文件，双击浏览器直接打开，离线运行，无构建步骤。

三种输出风格：极简浅色（minimal light）、极简深色（minimal dark）、完整编辑版（full editorial）。静态为默认输出，可选无障碍动效用于顺序解说场景。还支持把已有的 draw.io 或 Mermaid 图表源码「重绘」成任意风格/尺寸/细节级别。

特点

• 39 种图表类型，覆盖架构、流程、时序、数据、地理、组织等场景，持续扩充
• 语义与布局解耦：同一语义类型可根据上下文套用不同图表，无需新增模板
• 品牌色自动提取：输入网站 URL，60 秒内将所有图表配色映射为你的品牌色和字体
• 零依赖自包含：输出为单 HTML 文件，无阴影、无渐变、无 Mermaid 廉价感，浏览器直开
• 多客户端兼容：Claude Code 官方市场直接安装，同时支持 Codex、Factory Droid、Pi 等 Agent

使用方法

安装（Claude Code 场景）：

直接去 GitHub 仓库页面，Clone 或下载 SKILL.md，放入项目的 .claude/skills/ 目录，
或通过 Claude Code 插件市场搜索 "diagram-design" 一键安装。

基础调用示例：

# 描述需求
用户：画一个用户注册流程的架构图

# Claude 自动：
1. 识别为「流程图 + 架构图」类型
2. 调用 diagram-design skill 渲染
3. 输出 HTML 文件（包含 SVG），双击即可预览

品牌适配：

用户：onboard diagram-design to https://your-site.com
# Claude 读取网站，提取品牌色、字体，60 秒内重渲染所有图表

使用场景与目标人群

适用场景：技术文档撰写、产品说明编写、系统架构可视化、流程文档、会议演示材料、工程博客配图。

目标用户：使用 Claude Code / Codex 等 AI 编程助手的开发者、技术写作者、架构师，以及需要快速出图但不想打开 Figma 的团队。

输入与输出案例

案例 1：架构图

输入（用户）：
"画一个微服务架构图，包含 API Gateway、Auth Service、User Service、Order Service 和 PostgreSQL、Redis 两个基础设施"

输出：
一个 HTML 文件，内含 SVG 架构图：
- 各服务用矩形节点，带品牌色边框
- 数据库用圆柱体图标
- 箭头标注数据流向
- 强调色只标注 Auth Service（安全关键节点）

案例 2：重绘已有 Mermaid 图

输入（用户）：
"把以下 Mermaid 代码重绘成 editorial 风格，适配我的网站配色 https://mybrand.com"

输入（Mermaid 源码）：
sequenceDiagram
    A->>B: Request
    B-->>A: Response

输出：
一个 minimal dark 风格 HTML，字体/配色已替换为 mybrand.com 的品牌配置

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