概念示意图

要解决什么问题

技术文档、教材和方案说明里经常需要示意图：流程、物理结构、数据管线、智慧城市拓扑等。手绘白板或通用绘图工具往往风格不统一，暗色主题要重做一遍，导出还要再包一层 HTML。若你更需要深色科技风的基础设施架构图或手绘白板感，应优先选更专精的技能；本技能定位为扁平、极简、教育向的通用 SVG 回退方案。

技能如何工作

技能要求按内置 Design System 排版：无渐变与阴影，颜色用 c-purple、c-teal 等类名编码语义类别（同类节点同色，通常 2～3 种色），描边 0.5px，圆角与间距有固定规则。工作流大致是：选定图类型（流程图、 containment、API 树、微服务拓扑、数据流、物理剖面、枢纽辐射集成、仪表盘 mock 等）→ 按布局规则摆放节点与连线 → 将 SVG 嵌入 templates/template.html 提供的页面骨架 → 保存为独立 .html 文件，用户用浏览器直接打开即可，无需服务器与外部依赖；模板内 CSS 负责明暗模式自动切换。

连线需 fill="none" 并在 SVG 开头加入箭头 marker；文本只用 th / ts / t 三类字号，提交前应对照文档中的 Validation Checklist（标签宽度、安全区 x=40～640、颜色类挂在形状而非连线上等）。物理、基础设施、仪表盘类图可先参考技能附带的 reference 与 examples/ 中的样例模式。

适用边界与注意点

• 更适合：物理/化学/生物示意、机械与剖面、平面图转换、生命周期叙事、枢纽型系统集成、教材式定量图（如分组柱状图）。
• 不太适合：专用云架构深色科技 aesthetic、手绘白板、动画/视频讲解——应换用对应技能。
• 默认交付单文件 HTML；仅当用户明确需要多图浏览画廊时，才考虑绑定 127.0.0.1 的本地预览服务，且不要监听 0.0.0.0。