diff --git a/README.md b/README.md index e16ed8e..b888979 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,10 @@ Turn any codebase into an interactive knowledge graph you can explore, search, and ask questions about.

+

+ English | 中文 +

+

Quick Start License: MIT diff --git a/README.zh-CN.md b/README.zh-CN.md new file mode 100644 index 0000000..766b28a --- /dev/null +++ b/README.zh-CN.md @@ -0,0 +1,274 @@ +

Understand Anything

+

+ 将任意代码库转化为可探索、可搜索、可对话的交互式知识图谱 +

+ +

+ Quick Start + License: MIT + Claude Code Plugin + Homepage +

+ +

+ Understand Anything — 将任何代码库转换为交互式知识图谱 +

+ +--- + +**当你刚加入一个新团队,面对 20 万行代码,你从哪里开始?** + +Understand Anything 是一个基于 [Claude Code](https://docs.anthropic.com/en/docs/claude-code) 的插件,通过多智能体(multi-agent)架构分析你的项目,构建包含文件、函数、类以及依赖关系的知识图谱,并提供一个可视化交互界面,帮助你理解整个系统。不再“盲读代码”,而是从全局视角理解系统结构。 + +--- + +## 🤔 为什么需要它? + +阅读代码已经很难,理解整个系统更难。文档往往过时,上手周期长达数周, 新功能开发像“考古” 。 + +Understand Anything 通过结合 **大语言模型(LLM)**与**静态代码分析**去生成一个**动态、可探索的代码知识地图** — 并提供自然语言解释。 + +--- + +## 🎯 适用人群 + + + + + + + +
+

👩‍💻 入门级开发者

+

不再被陌生代码淹没。通过结构化引导逐步理解系统架构,每个函数和类都有简明易懂的解释。

+
+

📋 产品经理 & 设计师

+

无需阅读代码,也能理解系统逻辑。比如直接提问:“认证流程是怎么实现的?” 便可获得基于实际代码库的清晰答案。

+
+

🤖 AI协同开发者

+

让你的 AI 工具深入了解你的项目。在代码审查之前使用/understand-diff,在深入任何模块时使用/understand-explain,或在架构分析中使用 /understand-chat

+
+ +--- + +## 🚀 快速开始 + +### 1. 安装插件 + +```bash +/plugin marketplace add Lum1104/Understand-Anything +/plugin install understand-anything +``` + +### 2. 分析你的代码库 + +```bash +/understand +``` + +多智能体(multi-agent)架构会:扫描你的项目,提取函数 / 类 / 依赖,构建知识图谱保存至`.understand-anything/knowledge-graph.json`. + +### 3. 打开数据看板 + +```bash +/understand-dashboard +``` + +打开交互式网页数据看板,您的代码库将以图表形式呈现 — 按架构层级进行颜色编码,支持搜索和点击。选择任意节点即可查看其代码、关系以及简明易懂的解释。 + +### 4. 深度使用 + +```bash +# 询问任意代码库的问题 +/understand-chat How does the payment flow work? + +# 分析当前修改的影响 +/understand-diff + +# 深入理解某个文件 +/understand-explain src/auth/login.ts + +# 为新团队成员生成指南 +/understand-onboard +``` + +--- + +## 🌐 多平台支持 + +Understand-Anything 可在多个 AI 编码平台上运行。 + +### Claude Code (原生支持) + +```bash +/plugin marketplace add Lum1104/Understand-Anything +/plugin install understand-anything +``` + +### Codex + +告诉 Codex: +``` +Fetch and follow instructions from https://raw.githubusercontent.com/Lum1104/Understand-Anything/refs/heads/main/.codex/INSTALL.md +``` + +### OpenCode + +添加到你的 `opencode.json` 文件: +```json +{ + "plugin": ["understand-anything@git+https://github.com/Lum1104/Understand-Anything.git"] +} +``` + +### OpenClaw + +告诉 OpenClaw: +``` +Fetch and follow instructions from https://raw.githubusercontent.com/Lum1104/Understand-Anything/refs/heads/main/.openclaw/INSTALL.md +``` + +### Cursor + +克隆此仓库后,Cursor 会自动通过 `.cursor-plugin/plugin.json`文件发现插件。无需手动安装 — 只需克隆并在 Cursor 中打开即可。 + +### 多平台兼容 + +| 平台 | 状态 | 安装方式 | +|----------|--------|----------------| +| Claude Code | ✅ Native | 插件市场 | +| Codex | ✅ 支持 | AI驱动安装 | +| OpenCode | ✅ 支持 | 插件配置 | +| OpenClaw | ✅ 支持 | AI驱动安装 | +| Cursor | ✅ 支持 | 自动发现 | + +--- + +## ✨ 核心功能 + +

+ Dashboard Screenshot +

+ + + + + + + + + + + + + + + + + + +
+

🗺️ 交互式知识图谱

+

使用 React Flow 可视化文件、函数、类及其关系。点击任意节点即可查看其代码和连接。

+
+

💬 简明语言解释

+

LLM 自动生成解释,让非技术人员也能理解代码。

+
+

🧭 引导式学习

+

自动生成架构学习路径,按依赖顺序学习。

+
+

🔍 语义搜索

+

支持模糊搜索 + 语义搜索,例如搜索“哪些部分处理身份验证?”即可在整个图中获取相关结果。

+
+

📊 变更影响分析

+

提交更改前,查看更改会影响系统的哪些部分。了解更改对整个代码库的连锁反应。

+
+

🎭 用户角色自适应 UI

+

根据用户类型(初级开发 / 项目经理 / 高级用户)调整其详细程度。

+
+

🏗️ 层级可视化

+

按架构层级自动分组 — API,服务,数据,UI, 系统工具 — 并附有颜色编码图例。

+
+

📚 语言概念

+

12 种编程模式(泛型、闭包、装饰器等)将在上下文中逐一解释。

+
+ +--- + +## 🔧 技术原理 + +### 多智能体架构 + +`/understand` 命令调用 5 个 agent: + +| Agent | 职责 | +|-------|------| +| `project-scanner` | 扫描项目文件,检测语言和框架 | +| `file-analyzer` | 提取代码结构(函数、类和导入),生成图节点和边 | +| `architecture-analyzer` | 识别架构层 | +| `tour-builder` | 生成引导式学习路径 | +| `graph-reviewer` | 验证图的完整性和引用完整性 | + +文件分析器并行运行(最多 3 个并发)。支持增量更新 — 仅重新分析自上次运行以来发生更改的文件。 + +### 项目结构 + +``` +understand-anything-plugin/ + .claude-plugin/ — 插件清单 + agents/ — 专业 AI 智能体 + skills/ — Skill 定义 (/understand, /understand-chat, etc.) + src/ — TypeScript 源代码 (context-builder, diff-analyzer, etc.) + packages/ + core/ — 分析引擎 (types, persistence, tree-sitter, search, schema, tours) + dashboard/ — React + TypeScript 网页数据看板 +``` + +### 技术栈 + +TypeScript, pnpm workspaces, React 18, Vite, TailwindCSS v4, React Flow, Zustand, web-tree-sitter, Fuse.js, Zod, Dagre + +### 开发命令 + +| 命令 | 描述 | +|---------|-------------| +| `pnpm install` | 安装所有依赖项 | +| `pnpm --filter @understand-anything/core build` | 构建核心包 | +| `pnpm --filter @understand-anything/core test` | 运行核心测试 | +| `pnpm --filter @understand-anything/skill build` | 构建插件包 | +| `pnpm --filter @understand-anything/skill test` | 运行插件测试 | +| `pnpm --filter @understand-anything/dashboard build` | 构建数据看板 | +| `pnpm dev:dashboard` | 启动数据看板开发服务器 | + +--- + +## 🤝 贡献 + +欢迎贡献!以下是贡献指南: + +1. Fork 项目 +2. 新建分支 (`git checkout -b feature/my-feature`) +3. 运行测试 (`pnpm --filter @understand-anything/core test`) +4. 提交更改并创建一个PR请求 + +对于重大变更,请先提交 issue,以便我们讨论解决方案。 + +--- + +

+ 不再盲读代码,而是理解整个系统 +

+ +## Star 历史记录 + + + + + + Star History Chart + + + +

+ MIT 许可证 © Lum1104 +