SVG 可视化概念图解

要解决什么问题

技术文档、培训材料里经常出现「流程、架构、方法论」这类只能靠文字堆叠的概念。读者要在脑子里自己拼图，既慢也容易误解。若临时找设计师做图，成本高、迭代慢；自己用绘图工具拖控件，又很难保证可维护、可嵌入网页。

本技能把画图请求统一收敛为输出完整 SVG 源码：矢量、可缩放、能进 Markdown/HTML，适合工程师在对话里快速产出教学向图解。

技能如何工作

激活后，模型按「技术插画 + 可视化 + 教育设计」三重角色处理输入：先理解概念，再设计视觉层次与信息架构，最后写出符合 W3C 的 SVG。

典型流程包括：

• 需求理解：把用户描述当作可视化目标（含触发词如「画图」「可视化」「svg」「图解」等）
• 结构设计：规划布局、分组；复杂图用 g 分组，可复用部分用 defs
• 编码与检查：默认 16:10 画布（常用 viewBox="0 0 1600 1000"），中文标签，字体回退 Microsoft YaHei 或通用 sans-serif
• 收尾：压缩与兼容性检查，并专门排查文本遮挡、图形重叠、元素出框

输出约定是：直接给 SVG 代码，少废话；用户输入默认视为画图请求而非纯问答。

适用边界与注意点

• 适合概念流程、关系、步骤类图解；不适合替代专业 UI 设计稿或复杂交互原型。
• 布局上宁可少元素也不要强行塞满导致重叠；这是 SKILL 里明确强调的硬约束。
• 需要可访问性（语义、ARIA）或动画交互时，要在需求里写清楚，否则默认以静态教育图解为主。