Diagram Design Skill 技能

核心能力

38 种专业图示类型

涵盖技术文档中最常用的可视化类型，包括：架构图（Architecture）、流程图（Flowchart）、Sankey 图、鱼骨图（Fishbone/Ishikawa）、Wardley 地图、看板（Kanban）、用户旅程图（User Journey）、部署图（Deployment）、依赖图（Dependency Graph）、UML 类图、故事图（Story Map）、数据库 Schema 图等。所有类型均经过排版优化，适配技术写作场景。

三种视觉风格一键切换

每种图示类型均提供三种静态变体：Minimal Light（简约亮色）、Minimal Dark（简约暗色）和 Full Editorial（编辑级全彩）。用户无需修改内容，只需切换样式参数即可获得完全不同的视觉呈现效果，满足不同文档风格的需求。

语义化设计模式

Diagram Design 将图示的「语义描述」与「布局算法」分离。语义模式单独描述行为逻辑，布局算法负责空间排列。这意味着同一个语义模式可以在不同布局类型中复用——例如队列（Queue）、策略跟踪（Policy Trace）或信任边界（Trust Boundary）场景，都可以复用最近似的已有类型，而无需扩展类型数量。

draw.io / Mermaid 源文件转换

支持将现有的 draw.io 或 Mermaid 源文件导入，按指定的格式、尺寸和细节级别重新渲染输出。这意味着团队积累的现有图表资产可以无缝迁移到 Diagram Design 的编辑级质量体系中，无需从头重绘。

品牌颜色自动匹配

技能可以读取目标网站的 CSS 样式，自动提取品牌主色并应用于图表配色方案，确保生成的图示与产品文档视觉风格高度一致，无需手动调色。

可选无障碍动画

静态 HTML 为默认输出模式；对于需要动态演示的场景，可开启可选的无障碍动画效果，用于有序解说和演示讲解。动画遵循无障碍设计规范，不依赖 JavaScript 交互。

安装配置

方式一：Claude Code Skill 安装（推荐）

claude code skills install diagram-design

方式二：手动克隆仓库

git clone https://github.com/cathrynlavery/diagram-design.git cd diagram-design

方式三：NPM 包引入

npm install diagram-design-skill

使用步骤

第一步：选择图示类型

根据文档需求，从 38 种图示类型中选择最适合的可视化形式。每种类型均有独立示例页面，可直接在浏览器中预览效果。

第二步：描述图示内容

向 AI 编程助手描述需要呈现的内容结构。技能会自动匹配最佳图示类型并生成对应布局。

第三步：选择视觉风格

指定三种风格之一：Minimal Light / Minimal Dark / Full Editorial。

第四步：导出与嵌入

生成的图示为自包含 HTML + SVG 文件，可直接嵌入文档、博客或幻灯片。

适用场景

• 技术架构文档：架构图、部署图、服务依赖图，告别通用圆角框
• 产品需求文档：用户旅程图、流程图、看板，辅助需求梳理与团队沟通
• AI 智能体开发：为 Agent 工作流输出可视化流程说明，提升可解释性
• 技术博客与教程：高质量图示提升文章专业感，增强读者理解效率

适用人群

• 后端与架构工程师（需要专业架构图和部署图）
• AI 应用开发者（为 AI 编程助手提供高质量图示输出）
• 技术写作者与文档工程师（追求编辑级文档视觉品质）
• 产品经理与设计师（快速生成流程图和用户旅程图）

工作原理

Diagram Design 的核心是一套基于语义模式的图示生成系统。用户输入结构化描述后，系统将语义层与布局算法解耦，生成自包含 HTML + SVG 文件。整个过程无需 JavaScript 运行时、无外部图片依赖。

官方链接

• GitHub 仓库：https://github.com/cathrynlavery/diagram-design
• 在线图示画廊：https://cathrynlavery.github.io/diagram-design/