前端工程

让 AI 深度分析前端项目源码，自动绘制架构图、依赖图、时序图、数据模型等九类可视化分析图，辅助前端工程师诊断项目健康度、理解代码结构、定位问题根因。

九图总览

#	图名	核心作用	在 ant-design-pro 上跑出了什么
01	前端架构图	一眼看清四层骨架有无畸形	配置 → 页面 → 数据模型 → 服务，分层干净
02	模块依赖图	揪出循环依赖，看谁是谁的地基	page/model/service 之间的依赖网
03	交互时序图	追一条链路从触发到渲染的全过程	登录链路完整追踪，每一步的调用方和被调方
04	数据模型图	搞清楚数据在哪、谁在用、怎么传	userModel 和各页面 model 的引用关系网
05	状态机图	把所有状态流转拍平，找遗漏分支	登录表单 6 个状态节点、9 条转换边
06	页面路由流转图	页面跳转地图，守卫挂在哪个节点	几十个路由节点 + 嵌套守卫的拓扑
07	权限路由守卫图	决策树，谁在哪个节点被拦	access.ts 三态判断 + 路由级权限分支
08	外部依赖图	版本升级前必看，分清命门和装饰	React + Umi + antd 核心铁三角 + 外挂
09	组件生命周期图	查异步 bug 的时候当速查手册	核心页面从 mount 到 unmount 的完整时序

附

#	名称	说明
10	架构图通用皮肤规范	国产模型生图时用的颜色、布局、自适应公式

使用说明

• 每个提示词独立页面可直接复制全文使用
• 【功能名】、【组件名】、【页面名】 等占位符在使用前替换为实际内容
• 输出统一为 .svg 文件，保存到 ./docs/ 目录下，可直接在 VitePress 中引用
• 建议将生成的 SVG 图和项目概要一并写入 CLAUDE.md 或 .cursor/rules，让 AI 在后续对话中自动加载项目结构认知

维护记录

日期	变更
2026-05-21	初始整理：9 张前端工程分析图 + 皮肤规范