上周在 GitHub Trending 上看到一个项目，CodeFlow，4 个月拿了 3.6k star。我点进去看完 README，只有一个感觉：这 TM 才叫开发者工具。

一个 HTML 文件，粘贴 GitHub 链接，30 秒生成交互式代码架构图。不装 CLI，不用注册，不碰你的代码，打开浏览器就能用。

这是个什么东西

CodeFlow 是 Braedon Saunders 做的开源项目，他把 React 18、D3.js 7、Babel 塞进了一个 index.html 里，从 CDN 加载依赖，零构建步骤。你粘贴任意 GitHub 仓库地址（或者拖一个本地文件夹），它分析完代码依赖关系，画出一张可拖拽、可缩放、可点击的交互式架构图。

每个文件是一个节点，每一条 import 是一条边。颜色代表架构层级、文件夹归属、或者 commit 热度。点一个节点，高亮它的所有上下游依赖。点"Blast Radius"模式，改一行代码前先看清楚，到底会炸多少文件。

技术栈简单到离谱，一个 index.html，CDN 拉 React 18 做 UI，D3.js 7 画力导向图，Babel 在浏览器里编译 JSX。没有 package.json，没有 node_modules，也没有 webpack。克隆下来双击 index.html 就能跑。

你可能会问：这玩意能分析什么语言？

JavaScript、TypeScript、Python、Java、Go、Ruby、PHP、Rust、C/C++、C#、Swift、Kotlin、Scala、Elixir、Haskell、Lua、R、Julia、Dart、Shell、Vue、Svelte……三十多种。函数提取靠正则匹配，依赖分析靠 import 语句。不是编译器级别的精确，但对于"我想快速看懂这个项目长什么样"，够用了。

它还支持分析 Obsidian 笔记库的 wiki-link 和 Markdown 链接，把笔记变成知识图谱。这个功能我试了一下，挺新鲜的。

功能详情

CodeFlow 不是画个图就完事了，它的功能列表比我想象的长，我一个一个说。

1. 交互式依赖图：拖拽、缩放、点击高亮

这是 CodeFlow 的核心。粘贴链接后，它从 GitHub API 拉取仓库文件列表，逐个分析每个文件里的函数定义和 import，用 D3.js 渲染成力导向图。

节点代表文件，边代表依赖关系。你可以拖拽节点调整布局，滚轮缩放，点击节点高亮它的所有依赖链。有四种着色模式随时切换：按文件夹着色、按架构层级着色（把 UI 层、Service 层、Utils 层分开上色）、按 commit 频率着色（热力图模式）、以及 Blast 模式（选中文件时，用颜色标记影响范围）。

说真的，用这个看一个新仓库比在 IDE 里一个个文件点开快多了。

2. 爆炸半径分析：改这个文件，会炸多少东西

这个功能是我最喜欢的。选中一个文件，CodeFlow 把直接依赖它的文件标记出来，再把这些文件的依赖也标记出来，一路递归下去。图上的颜色从深到浅，显示影响层级。

以前我们改一个底层工具函数，只能靠 grep 手动查引用。CodeFlow 把这个过程可视化成了几秒钟的事。他们的 demo 里演示了这个功能，作者说"你点一个文件，图就洪水般扩散开来，直接 import 它的先亮，间接依赖的接着亮，测试文件单独标色"。有时候你自己觉得改的是个独立模块，结果图告诉你它横跨八个模块十四个测试文件。

3. 安全扫描：硬编码密钥、SQL注入、eval检测

CodeFlow 内置了一个安全扫描器，自动检测四种问题：硬编码的 API key 和 secret、SQL 注入风险、危险的  eval() 调用、生产环境里残留的 debug 语句。

它怎么检测的？也是靠正则和模式匹配。虽然比不上专门的 SAST 工具，但在你看代码结构的同时顺手扫一遍安全问题，这个思路不错。至少能拦住最蠢的那种把 AWS Access Key 写死在代码里还推到公开仓库的行为。

4. 模式检测：单例、工厂、观察者、React Hooks

CodeFlow 能自动识别代码里的设计模式。单例模式、工厂模式、观察者/事件模式、React 自定义 Hook，这些都能扫出来。

反过来它也能检测反模式：上帝对象（一个文件干了太多事）、高耦合模块。这些信息在你做重构决策的时候，比单纯看文件数量有用得多。

5. 健康评分：A到F，一目了然

CodeFlow 给整个代码库打一个字母等级，从 A 到 F。评分依据四个维度：死代码占比、循环依赖数量、模块耦合度、安全问题数量。

这个评分不是虚的，它直接关联到具体的文件和具体的指标。你看到项目得了 C，可以点进去看是哪个维度拖了后腿，是耦合太高还是死代码太多。

上图是 CodeFlow 的 detailed 风格 Card，展示了健康评分、语言构成、文件统计、Top 文件夹、脆弱性和隐藏成本等详细信息。

6. 活动热力图：哪些文件改得最勤

按 commit 频率给文件着色。热力图上最红的文件就是最近改动最频繁的，深蓝的是半年没动过的。

