Diagram Design：有证据的视觉解释
Diagram Design 学习实验室设想：把检查结果与渲染图并排解释
设计一个尚未实现的本地教学界面，直观看到绘制顺序与检查覆盖范围，而不是把设想写成已有功能。
你将学会
- 让检查器的模型看得见
- 静态分析与浏览器观察必须分开
- 只在能解释关系时增加交互
开始前需要
- 了解 HTML 与 SVG 基础
- 区分系统关系与视觉布局
选择有用的表达方式，说明简化理由，并在实际覆盖范围内解释检查结果。
先看结论
- 显示检查器识别了什么，不只显示通过或失败。
- 用与渲染结果的差异解释模型局限。
- 预览界面需要独立的执行和无障碍设计。
让检查器的模型看得见
一种有用的扩展，是把模拟 SVG 标记、检查器识别出的矩形和浏览器预览并排显示。选中被报告的遮罩时，高亮源码位置、尺寸以及后绘节点。读者便能直接理解为何绘制顺序改变结果，而不必从一行报错中自行推导全部几何关系。
先使用本次案例中的成对输入：先绘与后绘节点、重叠一个与两个单位、宽度 200 与 201。揭晓结果前让学习者预测。这是教学界面设想，不是现有 Diagram Design 命令，也不是已经测得的学习效果提升。
静态分析与浏览器观察必须分开
界面应明确显示矩形何时因属性顺序或引号形式而未被识别，也应区分原始坐标判断与受变换、填充影响的浏览器预览。两者不同，是有价值的教学材料，不应为了让检查器看起来无所不能而把差异隐藏。
初期只使用模拟案例。渲染任意导入 HTML 会引入新的执行边界，未来实现接受真实文件前，需要隔离和清晰资源策略。如果源码查看器默默加载用户脚本或远程字体，就会显著改变原项目预期的风险范围。
只在能解释关系时增加交互
可用键盘操作的二维界面就能直接说明矩形重叠与绘制顺序。Three.js 会增加相机和渲染问题，却不会自动改善这节课。若未来确实涉及空间结构，应先定义学习任务，再与更简单的表达比较，最后决定是否使用三维引擎。
下一步可以交付有版本标记的案例探索器，为每个结果提供可访问的文字说明，再开展读者预测任务。本系列目前交付的是原创静态配图和可复现检查实验，没有实现交互应用、浏览器沙箱、自动修复系统或学习者实验。
实施步骤
- 1
选择预期结果不同的成对模拟案例。
- 2
明确显示识别几何与源码顺序。
- 3
接受任意文件前先设计隔离渲染。
- 4
先验证读者能否预测结果，再增加图形复杂度。
可复制示例
{
"方案": "几何检查器教学实验室",
"状态": "尚未实现",
"接受任意HTML": false,
"执行导入脚本": false,
"自动修复": false,
"学习任务": "预测发现并解释覆盖边界"
}常见问题
教学实验室已经可以使用了吗？
还没有，它是编辑设想。已交付的是静态章节配图和可复现的十六项检查案例。
为什么不先上 Three.js？
绘制顺序和矩形重叠可以直接用二维解释。三维界面应由经过验证的学习需求推动，而不是先选技术。
资料来源
- scripts/verify-geometry.py来源核查 2026-09-08
- docs/adr/0005-label-geometry-is-verified.md来源核查 2026-09-08
- docs/adr/0001-static-by-default-single-pinned-controller.md来源核查 2026-09-08