Diagram Design：有证据的视觉解释
如何选择 Diagram Design、文本渲染器、画布编辑器或交互视图
根据源内容保真、编辑方式和读者意图选择图解流程，不依赖审美口号或没有证据的产品排名。
你将学会
- 先确定谁管理什么产物
- 重绘以布局保真换取解释空间
- 让交互服务学习目标
开始前需要
- 了解 HTML 与 SVG 基础
- 区分系统关系与视觉布局
选择有用的表达方式，说明简化理由，并在实际覆盖范围内解释检查结果。
先看结论
- 按编辑、审阅和交付责任选型。
- 重绘不是保持像素不变的转换。
- 输入语法与输出视觉类型是不同列表。
先确定谁管理什么产物
当团队希望用可审阅的标记和图片交付有依据的解释时，智能体技能很有用。需要多人直接移动对象时，协作画布满足的是另一种需求。如果源语言和确定性渲染行为是流程核心，文本渲染器又提供不同的取舍。
这些是工作方式分类，不是对具体产品的基准排名。应问谁编辑源内容、谁批准简化、如何追踪修改，以及最终读者拿到什么。如果团队需要可编辑语义源或多年后可复现的导出，单凭一张漂亮截图还不足以做决定。
重绘以布局保真换取解释空间
项目的导入设计有意丢弃源样式和渲染器排列，同时保留有意义的关系。这可能改善编辑表达，但不是逐像素转换。如果原始坐标或精确外观是交付要求，开始前就应确认是否允许使用重绘流程，而不是产出后再争论为何变了样。
支持的 Mermaid 语法也不包括所有特性和图种。输出类型中有 Sankey，不代表提取器接受 Mermaid Sankey 源码。评估已有图解集合时，必须把输出类型目录与输入解析支持表分开看，避免依据相同名字推断兼容性。
让交互服务学习目标
静态视图适合读者自行检查的稳定关系。项目受限的有序动画可以承担特定解释任务。实时数据探索、任意筛选或可导航三维模型，则需要单独设计界面，不能假定所有交互都该塞进一个可分享的图解文件。
可以选一组有代表性的材料：一个层次结构、一次有序消息交换、一个拥挤的导入源。让审阅者先预测关系，再读解释，记录误解和修改投入。本系列没有做竞品实验或读者研究；这里提供的是待执行的评估方法。
实施步骤
- 1
明确源内容和交付文件的管理方式。
- 2
用真实案例核对输入语法支持。
- 3
决定不可放弃的保真和交互要求。
- 4
通过代表性任务与读者验收条件评估。
可复制示例
{
"选型问题": [
"必须保留源坐标吗？",
"谁审阅简化？",
"需要支持哪些输入语法？",
"读者需要实时交互吗？"
],
"已执行竞品基准": false
}常见问题
支持某种视觉类型就意味着支持对应 Mermaid 语法吗？
不是。输出布局和导入语法是不同约定，必须核对提取器明确支持的类型。
自定义交互只是另一个动画选项吗？
在检查到的固定控制器约定下不是。自定义交互应用需要自己的设计、实现与安全审查。
资料来源
- skills/diagram-design/references/import-mermaid.md来源核查 2026-09-08
- skills/diagram-design/references/output-spec.md来源核查 2026-09-08
- README.md来源核查 2026-09-08