前端架构图

类型: 前端工程 | 标签: 架构分析 四层分层 项目概览 SVG

提示词

md

分析项目源码，帮我绘制一张该前端项目的整体架构图。

## 分层规范
- 按照【组件层（UI）】、【路由层（Router）】、【状态管理层（Store/Context）】、【API 请求层（Service）】进行分层
- 展现粒度：模块级即可，不要展开具体实现细节，每个模块需标注名称和一句话核心职责
- 基础设施：构建工具、部署方案、CI/CD 等放到一个单独的方框（Infrastructure）里，别展开细节

## 输出
- 保存为 ./docs/frontend-architecture.svg

适用场景

新成员入职：快速上手项目时，看一眼四层骨架就知道代码放哪
技术评审：评审项目分层是否合理，有没有层间越权调用
架构治理：定期检查基础设施层和业务层是否混在一起
技术方案产出：作为文档配图，直观展示项目整体设计

最佳实践

先跑通再细化：第一版只要四层骨架清晰即可，不要追求完美
分层不跨层：组件层直接调用 API 层是常见畸形，架构图能一眼揪出
Infrastructure 单独拎：构建、CI/CD、Docker 不属于业务四层，不要塞进任何一层
产出进 CLAUDE.md：把生成的 SVG 路径写给 AI，下次对话不用再解释项目结构
版本升级后重跑：依赖升级或重构后重跑一遍，对比前后差异