这个功能单独看好像没什么，但结合依赖图用就厉害了。一个频繁改动的核心文件，CodeFlow 标记为高耦合，你就知道这项目架构大概率有问题。一个六个月没动过的文件在热力图上发蓝，结果 blast radius 分析显示改了它会炸掉二十个文件，这说明这堆依赖关系是历史遗留的，该清理了。

7. PR 影响分析：审查代码不用猜

粘贴一个 PR 的 URL，CodeFlow 告诉你这个 PR 改了哪些文件，每个文件的 blast radius 有多大。审查代码的时候看一眼这个图，不用手动追踪改动的连锁反应。

这个功能对开源项目 maintainer 特别实用。收到一个 PR，先丢进 CodeFlow 看看影响面，再决定要不要仔细读代码。

8. 代码归属权：知道该找谁问

基于 git 历史分析每个文件的 Top 贡献者。你看到一段看不懂的代码，CodeFlow 直接告诉你这段代码主要是谁写的，找人问的时候能找到对象。

代码审查也用得上：一个文件的主要作者提了个改同一个文件的 PR，他的改动大概率是靠谱的。反过来一个从没碰过这个模块的人提了个大改，多看一眼。

9. CodeFlow Card：README 上的自动更新 SVG 徽章

这是一个 GitHub Action，每次 merge 代码后自动重新计算项目的健康评分、规模、脆弱性、隐藏成本，生成一张 SVG 卡片贴在 README 上。

五种风格可选：compact（紧凑型）、row（状态条型）、minimal（单行文本）、hero（渐变背景）、detailed（信息密集型）。颜色主题也能换，purple、teal、cyan、green、pink、blue、amber、red，还能传自定义 CSS 颜色。

卡片自动适配 GitHub 的亮色/暗色主题。PR 合并后还能在评论区贴一张"收据"，列出本次 PR 对健康评分的影响。

上图是 compact 风格的 CodeFlow Card。

上图是 hero 风格的 Card，渐变背景，视觉效果更突出。

10. 本地文件分析：代码不出你的电脑

除了粘贴 GitHub 链接，CodeFlow 还能直接分析本地文件夹。点"Open Folder"按钮，选一个文件夹，所有分析都在浏览器里跑。代码不离开你的电脑，断网也能用。

支持拖拽文件或文件夹，支持递归扫描，还支持自定义排除规则（比如跳过 node_modules、uploads、缓存目录）。这个功能对于分析公司内部项目或者还没推到 GitHub 的私人仓库，简直是刚需。

11. Markdown 和 Wiki-Link 图谱：Obsidian 用户的意外惊喜

把 CodeFlow 指向一个 Obsidian 笔记库或者任意 Markdown 文件夹，它把 wiki-link 和 相对路径链接 识别为图的边，每个笔记是一个特殊颜色的节点。导出的 JSON 里每个笔记有独立的 dependencies 数组。

这个功能跟代码分析无关，但挺有意思，等于白送了一个轻量级的知识图谱工具。

12. 导出和分享：JSON、Markdown、SVG、PDF 随便选

分析完了能导出多种格式：JSON 报告（完整分析数据，适合丢进 CI/CD）、Markdown 报告、纯文本、SVG 矢量图、PDF 文档。还能生成一个分享链接，别人点开能直接看同一份分析结果。

快速上手

CodeFlow 的"安装"可以说没有安装。

方式一：直接用在线版

打开 https://codeflow-five.vercel.app ，粘贴 GitHub 仓库地址（比如 braedonsaunders/codeflow，回车，等它分析完。

公开仓库不需要任何 token，私有仓库的话，去 GitHub Settings 创建一个 Personal Access Token（勾上 repo 权限），粘贴到 CodeFlow 的 Token 输入框就行。这个 token 只存在浏览器内存里，关掉标签页就没了。

方式二：本地跑

git clone https://github.com/braedonsaunders/codeflow.git
open index.html

就这么两行，打开浏览器，跟在线版一模一样，区别是你可以断网用，而且源码全在眼前，想改就改。

方式三：分析本地文件

打开 CodeFlow，点"Open Folder"，选个文件夹，或者直接把文件拖进去。分析全在浏览器里跑，不上传任何东西。

GitHub API 有频率限制，不带 token 一小时 60 次请求，带了 token 一小时 5000 次，分析大仓库建议绑定 token。

说点实在的

CodeFlow 不是完美的。依赖分析靠正则和函数名匹配，遇到动态 import、运行时的反射调用、重命名引用，它就抓不准了。README 自己写了："it's designed for a quick overview, not 100% accuracy."

但这个定位我认，它不是要替代 SonarQube 或者 Sourcegraph，它就是为了让我们在第一次打开一个陌生仓库的时候，不用在几千个文件里抓瞎。

一个 HTML 文件，四个月3.6k star，零依赖安装，零数据收集，MIT 协议。Braedon Saunders 把"简单"这个词执行到了极致。

我敬这种产品观。

项目地址：

https://github.com/braedonsaunders/codeflow