Code Atlas

English

Code Atlas 是一个参考 CodeFlow 思路开发的 Electron 本地优先代码分析桌面端，聚焦 SpringBoot + Vue 项目的本地导入、静态分析、业务链路还原、多图可视化和项目管理。

当前仓库实现的是一个重新定义产品边界后的桌面工作台：

• 只面向本地项目导入和本地分析
• 不依赖 GitHub PAT、GitHub App、PR 分析等远端流程
• 使用本地 SQLite 保存项目库、模块识别结果和最新分析快照
• 重点产出 前端路由/页面 -> API -> Controller -> Service -> Repository/Mapper -> Entity 业务链路

项目	值
软件名称	Code Atlas
建议仓库 ID	codeflow-code-atlas-desktop
上游参考项目	CodeFlow
桌面形态	Windows 优先 Electron 桌面端
数据持久化	本地 SQLite，默认 code-atlas.sqlite

与 CodeFlow 的关系

Code Atlas 的产品灵感、分析可视化方向和“快速理解代码结构”的核心目标都参考了 CodeFlow，但当前仓库实现的是一个更适合企业内网和本地源码场景的桌面版本：

• 保留了“代码结构可视化”和“问题面板”的核心价值
• 强化了 SpringBoot + Vue 的框架感知分析
• 新增了项目库、最近打开、本地快照、导出能力
• 明确转向 本地导入 / 本地分析 / 本地持久化

如果你想看原始网页版产品形态和上游仓库，请访问：

• 上游仓库地址: https://github.com/braedonsaunders/codeflow

核心能力

1. 本地项目导入

• 选择一个本地根目录导入
• 自动识别同一根目录下的前后端模块
• 删除项目记录时只删除本地数据库记录和缓存，不删除用户源码

2. SpringBoot + Vue 自动识别

• SpringBoot 识别 pom.xml、build.gradle(.kts)、src/main/java、@SpringBootApplication、Controller/Service/Repository/Mapper/Entity 注解族
• Vue 识别 package.json、vite.config.*、vue.config.js、src/router、.vue SFC、store、axios/fetch 请求
• 单根目录下同时存在前后端时，会归为同一个项目下的多个模块，而不是拆成两个独立项目

3. 深度业务链路分析

分析器重点产出如下链路：

route/page -> component/store/composable -> api -> controller -> service -> repository/mapper -> entity

能力包括：

• Vue router 到页面/组件关系识别
• 组合式函数、store、API client 调用识别
• Spring @RequestMapping / @GetMapping / @PostMapping 路由归一化
• controller -> service -> repository/mapper -> entity 调用链追踪
• 前后端 URL 模板匹配，例如 /users/:id 与 /users/{id}
• 对无法匹配的接口生成 unresolved endpoint

4. 源文件依赖分析

除了业务语义图，桌面端还保留源码结构分析能力：

• module -> directory -> file 层级关系
• Vue 相对导入依赖
• Spring 侧静态文件依赖
• 模块包络、目录聚类、矩阵视图、依赖 bundle 视图

5. 多图视图

当前版本支持两个分析维度、九种图视图：

• Business
  • Graph
  • Flow
  • Tree
  • Cluster
• Source Files
  • Graph
  • Treemap
  • Matrix
  • Cluster
  • Bundle

6. 统一画布交互

所有图视图共享统一交互：

• 鼠标滚轮缩放
• 鼠标拖拽平移
• + / - / Reset View 视图控制
• 节点选中与详情高亮
• 模块圈层、连线关系、问题侧栏联动

7. 项目管理与导出

• 项目库
• 最近打开
• 最近分析时间
• 手动重新分析
• JSON / Markdown / Text 导出
• 文件预览

界面截图

项目库

业务依赖图

业务链路 Flow 视图

源文件依赖图

源文件 Cluster 视图

更多图形截图可查看 docs/assets。

技术方案与实现原理

桌面架构

Code Atlas 采用三层桌面结构：

• electron/main.mjs
  • 创建窗口
  • 负责目录选择
  • 管理 SQLite
  • 调度分析任务
• preload
  • 暴露受控 IPC
  • 阻止 renderer 直接访问文件系统和数据库
• renderer
  • 使用 React 承载项目库、工作台、图表、详情面板和导出 UI

flowchart LR
  User["用户"] --> Renderer["Renderer<br/>React + D3"]
  Renderer --> Preload["Preload IPC Bridge"]
  Preload --> Main["Electron Main"]
  Main --> DB["SQLite<br/>projects / modules / snapshots"]
  Main --> Worker["Analyzer Worker"]
  Worker --> Detect["项目识别"]
  Worker --> Vue["Vue 分析器"]
  Worker --> Spring["SpringBoot 分析器"]
  Worker --> Match["链路匹配 / 问题生成"]
  Match --> Snapshot["图数据 + 问题 + 链路快照"]
  Snapshot --> DB

Loading

分析流水线

一次完整分析包含以下阶段：

1. 扫描本地根目录并识别项目类型与模块边界
2. 对 SpringBoot 模块建立接口、服务、仓储、实体索引
3. 对 Vue 模块建立路由、页面、组件、store、API client 索引
4. 归一化前后端 URL 与 HTTP method，尝试生成完整业务链路
5. 构造业务图、源文件图、问题清单、未匹配端点清单
6. 将结果作为最新快照写入 SQLite

图数据模型

桌面端不是简单把所有文件当成孤立节点，而是把分析结果拆成两条主线：

• 语义业务图
  • 节点类型包含 route、component、api、controller、service、repository、entity、module
  • 连线表示 render、call、maps-to、depends-on、resolves-to 等语义关系
• 源文件依赖图
  • 节点类型包含 module、directory、file
  • 连线表示 contains、imports、depends-on

同一份分析快照会同时喂给多种可视化布局，因此 Graph / Flow / Tree / Cluster / Treemap / Matrix / Bundle 会呈现不同的图效果，而不是重复显示同一张图。

本地持久化

SQLite 默认放在 Electron userData 目录下，Windows 一般为：

• %APPDATA%/Code Atlas/code-atlas.sqlite

当前数据模型包含：

• projects
• project_modules
• analysis_snapshots

v1 仅保留每个项目的最新成功快照，以换取更稳定的读取体验和更快的项目库打开速度。

当前范围

• Windows 优先，不承诺首版跨平台验证
• 只做本地静态分析，不执行 mvn、gradle、npm install
• 默认手动刷新，不做自动文件监听
• 默认保留最新分析快照，不做历史版本对比

快速开始

开发运行

npm install
npm run dev:electron

构建前端资源

npm run build

打包 Windows 安装包

npm run pack

输出示例：

• dist/Code Atlas Setup 0.1.0.exe
• dist/win-unpacked/Code Atlas.exe

使用方式

1. 打开桌面应用
2. 点击 Import Project
3. 选择一个本地项目根目录
4. 系统自动识别 SpringBoot / Vue 模块
5. 点击 Run Analysis
6. 在工作台中切换 Business 与 Source Files 多种图视图
7. 在右侧面板查看链路、问题、安全项和建议
8. 根据需要导出 JSON / Markdown / Text 报告

适用场景

• 接手一个新的 SpringBoot + Vue 代码库，想快速看懂前后端关系
• 不方便把源码上传到远端平台，但仍希望做可视化架构分析
• 需要一个桌面项目库，保留最近分析结果并快速重开
• 希望把文件依赖图和业务链路图结合起来排查复杂问题

致谢

• 产品灵感与参考项目: CodeFlow
• 当前仓库为本地优先桌面端实现，非上游官方桌面版本