南山解构建图

要解决什么问题

架构说明、方案评审、汇报 PPT 里，常见困境是：内容已经写清楚，图却迟迟出不来——选流程图还是分层图、配色是否统一、模块一多就挤在小画布里，文字还被连线盖住。若再要「可折叠层级」或悬浮高亮，往往又得另做 HTML 页面或挂外部 JS。

本技能把角色定为全责视觉设计师：你只给内容文字和使用场景（例如 PPT 演讲、网页嵌入、打印报告、知识库文档），形式选择、空间布局、颗粒度深浅、静态或交互，均由技能在输出中直接落实。

如何工作

创作流程可概括为四步，但交付物只有一份 svg 代码块里的完整 SVG，不附带长篇设计说明。

1. 读内容、定形式：从内容的骨架（层级、流程、对比、因果、多维交叉等）推导呈现方式，而不是从固定「图表类型菜单」里勾选；必要时可融合多种形式。
2. 空间设计：按叙事设定画布（复杂内容可大于 1200×900，避免硬塞）；用嵌套表达包含、用间距表达层级、用箭头表达流向；核心区域高颗粒度、外围低颗粒度，引导读者视线。
3. 精细化绘制：配色控制在少量语义色（灰阶不计）；统一中文字体栈与字号层级；连接线置于文字之下，避免遮挡。
4. 自检：核对层次间距、逻辑是否与原文一致、最小字号与可读性。

需要交互时，技能使用 SVG 原生能力：animate / SMIL 与 SVG 内嵌 CSS（:hover、transition、@keyframes），实现展开折叠、动效等，不依赖外部 HTML/JS。

适用边界

• 适合：系统架构、业务流程、框架分解、关系与对比类内容的单文件 SVG 交付。
• 不适合：把技能当「只出方案、不出图」的顾问；也不适合要求偏离 SKILL 红线（小画布硬挤、彩色泛滥、输出设计文档而非 SVG）。
• 用户给的样例仅作参考，不应被理解为限制形式创新；若场景要求黑白打印或暗色背景，应在使用场景中说明，以便配色与对比度适配。