Diagram Design：有证据的视觉解释
Diagram Design 入门：先确定读者、尺寸与保真范围，再开始画图
把模糊的架构图请求变成明确的输出简报，并留下哪些内容保留、哪些内容简化的审阅记录。
你将学会
- 先写解释目标，再提出绘图请求
- 简化必须有可解释的边界
- 检查第一份静态结果
开始前需要
- 了解 HTML 与 SVG 基础
- 区分系统关系与视觉布局
选择有用的表达方式，说明简化理由，并在实际覆盖范围内解释检查结果。
先看结论
- 分别选择格式、尺寸、细节和读者。
- 复杂度限制是上限，不是内容目标。
- 有意义的简化必须留下记录。
先写解释目标，再提出绘图请求
先用一句具体的话限定任务，例如解释订单请求如何到达持久化存储。列出项目确实提供的组件与关系，不要因为队列、缓存或安全网关看起来专业，就擅自添加这些组件。无法确认的组件职责，应保留为待确认信息，而不是用流畅的标签掩盖。
绘制前分别确定格式、尺寸、细节和读者。技术读者不必对应更拥挤的画布，更大的画布也不能保证投影时小字可读。输出规范将尺寸预设与字体层级关联，因此完成布局后仅缩放图片，并不等于完成了使用场景适配。
简化必须有可解释的边界
文档中的 balanced 级别最多 12 个节点、16 条边，simplified 最多七个节点、九条边。faithful 允许最多 24 个节点、32 条边，并附带分区条件。这些是上限，不是必须填满的配额；六个组件就能讲清的故事，不应硬凑成十二个。
当源内容超过有用的复杂度预算，只在理由明确时合并，并保留简化记录。说明哪些重复项合并、哪些分组折叠、哪些有意义的信息被省略。拆成总览和细节图，通常比不断缩小所有标签直到勉强塞下，更能保留知识价值。
检查第一份静态结果
先要求静态产物，再检查入口到结果的路径。箭头方向是否明确，关系容易歧义时是否有标签，强调色是否突出关键决定，图注是否说明限制？这些都是面向读者的检查，不会因为提示词写得足够长就自动得到保证。
下面的简报是编辑示例，不是所有宿主都能识别的解析器配置。本次没有安装宿主插件。获准安装后，应使用仓库针对宿主的流程，检查实际输出，并把源简报与文件一起保存，让后续修改仍能解释为什么这样画。
实施步骤
- 1
写出一个学习问题和已确认的关系。
- 2
明确交付位置与读者。
- 3
设置细节预算并记录计划删减。
- 4
渲染后检查读者能否顺着图理解故事。
可复制示例
{
"编辑简报示例": {
"问题": "订单如何进入存储？",
"format": "html",
"size": "doc-inline",
"detail": "balanced",
"audience": "mixed",
"已知路径": ["客户端", "网关", "订单服务", "数据库"]
},
"已执行宿主命令": false
}常见问题
balanced 是否总要包含十二个节点？
不是。十二是文档规定的上限，只应使用解释所选问题需要的组件。
把文档图片放大就能用于幻灯片吗？
幻灯片还需要适合的字号、密度和观看距离检查，仅放大图片不能证明可读性。
资料来源
- skills/diagram-design/references/output-spec.md来源核查 2026-09-08
- README.md来源核查 2026-09-08