架构图 HTML/SVG

使用本技能生成独立的 HTML 文件，其中内嵌 SVG 图表，使其呈现效果更接近简洁专业的演示幻灯片，而非面向开发者的代码风格图表。

输出格式

• 默认输出为带内嵌 SVG 的独立 HTML 文件。
• 当单页需展示多个图表时，优先采用分节式“幻灯片组（deck）”结构。
• 最终交付使用 SVG 而非 Mermaid，以获得出版级的布局控制能力。
• 确保结果无需缩放即可清晰阅读，并能被非工程师受众准确理解。

视觉风格

• 采用类 PowerPoint 的信息设计风格：暖色调背景、卡片式面板、柔和阴影、圆角节点、色彩克制。
• 面向中文受众时，优先使用清晰的中文标签；仅保留必要的英文技术术语。
• 使用少量语义化颜色，并在各章节中保持一致。
• 箭头样式应低调克制，避免线条或标记元素产生视觉侵略感。
• 优先保证均衡留白，而非信息密集堆砌；整体页面应呈现精心编辑感，而非自动生成感。

图表构建工作流

1. 明确每张图表面向用户的实际用途。
2. 绘图前，先将系统抽象为若干层级或阶段。
3. 选择最简适配的 SVG 结构类型：
   • 分层架构图
   • 运行时流程图
   • 时序/时间流向图
   • 子系统下钻图
4. 按顺序排布：先放置分组容器，再放置节点，然后绘制连接线，最后添加注释。
5. 布局稳定后，进行本地化标签处理并精炼文字表述。
6. 完成前须专门开展箭头路径与元素重叠审查。

节点规范

• 每个节点须具备唯一且明确的职责。
• 标题应简短；若标题过长，优先加宽节点宽度，而非缩小字体。
• 细节信息置于副标题行，保持简短、易扫读。
• 避免在同一节点内混用多个抽象层级。
• 严格对齐同级节点。

箭头规范

• 所有箭头起点与终点必须落在节点边缘，不得起止于节点内部。
• 优先使用直线；仅在规避遮挡或消除歧义时才引入折线。
• 当两个箭头连接同一组区域时，应在垂直或水平方向错开布置。
• 实线表示主要运行时/数据流向。
• 虚线仅用于表示支撑功能、配置关系、反馈通路、可选连接或按需读取等场景。
• 若箭头过长，应缩短长度或重新规划路径，确保流向依然一目了然。
• 禁止文字覆盖在箭头上。

编辑规范

• 优化已有 SVG 时，应检查坐标值进行精确调整，而非依赖语义推测。
• 若用户反馈存在重叠问题，直接修正几何属性：移动节点位置、拓宽容器、重设路径走向，或调整文本锚点。
• 若用户质疑箭头含义，须首先查阅代码或文档确认真实系统关系，再修正对应连线。
• 优先采用显式文字标注，而非装饰性复杂设计。

图表类型专项指南

整体架构图

• 区分访问面（Access Surfaces）、控制平面/运行时（Control Plane/Runtime）、能力子系统（Capability Subsystems）以及状态/配置区域（State/Config Areas）。
• 使用包围容器（enclosing groups）表达归属关系或子系统边界。
• 跨组箭头应稀疏且精准。

运行时流程图

• 首先突出主执行路径。
• 将配置、会话状态及插件/运行时支撑模块置于主路径下方，作为辅助层级呈现。
• 文字表述应贴近产品行为描述，而非源码命名；仅当源码名称本身具有关键意义时例外。

序列图

• 参与者数量应精简至解释流程所需的最小集合。
• 按角色命名参与者，而非按文件/模块名；除非实现细节正是说明重点。
• 仅在真实存在重复交互的场景下使用循环结构。
• 循环标签应紧邻对应循环箭头放置。

终稿审查清单

完成前，请查阅 references/review-checklist.md 并逐项核验。