# System Structure Diagram

> 按参考图片的版式、背景、框体样式、连线样式、字体风格和整体构图生成或修改系统结构图，并替换为真实项目模块内容。适用于用户要求“和示例图格式一样”或“按这个样式画”的系统结构图、功能结构图、模块树图片，尤其适合需要像素级微调和反复修正的场景。

- Skill: `zhangs-11/system-structure-diagram` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add zhangs-11/system-structure-diagram`
- Raw SKILL.md: https://api.skillmd.com/api/skills/zhangs-11/system-structure-diagram/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: Zhangs-11 (https://skillmd.com/u/zhangs-11)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/zhangs-11/system-structure-diagram

---


# 系统结构图

## 概述

使用这个 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。