Diagram Design：按品牌风格制作图解

关于这个 Skill

Diagram Design 为 AI Agent 提供统一设计系统，以及图形选择和布局参考。描述内容与使用场景后，Agent 生成包含内联 SVG 的 HTML。官方文档介绍了 45 种图形类型，提供浅色、深色和编辑式版面，也支持可选动效。整体设计强调少量重点色、清晰文字和聚焦主题的图解。

为什么推荐

适合博客、演示稿和产品说明中需要统一视觉风格的图解。项目把布局规则、品牌配置与导入导出流程放在同一个 Skill 中。本页收录 Cathryn Lavery 的原始仓库，封面动画来自作者的官方演示。

适合用来做什么

• 说明应用的组件关系、部署结构或数据流。
• 为文章或演示稿准备流程图、时序图、优先级矩阵与数据图表。
• 把已有 Mermaid、draw.io 或 Excalidraw 源文件重绘成统一品牌风格。
• 通过保存品牌配置，复用不同客户的配色与字体。

输出格式与视觉风格

主要交付物是包含内联 SVG 的 HTML 文件。作者另提供 SVG 提取与 PNG 渲染流程。架构图、流程图、时序图、时间轴、组织结构图和数据图表共用字体与颜色角色。

控制图中关系的复杂度，让读者容易理解。密集系统可拆成总览图和局部详情图。SVG 与 PNG 导出包含图形本身，不包含外层编辑式标题和卡片。

官方仓库与安装指南Diagram Design Skill 说明官方 SVG 与 PNG 导出指南

安装作者的原始 Skill

跨 Agent 安装器会识别 skills/diagram-design/SKILL.md，并把配套参考文档、资源和脚本安装到所选工具的目录。支持原生插件市场的工具，也可按作者对应的市场说明安装，以获得插件命令与更新能力。

官方仓库与安装指南

制作第一张图解

1. 给 Agent 一个具体任务

   例如：为一个包含前端、API、Postgres 数据库和 Redis 缓存的 Web 应用制作架构图。补充读者对象，以及用于文档还是幻灯片。

2. 选择品牌配置

   首次使用时，Skill 会询问是匹配网站、使用提供的设计参数、加载已保存配置，还是保留默认风格。网站配置流程会提出颜色和字体供确认。

3. 检查方案并打开结果

   Agent 选择图形类型和尺寸后生成 HTML。在浏览器中打开，检查标签、连线、间距和可读性，再发布或导出。

官方仓库与安装指南Diagram Design Skill 说明

重绘已有图解源文件

向 Agent 提供 draw.io 源文件、Mermaid 文件或 Markdown 代码块，或者 Excalidraw 场景。它保留有意义的组件与关系，重新设计布局。可指定目标尺寸、细节等级和读者对象；导入流程会说明合并或省略的内容。

Excalidraw 导入需要 .excalidraw 或 .excalidraw.json 场景数据，而非导出的 PNG 或 SVG。重绘结果是源内容的新呈现方式，不是可无损写回原画布格式的编辑器。

官方仓库与安装指南

按任务选择工作方式

输出是可通过 Agent 修改或直接编辑代码的 HTML 与 SVG。Diagram Design 不提供拖拽式图形编辑器。如果图解经常在 Git 仓库中变更且需要检查文本差异，可同时维护 Mermaid 源文件与用于发布的视觉版本。

作者文档与封面演示用于说明项目提供的流程。本次 SkillHey 收录不代表已独立测试所有 Agent、图形类型或导出路径。

官方仓库与安装指南

使用前需要了解

• 使用支持 Agent Skills 且能够读写本地文件的 Agent。通用安装命令使用 npx，原生插件安装方式因工具而异。
• 静态 HTML 图解可直接在浏览器打开，无需构建应用。默认字体从 Google Fonts 加载；需要离线使用时，可要求改用系统字体。
• 官方 PNG 导出流程需要 Python、Playwright 和 Chromium。仅导出 SVG 时不需要栅格化。
• Skill 采用 MIT 许可证，可免费安装。所选 Agent 或模型服务可能收取使用费；生成后仍需检查布局和内容准确性。

支持的 Agent