Zhangs-11 系统结构图
概述
使用这个 skill，把项目的真实模块结构整理成一张在视觉上贴近参考图的结构图。优先使用可精确控制的 SVG 构图，确认布局正确后再导出 PNG。
工作流程
- 先查看项目结构，不要直接凭印象作图。
- 从代码、路由、控制器、菜单或模块目录中提取真实层级。
- 识别参考图的视觉规则：
- 画布尺寸和白色背景
- 顶部标题框、第二层角色框、底部功能框
- 连线位置、长度和收口方式
- 横排文字还是竖排文字
- 字体、字重、边框颜色、间距
- 用 SVG 重建这套规则，不要自由发挥。
- 只替换内容，版式和风格尽量贴近参考图。
- 从 SVG 导出 PNG 供预览和确认。
- 根据用户反馈继续微调，直到连线、间距、居中和字体效果都对齐。
结构映射
结构图必须来自真实项目结构，不能靠猜。
- 前端项目优先看路由表、侧边栏菜单、页面目录和服务模块。
- 后端项目优先看控制器分组、业务模块目录、服务域和现有文档。
- 如果图是按角色分支，第二层节点应来自真实角色，例如
ADMIN、TEACHER、USER。 - 如果参考图是纯结构树，功能名尽量压缩为 2-4 个汉字，方便竖排放进小框中。
SVG 规则
把 SVG 作为唯一真实源，因为它最容易精确控版。
- 设置固定的
viewBox、宽度和高度，使比例贴近参考图。 - 所有框和连线都用明确坐标绘制。
- 如果参考图没有明显特殊样式，边框和连线默认使用浅灰色。
- 如果参考图是纯白底，就保持纯白背景。
- 为下列文字分别定义样式：
- 顶部标题
- 第二层角色框
- 底部功能框
- 竖排文字建议每个字一个
tspan，并显式设置y坐标。 - 竖排文本要根据框体中心计算位置，不能凭目测从顶部往下排。
- 分支横线必须在最后一个子框中心线处收口，不能多出一段尾巴。
- 如果参考图存在从主干线垂直到子框顶部的连接线，也要补齐。
字体规则
先贴近参考图，再考虑美观优化。
- 中文学术类结构图优先使用
"SimSun", "NSimSun", "Songti SC", serif。 - 如果参考图不是粗体，就不要加粗。
- 优先通过减小字号解决溢出，不要先缩框。
- 如果竖排文字有超框风险，先轻微减小字号，再整体重算居中位置。
导出方式
SVG 调整正确后，再用零边距 HTML 包装页导出 PNG，保证预览图与 SVG 一致。
- 包装页背景保持白色。
- 隐藏滚动条。
- 浏览器窗口尺寸与目标画布一致。
- 只要几何布局或字体发生变化，就重新导出 PNG。
迭代检查清单
用户要求修正时，按这个顺序检查：
- 层级之间是否缺连接线
- 最后一个子框后面是否多出尾线
- 文字是否竖向居中
- 文字是否超出边框
- 字体或字重是否与参考图不符
- 同级框间距是否均匀
- 父框是否位于该分支中心
交付物
尽量同时交付：
- 可编辑的
.svg - 预览用的
.png
如果用户继续要求调整，先改 SVG，再重新导出 PNG。