Diagram Design 编辑级图表设计
面向 Claude Code、Codex、Cursor 等 AI 编程助手的 Agent Skill，用自然语言即可生成 45 种编辑级图表，输出为单文件 HTML + SVG，无阴影、无 Mermaid 风格，并支持品牌配色与导入导出。
过去 7 天收获 54 颗 Star
爱鲜报评分
0 人评分
63k
星数
否
中文
HTML
主语言
是
活跃
65
贡献者
人工分析
EDITORIAL推荐理由
它把「画架构图」变成一句自然语言指令，AI 直接产出可双击打开的自包含 HTML 文件，省去手工排版。45 种图表类型覆盖架构、时序、象限、流程图等常见需求，还能抓取站点配色与字体保持品牌一致。对经常写技术文档、做方案汇报的开发者来说，是提升交付质感的实用工具。
适用场景
- 技术方案与架构文档配图
- 产品汇报中的象限图、流程图
- 为博客或 README 生成示意图
- 从 draw.io、Mermaid、Excalidraw 迁移旧图
- 统一团队图表视觉风格与品牌配色
优点
- 自然语言驱动，AI 自动选型并生成单文件 HTML
- 45 种图表类型，覆盖架构、时序、象限等常见场景
- 输出自包含 HTML + SVG，双击即可查看，便于分享
- 支持品牌配色与字体接入，视觉风格统一
- 兼容 Claude Code、Codex、Cursor、Copilot 等主流 Agent 宿主
缺点
- 依赖支持 Agent Skills 的 AI 编程工具，纯手工使用门槛较高
- 生成质量受模型能力与提示词影响，复杂图仍需迭代
- 导入导出与命令面板功能在不同宿主间存在差异
- 默认风格偏编辑排版，未必适合所有企业模板
项目简介
Diagram Design 是一个面向 AI 编程助手的 Agent Skill，让你用一句自然语言就能得到一张「编辑级」图表。它支持 Claude Code、Codex、GitHub Copilot、Cursor、Factory Droid、Qoder、Pi 等多种宿主，内置 45 种图表类型，输出为单文件 HTML + SVG，无阴影、无 Mermaid 风格。
它能做什么
向助手描述需求即可，例如：
- 「给我的应用画一张架构图：前端、后端、数据库、Redis 缓存」
- 「做一个象限图，展示 Q2 项目按影响力与投入排序」
- 「画一个 Bearer 调用的时序图，包含 401 时的 token 刷新」
助手会自动选择图表类型、说明绘制计划，并写出一个可双击打开的 .html 文件。
安装方式
通用 Agent Skills 宿主（Cursor、Claude Code、Codex、Qoder、Copilot、Gemini CLI、Cline、Windsurf、Amp 等）可通过 skills CLI 安装：
npx skills add cathrynlavery/diagram-design
Claude Code 用户还可以通过插件市场获得更新与斜杠命令：
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design
Codex、Copilot、Factory Droid、Qoder 等宿主也各有对应的插件安装命令，详见仓库 README。
品牌一致性
项目支持「Onboarding」流程：把 Diagram Design 接入你的站点后，它会抓取站点的配色与字体，之后生成的每张图都会与你的品牌视觉保持一致。
导入与导出
- 导入：支持从 draw.io、Mermaid、Excalidraw 迁移已有图表。
- 导出：可导出为 PNG 或 SVG，方便嵌入文档与演示。
适用人群
适合需要频繁产出技术架构图、流程图、象限图的技术写作者、架构师和产品经理，尤其适合已经在使用 AI 编程助手的团队。
评论
- 暂无评论，来写第一条吧。