sora16bit/codemap

## 目录 - [面临的问题](#the-problem) - [CodeMap 的功能](#what-codemap-does) - [快速开始](#quick-start) - [工作原理](#how-it-works) - [支持的语言](#supported-languages) - [状态与路线图](#status--roadmap) - [贡献](#contributing) - [License](#license) ## 面临的问题 你打开一个陌生的仓库想从中学习。面对成百上千个文件，却不知道从何开始。现有的工具都存在某种缺失： - **AI 聊天工具**（Cursor、Claude Code、DeepWiki）只能回答代码中的某个*点*——但**没有地图**。你只能了解到你提问的内容，整体架构永远无法在你脑海中拼凑完整。 - **可视化工具**（Sourcegraph、Madge）能为你提供一张地图——但那**只是一堆线条**。它们不会告诉你每个文件的作用，也不会告诉你从哪里开始。 因此你陷入了困境：你可以询问具体的树木，也可以盯着整片森林，但没有任何工具能为你指明一条**路径**。 ## CodeMap 的功能 通用 AI **负责回答你的问题**。而 CodeMap **负责绘制整个项目的地图——并为你指出路径的起点。** 粘贴一个公开的 GitHub URL。CodeMap 会解析源代码并为你提供： - **🗺️ 依赖关系图**——以交互式图表展示文件之间的导入关系。文件按目录分组到不同颜色的框中，让你一眼就能看出代码库的整体结构。 - **📍 从何处开始阅读**——每个文件都会被分类为**入口点**（执行开始的地方）、**基础设施**（被大量文件依赖——理解它们就能掌握整体）和**叶子节点**（独立的文件，可稍后阅读）。这正是经验丰富的开发者阅读陌生代码的方式：不是从第一行读到最后一行，而是遵循 概览 → 入口 → 核心 的顺序，且绝不盲目全读。 - **🏷️ 每个文件的可能属性**——根据文件名和路径推测出的单字角色（`Type definitions`、`Routing`、`Core logic`……），完全不需要 AI，也不会产生幻觉。当无法确定时，它会保持沉默，而不是给出错误的猜测。 - **📖 实际代码**——点击任意文件即可在全屏视图中阅读其源代码，同时旁边会保留地图和依赖关系，让你永远不会迷失位置。 以上所有功能均通过**机械方式构建——无需 AI、无需 API key、免费且快速。** AI 仅保留用于未来的可选解释层，通过你自己的 API key（BYOK）实现。 UI 支持 **8 种语言**（English、日本語、简体中文、Español、Français、Deutsch、Português、한국어）。 ## 快速开始 最快的方式是使用**[实时演示](https://codemap.sora16bit.com)**——无需安装。粘贴一个仓库（`owner/repo` 或完整的 `github.com/...` URL），然后点击 **Analyze**。试试 `sindresorhus/ky` 或 `cli/cli` 即可在真实的代码库中体验。 要在本地运行（Node.js 20+）： ``` git clone https://github.com/sora16bit/codemap.git cd codemap npm install npm run dev ``` 然后打开 。 ## 工作原理 ``` GitHub repo ──tar.gz (codeload, no auth)──▶ extract source files │ ▼ src/lib/analyze.ts (language dispatcher) ├─ JS/TS → ts-morph (accurate AST imports) ├─ Python → regex resolver └─ Go/Rust → regex resolver │ ▼ dependency graph ──▶ React Flow diagram + reading guide ``` - **Frontend：** Next.js 16 (App Router)、React Flow (`@xyflow/react`)、Tailwind CSS v4 - **获取：** 以 tarball 形式从 codeload 拉取公开仓库（无需身份验证），并提取源文件 - **分析：** `src/lib/analyze.ts` 按语言进行分发；支持的扩展名位于 `src/lib/languages.ts` (`SOURCE_EXT`) 中——添加新语言从此处开始 - **阅读指南：** `src/lib/reading-guide.ts` 纯粹根据导入次数推导入口/基础设施/叶子节点——无需 AI ## 支持的语言 | 语言 | 依赖分析 | 地图 · 阅读指南 · 角色提示 | |---|---|---| | JavaScript / TypeScript | ✅ AST (ts-morph) | ✅ | | Python | ✅ regex | ✅ | | Go | ✅ regex (module-aware) | ✅ | | Rust | ✅ regex (`mod` / `use crate::`) | ✅ | | 其他 (Java、C/C++、Ruby…) | — 可获取并映射 | ✅（无导入行） | ## 状态与路线图 | 功能 | 状态 | |---|---| | 带目录分组的依赖关系图 | ✅ 已发布 | | “从何处开始”指南（入口 / 基础设施 / 叶子节点） | ✅ 已发布 | | 文件角色提示（无需 AI） | ✅ 已发布 | | 带有地图/依赖导航的全屏代码阅读器 | ✅ 已发布 | | 8 种语言 UI | ✅ 已发布 | | 文件角色摘要——用一行说明文件的作用 (AI) | 🔜 已计划 (BYOK) | | 面向初学者的逐行解释——“如果删除这一行会导致什么崩溃” (AI) | 🔜 已计划 (BYOK) | AI 层将**立足于 AST 事实**（符号定义/使用的位置，import 解析的位置），从而确保解释不会产生幻觉——这对于旨在帮助学习者的工具至关重要。 ## 贡献 欢迎提交 Issue 和 PR。一个非常好的首次贡献是**添加一门新语言**：在 `src/lib/languages.ts` 中扩展 `SOURCE_EXT` 和分发器（Python/Go/Rust 是基于 regex 的参考示例）。 ## License [MIT](LICENSE)

标签：MITM代理, SOC Prime, 云安全监控, 代码可视化, 代码阅读辅助, 依赖图, 开发工具, 自动化攻击, 静态分析