接手一个陌生项目、或者接盘一段”祖传代码”，几乎是每个前端工程师的必修课。本文整理了一套行之有效的方法论：让 AI 先画出 9 张图帮你建立全局骨架，再由人去验证和补充血肉。思路源自掘金作者「乘风gg」的《9 张 AI 生成的图，吃透任何一个前端项目》，这里结合自己的实践做了重述与补充。
为什么会”翻车”
面对新仓库，常见的两种姿势都会踩坑：
- 让 AI 一把梭概括——AI 读了几十个文件后给你一份”项目地图”，但你看不出哪层是骨架、哪层是噪音，而且 AI 容易脑补不存在的依赖。
- 自己闷头通读细节——从
main.ts一路追到utils/format.ts，三天后还在某个边界 case 里打转，全局结构一根毛都没记住。
核心问题都一样：还没建立全局，就扎进了细节。
作者的办法很朴素——先建骨架，再填血肉：让 AI 把项目”画”成图，人只负责看图、质疑图、补图。下面这 9 张图，建议按顺序生成。
第一张：前端架构图
按”组件层 / 路由层 / 状态层 / API 层”四层切分，让 AI 输出一张分层架构图。这一步的目的是一眼看清骨架，而不是抠实现。
提示词要点：
1
2
3
分析这个前端项目的目录与入口文件，按 组件层 / 路由层 / 状态层 / API 层
四层画出架构图，输出到 ./docs/frontend-architecture.svg，
用不同颜色区分各层，节点之间标注调用方向。
第二张：模块依赖图
扫描内部 import，画出模块之间的依赖关系，重点检测循环依赖。作者举了个很形象的例子：改了 user 模块一行，结果 order 模块莫名其妙炸了——因为依赖是倒灌的”下水道”。
提示词要点：
1
2
扫描项目内所有内部 import，画出模块依赖关系图（控制在合理节点数），
特别标注出任何循环依赖，输出到 ./docs/module-deps.svg。
第三张：交互时序图
挑一个核心功能（比如”用户登录”），让 AI 全局检索真实代码还原调用链路，画出时序图。关键词是”全局检索真实代码”——如果不强调，AI 会凭印象脑补一条看起来合理的链路，那比没有还危险。
提示词要点：
1
2
针对「用户登录」这一功能，全局检索真实代码，还原从点击到拿到 token 的完整调用时序，
输出到 ./docs/sequence-login.svg。
第四张：数据模型图
解析状态管理文件（Redux / Pinia / Zustand 等），画出模型之间的关系，顺便把 TypeScript 的类型文件也丢给 AI，类型和状态一起看更准。
提示词要点：
1
解析状态管理相关文件，绘制数据模型关系图，输出到 ./docs/data-model.svg。
第五张：状态机图
提取关键组件的状态变量，覆盖 idle / loading / success / error 等分支。以登录表单为例，能一眼看出”提交中能否再次提交”这种边界。
提示词要点：
1
2
提取【登录表单】组件的状态变量，绘制状态机图，覆盖 idle/loading/success/error，
输出到 ./docs/state-login.svg。
第六张：页面路由流转图
分析路由配置，标注跳转方式和路由守卫。
提示词要点：
1
2
分析路由配置文件，画出页面路由流转图，标注跳转方式与守卫，
输出到 ./docs/route-flow.svg。
第七张：权限路由守卫图
专门把权限逻辑拎出来，画成决策树——”有没有 token？角色够不够？要不要重定向？”
提示词要点：
1
分析权限相关代码，画出路由守卫的决策树，输出到 ./docs/auth-guard.svg。
第八张：外部依赖图
综合 package.json 等，把依赖按”运行时 / 构建 / 开发 / 三方 SDK”分类。
提示词要点：
1
综合 package.json 等，把外部依赖分类画出关系图，输出到 ./docs/external-deps.svg。
第九张：组件生命周期图
画出核心组件的生命周期时序，这张图专门用来查异步 bug（比如某请求在组件卸载后才 resolve）。
提示词要点：
1
2
绘制【核心组件】的生命周期时序图，标出异步副作用的触发与清理时机，
输出到 ./docs/lifecycle-xxx.svg。
九张图，一张表收拢
| 图 | 核心作用 |
|---|---|
| 前端架构图 | 一眼看清四层骨架 |
| 模块依赖图 | 揪出循环依赖 |
| 交互时序图 | 还原真实调用链路 |
| 数据模型图 | 理清状态与类型关系 |
| 状态机图 | 覆盖状态分支边界 |
| 页面路由流转图 | 看清页面跳转 |
| 权限守卫图 | 决策树化权限逻辑 |
| 外部依赖图 | 分类掌握依赖来源 |
| 组件生命周期图 | 定位异步副作用 |
画完存到 docs/，这才刚开始
图生成后，建议做两件事：
- 沉淀到
docs/：这些图是项目的”地图”，比口述更利于团队传承。 - 登记给 AI：在根目录的
CLAUDE.md或.cursor/rules里写上一句”架构图见docs/*.svg“，让后续每次 AI 对话启动时自动带上地图，不用每次重新解释项目。
另外，作者提醒：AI 读得到代码，读不到历史包袱和隐性约束。它可能漏掉一条异步链路、把依赖方向画反。架构决策、业务判断、风险评估，最终还得人来做。图也不是一次成型，迭代三五轮很正常。
附录：给国产模型加的”皮肤规范”
用国产模型生图时，常遇到文字溢出、卡片变形。作者给了段通用皮肤规范，能显著改善排版：
1
2
3
4
5
6
7
# 架构图通用皮肤规范
## 画布与字体
- 画布背景统一用 #F8FAFC，禁止纯白或纯灰
- 字体优先等宽，字号不小于 12px
## 卡片
- 卡片宽度 160–220，高度自适应，圆角 8
- 同层卡片左右对齐，间距一致
本文方法整理自掘金作者「乘风gg」的《9 张 AI 生成的图，吃透任何一个前端项目》，文中 9 张示意图均为本人手绘 SVG（封面为 AI 生成），仅作方法说明用途。如果你也在用 Codex / Claude Code 读代码，不妨今晚就挑个项目试画第一张架构图。
