system-structure-diagramlisted

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