braedonsaunders/codeflow

## 为什么选择 CodeFlow？ 是否曾打开一个陌生的代码库而感到完全迷失？**CodeFlow** 能在几秒钟内将任何 GitHub 仓库或本地代码库转化为交互式架构图。 - **无需安装** — 完全在您的浏览器中运行 - **不收集数据** — 您的代码永远不会离开您的设备 - **无需账户** — 只需粘贴 URL 或选择本地文件即可开始 - **支持离线** — 无需网络即可分析本地文件 ``` Paste URL / Select Files -> See Architecture -> Make Better Decisions ``` ## 功能 ### 交互式依赖图 一眼看清您的文件是如何关联的。点击任意节点以高亮其依赖项。支持拖拽、缩放和探索。 ### 影响范围分析 *“如果我修改这个文件，会破坏什么？”* — CodeFlow 会立即回答这个问题。选择任意文件，准确查看有多少文件会受到更改的影响。 ### 代码所有权 ### 安全扫描器 自动检测： - 硬编码的密钥和 API key - SQL 注入漏洞 - 危险的 `eval()` 用法 - 生产代码中的调试语句 ### 模式检测 自动识别： - Singleton 模式 - Factory 模式 - Observer/Event 模式 - React 自定义 hooks - 反模式（God Objects、高耦合等） ### 健康评分 根据以下内容立即为您的代码库给出 A-F 等级评分： - 死代码百分比 - 循环依赖 - 耦合指标 - 安全问题 ### 活跃度热力图 根据提交频率为文件着色，查看代码库中哪些部分开发最活跃。 ### PR 影响分析 粘贴 PR URL，准确查看它影响了哪些文件，并计算拟议更改的影响范围。 ### CodeFlow Card (GitHub Action) 在您的 README 上以可自动更新的 SVG 形式展示健康评分、规模、脆弱性和隐性成本 — 每次合并时重新计算，可选择生成热敏收据式 PR 评论。详见 [card/](./card/)。 ### Markdown 和 Wiki-Link 图 将 CodeFlow 指向 Obsidian vault 或任何 markdown 目录，将笔记视为连接图。`[[wiki-links]]` 和 `[文本](./relative.md)` 链接都会转换为边；每个笔记都是 `note` 层的节点（颜色独特），并在 JSON 导出中包含 `dependencies[]` 数组。 ### 本地文件分析 直接从您的电脑分析代码，无需上传到 GitHub： - **隐私第一：** 您的代码永远不会离开您的设备 - **离线支持：** 无需网络连接即可工作 - **拖放支持：** 只需拖放文件或文件夹即可进行分析 - **文件夹扫描：** 递归分析整个项目结构 - **排除模式：** 在扫描前跳过附件、缓存、生成的资源和其他无关路径 - **即时结果：** 所有处理均在您的浏览器中完成 ## CodeFlow Card 这是一个 GitHub Action，可以在您的 README 上放置一个自动更新的 SVG 卡片，每次合并时都会由与 Web 应用相同的分析器重新计算。提供五种样式、强调色预设、可选的 PR 收据功能，以及针对公开仓库的隐私模式。该卡片会自动适应查看者的浅色/深色主题。

