Diagram Generator

--- name: diagram-generator slug: yumingtao-diagram-generator displayName: Diagram Generator version: 1.4.0 summary: 生成专业独立 HTML/SVG 技术图表，内置几何检查器。 license: MIT description: > 生成专业独立 HTML/SVG 技术图表。适用于架构图、系统图、基础设施图、拓扑图、部署图、数据流图、时序图、流程图、信任边界图、云图、draw.io 导出等场景。触发词："帮我画个架构图"、"画一张拓扑图"、"生成系统图"、"画个时序图"、"画个部署图"、"画个流程图"。 --- # 图表生成器 生成生产级技术图表，输出为独立 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](./README.md#faq--common-pitfalls)。

存档时间线

版本索引永久保留；内容副本只保留最新 1 份，更早版本仅留索引与哈希（存档时间线的证据链不会因此断裂）。

下载存档内容副本