diagram-design：开源 Agent Skill，一句话生成符合你品牌风格的编辑级图表
摘要
diagram-design 是 Cathryn Lavery 开源的 Agent Skill，能让 Claude Code、Codex、Cursor、GitHub Copilot 等编程助手用一句大白话画出架构图、流程图、时序图、象限图等 45 种图表，输出为单个自包含的 HTML + SVG 文件，并可自动匹配你网站的配色与字体。
本文目录
它解决什么问题
写技术文档、做方案汇报时，经常需要一张清楚的架构图或流程图。让 AI来画，得到的多半是样式粗糙的 Mermaid图，或者带着阴影、配色随意的“AI味”插图，放进正式文档里总显得不够专业。
另一方面，专门的绘图软件又要一个框一个框地拖拽对齐，改一次结构就得重排一次，而且很难保证每张图都和自己公司的品牌配色、字体统一。
diagram-design是 Cathryn Lavery开源的一个 Agent Skill，口号是“设计师不会嫌弃的编辑级图表”。它让编程助手用一句大白话，画出风格克制、统一且符合你品牌的图表。
它面向的是一个常被忽视的环节：图表本身的设计质量。好的图表不仅要信息正确，还要层次分明、重点突出、风格统一。diagram-design把这些设计经验沉淀进 Skill，让智能体在画图时遵循一套编辑设计的规范，而不是随意堆砌方框和箭头。对于需要经常出图、却没有设计师随时协助的人来说，这相当于多了一位懂排版的帮手。
图片来源：GitHub 项目仓库
它能做什么
你只需要用自然语言描述需求，比如“给我的应用画一张架构图：前端、后端、数据库、Redis缓存”，或“做一个按影响力和投入划分 Q2项目的象限图”。智能体会自己挑选合适的图表类型，先说明打算怎么画，再输出一个双击就能在浏览器里打开的 HTML文件。
它的主要能力包括：
- 45种图表类型：架构图、流程图、时序图、状态机、ER数据模型、时间线、泳道图、象限图、雷达图、树状图、组织架构图、韦恩图、桑基图、鱼骨图、甘特图、看板、用户旅程图、部署图、依赖图、UML类图等，每种都有浅色极简、深色极简和完整编辑版三种样式。
- 单文件输出：每张图都是自包含的 HTML + SVG，不需要构建步骤，也不依赖 JavaScript或外部图片。
- 匹配品牌风格：告诉它你的网站地址，它会提取网站的主色和字体，映射成背景、文字、强调色等角色，经你确认后，此后每张图都用你的品牌风格。
- 多品牌档案：可以把不同客户的品牌保存为独立档案，在不同项目里分别使用。
- 导入与导出：支持从 draw.io、Mermaid、Excalidraw导入，也能导出为 PNG或 SVG。
图片来源：GitHub 项目仓库
品牌匹配完成后，它还会给出一份“还原度清单”，列出采样的网址、具体的颜色角色、字体家族与字重以及字体来源，说明哪些地方使用了替代方案，让你清楚知道图表与自己品牌的吻合程度。公开可用的网站字体会被直接采用，并在渲染后进行核实，而不是悄悄换成通用的系统字体。
有什么好处
更专业的观感：默认采用黑色加橘色点缀的编辑风格，不加阴影、克制留白，直接截图就能用。
自动把关可读性：写入配色前会按 WCAG AA标准检查文字与背景的对比度，不达标时会建议调整后的颜色并说明原因。
无障碍友好：每张图的 SVG都带有可访问的名称和描述，方便读屏软件识别。
不会悄悄用默认样式：在新项目第一次使用时，如果品牌样式还没设置，它会先停下来询问你是否要做品牌匹配。
可离线、可修改：可以选择系统字体，让文件完全不发出网络请求；样式参数集中在一个风格指南文件里，手动调整也很方便。
图片来源：GitHub 项目仓库
适合谁
- 经常写技术文档、架构方案的工程师和技术负责人。
- 需要做汇报图表的产品经理、咨询顾问和创业者。
- 希望图表与品牌视觉统一的设计师和内容团队。
- 使用 Claude Code、Codex、Cursor、GitHub Copilot等 AI编程工具的用户。
项目采用 MIT许可证。安装方法和各平台的使用说明，请以官方 GitHub仓库和官网为准。