diagram-design

diagram-design 是什么

diagram-design 是专为 AI 编程助手设计的编辑级图表生成 Skill，支持 Claude Code、Codex、Factory Droid、Pi 等主流编码 Agent。只需用自然语言描述需求，Agent 即可生成 39 种专业级图表，输出为自包含的 HTML + SVG 文件，无阴影、无 Mermaid 垃圾感，语义化描述与布局分离，匹配你的品牌配色只需 60 秒。

核心能力

39 种视觉类型：涵盖架构图、流程图、序列图、状态机、ER 图、时间轴、泳道图、甘特图、桑基图、鱼骨图、Wardley 图、看板、用户旅程图、部署图、依赖图、UML 类图、故事地图、数据库 Schema 等，覆盖技术写作、架构设计、流程梳理各类场景。

品牌级输出质量：由专业编辑设计师操刀设计，每种类型提供三种静态变体：简约亮色、简约暗色、全编辑风格。无需 Figma，无需 30 分钟选颜色，60 秒内读取你的网站配色并自动套用。

静态优先，可选动态：默认输出纯静态 HTML，无需构建步骤、无 JavaScript、无外部图片依赖。可选有限动效用于有序讲解，静态始终是默认输出。

多格式互转：支持将 draw.io、Excalidraw、Mermaid 源文件重新绘制为选定格式、尺寸和细节级别的输出，一张图说清楚绝不冗余。

语义化模式设计：行为描述与布局逻辑分离，同一语义模式（如队列、策略跟踪、信任边界）可以选择最合适的现有类型，无需增加类型计数。

安装配置

方式一：通过 skills.sh 安装（推荐） npx skills add cathrynlavery/diagram-design -g

方式二：通过 Claude Code 插件安装 claude plugins install cathrynlavery/diagram-design

方式三：手动复制 Skill 文件 git clone https://github.com/cathrynlavery/diagram-design 将 skills/diagram-design 目录下的内容放入项目 .skills/ 目录

使用步骤

第一步：触发 Skill 在 Claude Code、Codex 或兼容 Agent 中，用自然语言描述你需要的图表类型，例如：「为一个微服务系统画一个包含 API 网关、认证服务和三个业务服务的架构图」

第二步：指定视觉风格 告诉 Agent 你偏好的风格：「使用简约暗色风格，主色调用你的网站蓝色」

第三步：审查生成结果 Agent 会输出自包含 HTML 文件，直接在浏览器打开查看。如需调整，可继续对话修改：「把数据库改成 PostgreSQL 图标，并添加缓存层」

第四步：导出为所需格式 静态截图直接全屏截图；如需矢量格式，可要求 Agent 导出 SVG；如需演示动画效果，可开启有限动效模式。

第五步：嵌入文档或幻灯片 生成的 HTML 文件为自包含，可直接嵌入内部 wiki、Markdown 文档或网页，无需担心外部资源失效。

适用场景

技术文档编写：系统架构图、API 序列图、数据模型 ER 图，让文档从文字堆砌升级为可视化沟通。

架构评审准备：在代码评审前用部署图和依赖图展示系统全貌，帮助团队快速对齐认知。

流程梳理与分享：业务流程、泳道图、用户旅程图，用于产品需求沟通和跨团队对齐。

PPT 和幻灯片制作：架构图、流程图直接插入幻灯片，无需设计师介入。

适用人群

后端工程师、前端全栈工程师、技术负责人（TL/Architect）、技术写作者、产品经理（需要画系统草图）、任何需要用图表表达技术架构的开发者。

工作原理

diagram-design 本身是一个结构化的 prompt 模板库，定义了 39 种视觉类型的语义规范和布局规则。Agent 接收用户的自然语言描述后，将需求映射到最接近的视觉类型，填充对应的结构化参数（节点、连接线、标签、样式），最终渲染为自包含 HTML + SVG。布局逻辑与视觉样式分离，同一类型可套用多种视觉预设，保证输出的一致性和品牌融合度。

官方链接

GitHub：https://github.com/cathrynlavery/diagram-design 安装页面：https://skills.sh/cathrynlavery/diagram-design 趋势追踪：https://trendshift.io/repositories/26141