星标数：66852★ Fork数：4453 《diagram-design：面向 AI 编程代理的编辑风格图表生成技能》
diagram-design 是一个 Agent Skill，能让你的 AI 代理用自然语言生成图表，输出为一个自包含的 HTML + SVG 文件，并且符合你的品牌风格。README 的口号是：50 种图表类型、没有阴影、没有 Mermaid 那种粗糙输出——也就是设计师不会嫌弃的编辑风格图表。
使用时只需用平实的话向代理提出需求，比如”给我画一张我应用的架构图：前端、后端、数据库、Redis 缓存”、”我需要一个按影响力和投入度划分 Q2 项目的四象限图”、”给出一个带 401 时令牌刷新的 bearer 调用时序图”，代理会自行选择图表类型、说明计划，并写出一个双击即可打开的 .html 文件。
它还支持品牌接入：运行 Onboard diagram-design to https://yoursite.com 会抓取你网站的配色和字体，让之后生成的每张图都与你的站点保持一致。该技能适用于所有能读取 Agent Skills 的宿主，包括 Claude Code、Codex、GitHub Copilot、Cursor、Factory Droid、Qoder、Pi、Gemini CLI、Cline、Windsurf 和 Amp。
主要特点
- 50 种图表类型，覆盖架构图、四象限、时序图等常见需求
- 输出为单个自包含的 HTML + SVG 文件，双击即可在浏览器打开
- 编辑风格设计：无阴影，避免 Mermaid 式的粗糙渲染
- 可接入你的品牌配色与字体，使所有图表风格统一
- 支持从 draw.io、Mermaid、Excalidraw 或 PlantUML 导入，也支持导出为 PNG 和 SVG
- 跨代理通用，一条命令即可安装到多种 Agent Skills 宿主
安装
npx skills add cathrynlavery/diagram-design在 Claude Code 中，也可以通过插件市场安装，以获得更新和斜杠命令：
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design官方构建只来自本仓库。README 提醒：以其他名称发布的插件目录列表均为非官方副本；隐私说明见 PRIVACY.md，其中列出了该技能会通过网络发送的数据。
📊 本项目 GitHub 星标数：66852。最后更新：2026-11-12，发布：2026-04-16（创建）。项目地址：https://github.com/cathrynlavery/diagram-design
