Diagram Generator

Generate polished standalone HTML/SVG technical diagrams

图表生成器

生成生产级技术图表，输出为独立 HTML 文件。当用户需要架构图、基础设施图、系统拓扑图、云图、部署图、安全边界图、数据流图、运行时流程图或流程图时使用本技能。

权威来源

生成图表前加载并遵循以下文件：

• resources/generation-rules.md
• resources/diagram-ir.md
• resources/template.html

必需行为

1. 提取系统实体、关系、边界、协议、数据存储、异步路径和运维风险。
2. 从 resources/generation-rules.md 选择正确的视角（lens）和输出模式。
3. 渲染前以 resources/diagram-ir.md 作为规划模型。
4. 若编辑现有图表，先检查当前产物，保留不相关内容、注释和颜色语义。
5. 以 resources/template.html 为基础，生成一个完整的独立 .html 文件。
6. 用用户需求中的具体内容或明确标注的假设替换每个占位符。
7. 返回文件前运行 resources/generation-rules.md 中的最终审计清单。

保持本文件有意精简。不要在此重复共享设计系统、SVG 规则、输出模式策略或审计清单；应更新 resources/generation-rules.md。

当被要求优化已生成的图表时，优先采用能修复所请求布局或路由缺陷的最小编辑。除非用户要求重新设计，否则不要重写整张图。

输入格式

本技能接受三种输入格式，按用户提供的内容自动选择：

1. 自然语言简报——用文字描述系统与目标（默认格式，示例见 examples/architecture-brief.md）。
2. 结构化组件清单——YAML/JSON 形式的组件与关系表（示例见 examples/structured-input.yaml），适合从云资源清单或既有配置直接转换；组件映射为节点、关系映射为连线。
3. 已有 diagram-ir JSON——直接传入符合 resources/diagram-ir.md 契约的规划模型，跳过解析阶段直接生成或修订图表；revise 工作流同样优先读取产物内嵌 IR。

不适用范围

本技能生成技术架构和系统图表，输出为独立 HTML/SVG。不适用于：

• 自由插画、手绘草图或像素画
• 统计图表（柱状、折线、饼图）——使用图表库或电子表格
• 像素级 UI 原型或营销视觉——使用设计工具
• 复杂的非正交连线路由（曲线、贝塞尔）——内置检查器验证正交路径；复杂曲线以 W004 警告降级并提示人工复查
• draw.io 优先的生产输出——html + drawio xml 是实验性的；默认使用 html-first
• 超大规模输入——节点超过约 40 个或连线超过约 60 条时，建议拆分为多张单视角图，或将次要路径移入 notes 栏，而不是挤在一张图中

语言：用用户的首选语言（中文或英文）输出标签和注释。触发词包括 "帮我画个架构图"、"画一张拓扑图"、"生成系统图"。

常见问题

Q: 检查器报告连线与节点或区域边框共线怎么办？ A: 重新路由连线，使其垂直离开节点边缘并在节点之间的自由空间中穿行。绝不要让连线沿源节点或目标节点自身的外边缘延伸，避免与任何区域边框共享超过约 12px 的线段。

Q: 节点与应该包含它的区域重叠了怎么办？ A: 检查器强制每个节点与区域边框之间有 10px 间距。缩小节点或扩大区域；不要将节点紧贴边框放置。

Q: 生成的 HTML 有残留的占位符文本怎么办？ A: resources/template.html 使用纯文本占位符（如 System Map Title、One sentence that states... 等），必须全部替换为具体内容。检查器会检测这些占位符文案（E010）并在残留时报错。不要在交付物中留下模板默认值。

Q: 可以编辑现有图表而不是重新生成吗？ A: 可以——优先进行局部坐标和连线修改，而非完整重新生成。先检查当前产物，保留不相关的节点、注释和颜色语义。

完整 FAQ 与常见陷阱：见 README.md。