Diagram Design Skill：让 AI 图表告别”通用丑”的 27 种类型设计系统

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

Diagram Design Skill：让 AI 生成的图表告别”通用丑”

一款开源的 Agent 多图表生成 Skill，支持 27 种图表类型、自动识别并匹配你的品牌色和字体、还能把 draw.io 和 Mermaid 文件一键重绘为精致的设计稿。GitHub 已有 8.1k stars，是近期 SkillHub.club 新晋热门项目。

功能与原则

Diagram Design Skill 解决的是一个具体痛点：当你需要一张架构图或流程图时，AI 通常返回的是千篇一律的圆角矩形框——毫无品牌感，更谈不上设计质量。

它的核心能力：

  • 27 种图表类型：架构图、流程图、时序图、ER 图、甘特图、雷达图、旭日图、泳道图等，覆盖技术文档、产品 PPT、社交媒体配图各类场景
  • 品牌自动匹配：输入你的网站 URL，Skill 自动提取主色调、字体栈并映射到语义化设计 token（paper / ink / accent / muted），60 秒完成品牌化
  • draw.io / Mermaid 导入重绘：已有图表文件？交给 Skill 自动 redraw，保留结构关系，换上你的品牌皮肤，同时可调节详细程度、受众层级和输出格式
  • 渐进式加载：SKILL.md 只含索引，类型参考文件按需加载，保证 Agent 上下文精简、响应快
  • 无外部依赖：输出为纯 HTML + 内联 SVG，无需构建步骤、无 JS、无外部图片

设计原则：最精简表达、一个 accent 色、1–2 个焦点节点、4px 基准网格、不用阴影。编辑级质量，不是”能用就行”。

认可度

  • GitHub stars：8.1k（截至 2026-08-12）
  • Forks：530
  • SkillHub.club 评级：S-rank（9.0 分），归属于 design 分类，2026-08-11 新加入目录
  • 最新提交：2026-08-12（6 小时前），持续活跃维护
  • 支持 Claude Code、Codex、Pi（Claude Cowork）三大 Agent 平台

链接

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

原作者

Cathryn Lavery（@cathrynlavery），独立开发者、创作者，创立 BestSelf.co，同时在 littlemight.com 撰写关于 AI、创业和产品设计的博客。她将自己在内容创作中对视觉设计的高标准，带入了这个 Skill 的每一个细节里。

介绍

大多数图表 Skill 能做一件事（画一个流程图），而 Diagram Design 能做 27 件事，并且在每一件事上都做到可直接放进产品文档或演讲稿的成品级别。

核心突破在于品牌匹配机制：当你告诉 Agent “onboard diagram-design to https://yoursite.com”，它会自动抓取页面背景色、主文字色、品牌主色、h1 字体和正文字体，然后将它们映射为语义化 token（paper / ink / accent / muted / title / node-name / sublabel）。后续所有图表自动使用你的品牌配色，不再是千篇一律的蓝紫色块。

另一个差异化能力是draw.io / Mermaid 导入重绘。很多团队已有大量 draw.io 或 Mermaid 语法写的旧图表，导入后 Skill 会解析结构、优化节点数量（通过固定降级阶梯：装饰元素→重复节点→叶簇→基础设施）、选择合适的详细程度（faithful ≤24 节点 / balanced ≤12 / simplified ≤7），最终输出为你的品牌风格。

输出格式支持 HTML / SVG / PNG / HTML+PNG 四种，尺寸预设涵盖 doc-inline、doc-wide、slide-16×9、slide-4×3、social-og、social-square、print-a4-landscape 等，图表会自动调整 viewBox 和字号以适配目标场景。

特点

  • 27 种图表类型，覆盖技术文档、产品设计、演示、社交媒体全场景
  • 品牌自动识别：输入 URL，自动提取并应用你的配色和字体，60 秒完成 onboarding
  • draw.io / Mermaid 导入重绘：保留结构关系，换上品牌皮肤，支持 detail / size / audience 三个维度调节
  • WCAG AA 对比度自动检查：品牌颜色若在 9–12px 字号下对比度不足，Skill 会主动提出调整建议
  • 无障碍设计：每个 SVG 输出带 role="img"、可解析的 aria-labelledby、<title> 和 <desc> 槽位
  • 渐进式加载：37 个参考文件按需加载，Agent 上下文始终精简
  • 全平台覆盖：Claude Code、Codex、Pi（Claude Cowork）均可安装使用
  • 导出灵活：SVG 内嵌 Google Fonts 可独立运行，PNG 通过 Playwright 渲染，支持 --scale=3 高清导出

使用方法

安装（Codex）：

npx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design

安装（Claude Code）：

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

安装（Pi）：

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

品牌化配置（首次使用）：

You: "onboard diagram-design to https://yoursite.com"
Agent: → fetches the homepage → extracts palette + font stack → 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."

draw.io 导入重绘：

/diagram-design:import platform.drawio --size=slide-16x9 --detail=simplified --audience=executive

导出 PNG / SVG：

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

使用场景与人群

适用场景：

  • 技术文档撰写（架构图、ER 图、流程图、时序图）
  • 产品 PPT / 演讲稿配图
  • 团队内部知识库图表更新
  • 社交媒体配图（OG 图片、流程说明图）
  • 将历史 draw.io / Mermaid 图表统一迁移到品牌设计系统

目标用户：

  • 开发者 / 技术写作者：需要快速出技术图，不擅长设计
  • 产品经理：做演示或 PRD 时需要高质量图表
  • AI Agent 重度用户：希望在 Claude Code / Codex 工作流中直接出成品级图表
  • 独立开发者 / 小团队：没有设计师但需要专业级配图

输入与输出案例

案例 1：架构图生成

输入：

"Make me an architecture diagram for a microservices app: API Gateway, Auth Service, User Service, Order Service, Postgres DB, Redis cache."

输出（核心结构）：

生成一个 architecture.html，包含：Web/Mobile → API Gateway → Auth Service / User Service / Order Service → Postgres / Redis，用 4px 网格对齐、Instrument Serif 标题字体、Geist Sans 节点名、Geist Mono 技术子标签，一个 atomic-tangerine accent 色标注核心服务，WCAG AA 对比度合规，可直接嵌入文档或导出 PNG 使用。

案例 2：draw.io 导入重绘

输入：

/diagram-design:import legacy-architecture.drawio --size=slide-16x9 --detail=balanced --audience=executive

输出：

Fidelity ledger 报告：

Detail: balanced · 12 source nodes → 8 drawn
Collapsed: "Token valid?" decision → edge label on Gateway → Auth
Dropped: 1 sticky note ("legacy path, to be retired") — unconnected in source
Kept in full: the request path (Web/Mobile → Gateway → Orders → Postgres)

生成一个 16:9 幻灯片尺寸、面向高管受众的重绘版本，配色和字体已替换为 onboarded 品牌配置。

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 12 阅读