有关设置说明，请参阅 [card/](./card/)，或直接跳转至下方的[样式库](#card-style-gallery)。 ## 隐私第一 **您的代码始终保留在您的设备上。** CodeFlow： - 100% 在浏览器中运行 - 直接从您的浏览器向 GitHub 发起 API 调用 - 绝不存储您的代码或 token - 支持私有仓库（只需在本地添加您的 token） - 无分析或追踪 您的 GitHub token（如果使用）仅存储在浏览器的内存中，并在您关闭标签页时被清除。 ## 快速开始 ### 方式 1：在线使用（推荐） 只需访问 [CodeFlow](https://codeflow-five.vercel.app/) 并粘贴任何 GitHub URL。 ### 方式 2：自托管 ``` # Clone the repo git clone https://github.com/braedonsaunders/codeflow.git # 搞定！只需在浏览器中打开 index.html open index.html ``` ### 方式 3：分析本地文件 您现在可以直接从本地设备分析代码，无需上传到 GitHub： 1. 在浏览器中打开 CodeFlow 2. 点击“Open Folder”按钮 3. 选择您想要分析的文件夹或文件 4. CodeFlow 将完全在您的浏览器中处理它们 **非常适合：** - 您不想上传的私人项目 - 离线开发 - 提交前的快速本地分析 - 处理敏感代码 ## 使用说明 ### 公开仓库 ``` Just paste: facebook/react Or full URL: https://github.com/facebook/react ``` ### 私有仓库 1. 创建一个具有 `repo` scope 的 [GitHub Personal Access Token](https://github.com/settings/tokens) 2. 将其粘贴到 Token 输入框中 3. 分析您的私有仓库 ### 本地文件 点击“Open Folder”按钮以从您的计算机分析代码： - **文件夹分析：** 选择一个文件夹以递归分析所有支持的文件 - **文件选择：** 选择特定文件进行分析 - **拖放支持：** 直接将文件或文件夹拖放到页面上 - **自定义排除：** 在扫描前添加如 `uploads/**`、`**/cache/**` 或 `*.png` 等模式 所有处理均在您的浏览器中本地完成 — 不会上传任何内容。 ### 可分享的链接 分析完成后，点击“Share”按钮复制可分享的链接。任何人都可以通过它重新运行相同的分析。 ### 导出报告 将您的分析结果导出为多种格式以便进一步处理： - **JSON 报告** - 完整的分析数据，包括： - 仓库元数据和健康评分 - 包含函数、依赖项和 churn 数据的所有文件 - 包含调用者和使用指标的完整函数统计信息 - 安全问题、模式和架构问题 - 重复代码检测和层级违规 - 建议和推荐 - 语言细分和文件夹结构 非常适合程序化分析、CI/CD 集成或自定义报告工具。 - **Markdown 报告** - 人类可读的格式化报告 - **纯文本报告** - 简单的文本格式 - **SVG 图片** - 导出依赖图可视化 - **PDF 文档** - 将依赖图导出为可打印的 PDF - **原始 JSON** - 简化的数据导出 分析完成后，点击顶部栏的“Export”按钮即可访问所有导出选项。 ## 支持的语言 CodeFlow 支持提取函数并分析以下语言的依赖项： | 语言 | 扩展名 | |----------|------------| | JavaScript | `.js`, `.jsx` | | TypeScript | `.ts`, `.tsx` | | HTML (内联脚本) | `.html`, `.htm`, `.xhtml` | | Python | `.py` | | Java | `.java` | | Go | `.go` | | Ruby | `.rb` | | PHP | `.php` | | Vue | `.vue` | | Svelte | `.svelte` | | Rust | `.rs` | | C | `.c`, `.h` | | C++ | `.cpp`, `.cc`, `.cxx`, `.hpp`, `.hh`, `.hxx` | | C# | `.cs` | | Swift | `.swift` | | Kotlin | `.kt`, `.kts` | | Scala | `.scala`, `.sc` | | Groovy | `.groovy`, `.gvy` | | Elixir | `.ex`, `.exs` | | Erlang | `.erl`, `.hrl` | | Haskell | `.hs`, `.lhs` | | Lua | `.lua` | | R | `.r`, `.R` | | Julia | `.jl` | | Dart | `.dart` | | Perl | `.pl`, `.pm` | | Shell | `.sh`, `.bash`, `.zsh`, `.fish` | | PowerShell | `.ps1`, `.psm1`, `.psd1` | | F# | `.fs`, `.fsi`, `.fsx` | | OCaml | `.ml`, `.mli` | | Clojure | `.clj`, `.cljs`, `.cljc` | | Elm | `.elm` | | VBA | `.vba`, `.bas`, `.cls`, `.xlsm`, `.xlsb`, `.xlam` | ## 可视化模式 | 模式 | 描述 | |------|-------------| | **Folder** | 按目录结构着色 | | **Layer** | 按架构层（UI、Services、Utils 等）着色 | | **Churn** | 按提交频率（热点）着色 | | **Blast** | 选中文件时按影响范围着色 | ## 键盘快捷键 | 按键 | 操作 | |-----|--------| | `Enter` | 分析仓库 | | `+` / `-` | 放大/缩小 | | `Escape` | 关闭弹窗 | ## API 限制 GitHub API 具有速率限制： - **无 token：** 60 次请求/小时 - **使用 Personal Access Token：** 5,000 次请求/小时 - **使用 GitHub App：** 每个安装 5,000 次请求/小时 ### 认证方式 #### Personal Access Token (PAT) 1. 创建一个具有 `repo` scope 的 [GitHub Personal Access Token](https://github.com/settings/tokens) 2. 将其粘贴到 Token 输入框中 3. 分析您的私有仓库 #### GitHub App 认证 对于团队和组织，GitHub App 提供了更好的安全性和更高的速率限制： 1. 创建一个具有仓库权限的 [GitHub App](https://github.com/settings/apps) 2. 将该 App 安装到您的组织或个人账户 3. 生成安装访问 token 4. 将 token 粘贴到 Token 输入框中 **GitHub App 的优势：** - 细粒度的权限控制 - 可按安装撤销访问权限 - 更高的速率限制（5,000 次请求/小时） - 审计日志和安全监控 - 无需共享个人凭证 对于较大的仓库或团队使用，我们建议使用 GitHub App 认证。 ## 架构 ``` ┌─────────────────────────────────────────────────┐ │ CodeFlow │ ├─────────────────────────────────────────────────┤ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ Parser │ │ GitHub │ │ D3 │ │ │ │ Module │ │ API │ │ Graph │ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ │ │ │ └──────────────┼──────────────┘ │ │ │ │ │ ┌────────▼────────┐ │ │ │ React App │ │ │ │ (Single File) │ │ │ └─────────────────┘ │ └─────────────────────────────────────────────────┘ ``` **零安装构建依赖。** 一切均运行自固定的 CDN： - React 18 - D3.js 7 - Babel（用于 JSX） ### 贡献点子 ## 常见问题 **问：它是如何在没有后端的情况下工作的？** **问：我的代码安全吗？** **问：我可以离线使用吗？** **问：为什么分析很慢？** **问：依赖分析的准确度如何？** ## 卡片样式库 以下所有示例均是由 [CodeFlow Card Action](./card/) 针对本仓库渲染的真实卡片。挑选一个并放置到您的 README 中吧。 ### `style: compact` — 默认 ### `style: compact` 搭配 `show-grade: false, show-score: false` 适用于您希望在公开 README 中展示数据而非字母等级的场景。卡片保持信息性 — 文件、函数、LOC、语言、测试 — 而不包含带有评判性的部分。 ### `accent` — 任意预设或 CSS 颜色 强调色会重新调整迷你图、链接和图钉的颜色。预设：`purple`（默认）、`teal`、`cyan`、`green`、`pink`、`blue`、`amber`、`red`。或者传入任何 CSS 颜色（例如 `#ff6b6b`）。 ### `style: row` — 状态栏条带 ### `style: minimal` — 单行文本 ### `style: hero` — 引人注目的渐变 `hero` 搭配 `show-grade: false`： ### `style: detailed` — 信息丰富 包含所有内容：等级、规模、语言细分、构成（连接数、测试、文件夹、函数统计、模式）、顶层文件夹、脆弱性、隐性成本。 `detailed` 搭配 `show-grade: false`： ## 许可证 MIT 许可证 — 随意使用。

标签：WebSocket, 代码可视化, 依赖分析, 前端架构, 后端开发, 数据可视化, 错误基检测, 静态代码分析