写技术文章、做产品方案，常常会卡在同一个地方：文字已经讲清楚了，配图却迟迟做不出来。
让 AI 画张架构图，它倒是很快。几个方框、几根箭头，再给每个模块涂一种颜色。信息都有，可放进正文，总觉得哪里不对劲。
今天分享的 Diagram Design，就是来解决这个问题的。
它是一套面向 AI 编程助手的开源图表设计 Skill，可以接入 Claude Code、Codex、Pi 等工具，让 AI 按统一的设计规范生成图表。
先看一张项目里的架构图示例。
好看的关键，是让重点有地方站
这张图的特点很直观：背景安静，连线清楚，橙色只留给主要节点和关键路径。
Diagram Design 把这种处理方式写成了规则，包括网格对齐、文字层级、留白、连线路径，以及重点颜色该出现在哪里。
它还会约束图表的信息量。常规图默认以九个节点、十二条箭头作为复杂度上限，内容太多时，优先拆成概览和细节。
这对 AI 很有用：少一点自由发挥，多一点明确取舍。
毕竟，读者打开一张图，首先需要知道该看哪里，然后才是顺着关系理解内容。
架构、流程、计划，都有对应画法
项目已经提供了丰富的图表类型和示例，不需要每次从空白画布开始琢磨。
| 想讲清楚的事情 |
可以选择的图表 |
| 系统由哪些部分组成 |
架构图、分层图、部署图 |
| 一个任务怎样流转 |
流程图、泳道图、时序图 |
| 项目如何安排推进 |
时间线、甘特图、看板 |
| 哪些事情更值得做 |
象限图、雷达图 |
| 一个过程如何持续改进 |
循环图、飞轮图 |
| 数据之间有什么关系 |
ER 图、数据库结构图 |
同一种图还提供浅色、深色和带标题、说明卡片的完整排版版本，方便适配文档和演示场景。
下面这张循环图就很典型：外圈表示各个阶段，中间是共享记忆，虚线说明各阶段向中心写回信息。
如果用来解释“收集反馈、分析问题、执行改进、再次验证”，这种画法比一长串步骤更容易让人看出循环关系。
已经画好的旧图，也能重新整理
很多人的问题并不是没图，而是手里有一张信息齐全、版式却很拥挤的旧图。
Diagram Design 支持读取 draw.io、Mermaid 和 Excalidraw 的源文件，再按照自己的设计体系重绘。
这里最实用的，是可以同时指定输出格式、画布尺寸、细节程度和读者类型。
同一张系统图，给工程师看，可以保留更多组件关系；放进管理层汇报，就压缩细节，换成更容易理解的名称；插入文章时，则调整为适合正文阅读的尺寸。
重绘后，还会列出哪些内容被合并、折叠或删除，方便核对。涉及重要流程时，这份变更记录很有必要。
让图表跟着你的品牌走
写系列文章最怕的，是每篇配图都像来自不同地方：这一张蓝紫渐变，下一张又变成卡通风。
Diagram Design 可以读取网站或本地设计文件，提取背景色、文字色、强调色和字体，形成统一样式。
你确认后，后续图表就能沿用这套配置。服务多个项目时，还可以保存不同的品牌档案，按项目切换。
对于持续更新的技术博客、产品文档和课程资料，风格能够复用，比单张图惊艳更有价值。
安装之后，直接把需求说清楚
以 Claude Code 为例，可以通过插件市场安装：
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design
然后用自然语言描述任务，例如：
用 diagram-design 画一张中文架构图，包含用户、前端、API 服务、数据库和缓存。突出 API 服务，使用浅色风格，适合放进技术文章，输出 HTML。
比起只说“帮我画好看点”，明确内容、重点和用途，更容易得到符合预期的结果。
默认产物是包含 SVG 的 HTML 文件，可以直接在浏览器打开。需要放进公众号或幻灯片时，再导出 PNG；需要继续编辑矢量内容，则可以导出 SVG。
PNG 导出需要 Playwright 和 Chromium 环境；常规导出只包含图表本体，完整页面的标题、说明卡片需要另外截图保留。
适合经常需要“把事情画清楚”的人
Diagram Design 采用 MIT 协议开源，主要依靠支持 Skill 的 AI 助手完成生成，使用助手产生的订阅或调用费用仍需另外考虑。
它尤其适合经常写技术文章、整理产品方案、制作课程讲义的人。你负责提供准确的信息和关系，让 AI 按规范处理图形表达，再检查文字、箭头和删减是否正确。
当配色、字体和布局都有了可复用的规则，下一次需要配图时，就可以把更多精力放在一个更重要的问题上：这张图，究竟要让读者明白什么？
项目地址：
https://github.com/cathrynlavery/diagram-design
若还想看更多开发者分享的开源工具和图表设计经验，可以到云栈社区的技术文档板块逛一逛。
发表于 4 天前
|
查看: 1|
回复: 0
