🚀 快速安装

复制以下命令并运行,立即安装此 Skill:

npx skills add https://skills.sh/aradotso/trending-skills/understand-anything-knowledge-graph

💡 提示:需要 Node.js 和 NPM

Understand Anything — 代码库知识图谱 (Codebase Knowledge Graph)

技能来自 ara.so — Daily 2026 Skills 合集

Understand Anything 是一个 Claude Code 插件,它在您的项目上运行多智能体流水线,构建每个文件、函数、类和依赖项的知识图谱,并打开一个用于可视化探索的交互式 React 仪表板。它为每个节点生成通俗易懂的摘要,使任何人——无论是开发人员、产品经理还是设计师——都能理解代码库。


安装 (Installation)

通过 Claude Code 插件市场 (Via Claude Code plugin marketplace)

/plugin marketplace add Lum1104/Understand-Anything
/plugin install understand-anything

从源码安装(开发)(From source – development)

git clone https://github.com/Lum1104/Understand-Anything
cd Understand-Anything
pnpm install
pnpm --filter @understand-anything/core build
pnpm --filter @understand-anything/skill build
pnpm --filter @understand-anything/dashboard build

核心技能 / 命令 (Core Skills / Commands)

命令 (Command) 功能 (What it does)
/understand 在当前项目上运行完整的多智能体分析流水线
/understand-dashboard 打开交互式知识图谱仪表板
/understand-chat <问题> 用自然语言询问关于代码库的任何问题
/understand-diff 分析当前未提交更改的影响
/understand-explain <路径> 深入解释特定的文件或函数
/understand-onboard 为新团队成员生成入职指南

典型工作流 (Typical Workflow)

1. 分析项目 (Analyze a project)

# 在任何项目目录中,在 Claude Code 内: (Inside any project directory, in Claude Code:)
/understand

这会按顺序编排 5 个智能体(文件分析器最多并发运行 3 个):

  1. project-scanner — 发现文件,检测语言/框架
  2. file-analyzer — 提取函数、类、导入;构建图谱节点和边
  3. architecture-analyzer — 将节点分组到架构层(API、Service、Data、UI、Utility)
  4. tour-builder — 生成有序的学习导览
  5. graph-reviewer — 验证引用完整性

输出保存在项目根目录的 .understand-anything/knowledge-graph.json 中。

2. 打开仪表板 (Open the dashboard)

/understand-dashboard

React + Vite 仪表板会在您的浏览器中打开。功能包括:

  • 图谱视图 (Graph view) — React Flow 画布,按层颜色编码,支持缩放/平移
  • 节点检查器 (Node inspector) — 点击任意节点可查看代码、关系、LLM 摘要
  • 搜索 (Search) — 跨所有节点进行模糊搜索和语义搜索
  • 导览 (Tours) — 按依赖关系排序的引导式演练
  • 角色模式 (Persona mode) — 切换详细程度(初级开发人员 / PM / 高级用户)

3. 提问 (Ask questions)

/understand-chat 这个项目中的认证是如何工作的? (How does authentication work in this project?)
/understand-chat 什么调用了支付服务? (What calls the payment service?)
/understand-chat 哪些文件被依赖最多? (Which files are most depended on?)

4. 提交前审查差异影响 (Review diff impact before committing)

# 更改后: (After making changes:)
/understand-diff

返回知识图谱中受影响节点的列表 — 在您推送之前显示连锁反应。

5. 解释特定文件 (Explain a specific file)

/understand-explain src/auth/login.ts
/understand-explain src/services/PaymentService.ts

知识图谱模式 (Knowledge Graph Schema)

图谱存储在 .understand-anything/knowledge-graph.json。关键类型(来自 packages/core):

// packages/core/src/types.ts

interface GraphNode {
  id: string;                    // 唯一标识,例如 "file:src/auth/login.ts" (unique)
  type: "file" | "function" | "class" | "module";
  name: string;
  filePath: string;
  layer: ArchitectureLayer;      // "api" | "service" | "data" | "ui" | "utility"
  summary: string;               // LLM 生成的通俗易懂的描述 (LLM-generated plain-English description)
  code?: string;                 // 原始源码片段 (raw source snippet)
  language?: string;
  concepts?: LanguageConcept[];  // 例如 "generics", "closures", "decorators" (e.g. "generics", "closures", "decorators")
  metadata?: Record<string, unknown>;
}

interface GraphEdge {
  id: string;
  source: string;                // 节点 id (node id)
  target: string;                // 节点 id (node id)
  type: "imports" | "calls" | "extends" | "implements" | "uses";
  label?: string;
}

interface KnowledgeGraph {
  version: string;
  generatedAt: string;
  projectRoot: string;
  nodes: GraphNode[];
  edges: GraphEdge[];
  tours: GuidedTour[];
}

type ArchitectureLayer = "api" | "service" | "data" | "ui" | "utility" | "unknown";

type LanguageConcept =
  | "generics"               // 泛型
  | "closures"              // 闭包
  | "decorators"            // 装饰器
  | "async-await"           // 异步/等待
  | "interfaces"            // 接口
  | "higher-order-functions" // 高阶函数
  | "dependency-injection"   // 依赖注入
  | "observers"             // 观察者
  | "iterators"             // 迭代器
  | "pattern-matching"      // 模式匹配
  | "monads"                // 单子
  | "currying";              // 柯里化

以编程方式使用核心包 (Working with the Core Package Programmatically)

import { loadKnowledgeGraph, searchGraph, buildTour } from "@understand-anything/core";

// 加载持久化的图谱 (Load the persisted graph)
const graph = await loadKnowledgeGraph(".understand-anything/knowledge-graph.json");

// 跨所有节点进行模糊搜索 (Fuzzy search across all nodes)
const results = searchGraph(graph, "payment processing");
console.log(results.map(r => `${r.type}:${r.name} (${r.filePath})`));

// 查找某个函数的所有调用者 (Find all callers of a function)
const paymentNode = graph.nodes.find(n => n.name === "processPayment");
const callers = graph.edges
  .filter(e => e.target === paymentNode?.id && e.type === "calls")
  .map(e => graph.nodes.find(n => n.id === e.source));

// 获取服务层的所有节点 (Get all nodes in the service layer)
const serviceNodes = graph.nodes.filter(n => n.layer === "service");

// 从特定节点开始构建引导式导览 (Build a guided tour starting from a specific node)
const tour = buildTour(graph, { startNodeId: "file:src/index.ts" });
tour.steps.forEach((step, i) => {
  console.log(`${i + 1} 步 (Step ${i + 1}): ${step.node.name}${step.node.summary}`);
});

仪表板开发 (Dashboard Development)

# 启动仪表板开发服务器(热重载)(Start the dashboard dev server - hot reload)
pnpm dev:dashboard

# 生产环境构建 (Build for production)
pnpm --filter @understand-anything/dashboard build

仪表板是一个使用以下技术的 Vite + React 18 应用:

  • React Flow — 图谱画布渲染
  • Zustand — 图谱状态管理
  • TailwindCSS v4 — 样式
  • Fuse.js — 模糊搜索
  • web-tree-sitter — 浏览器内 AST 解析
  • Dagre — 自动图谱布局

项目结构 (Project Structure)

understand-anything-plugin/
├── .claude-plugin/          # 插件清单(由 Claude Code 读取)(Plugin manifest - read by Claude Code)
├── agents/                  # 智能体定义(project-scanner, file-analyzer 等)(Agent definitions - project-scanner, file-analyzer, etc.)
├── skills/                  # 技能定义(/understand, /understand-chat 等)(Skill definitions - /understand, /understand-chat, etc.)
├── src/                     # 插件 TypeScript 源码 (Plugin TypeScript source)
│   ├── context-builder.ts   # 从图谱构建 LLM 上下文 (Builds LLM context from the graph)
│   └── diff-analyzer.ts     # Git diff → 受影响节点 (Git diff → affected nodes)
├── packages/
│   ├── core/                # 分析引擎 (Analysis engine)
│   │   ├── src/
│   │   │   ├── types.ts     # GraphNode, GraphEdge, KnowledgeGraph
│   │   │   ├── persistence.ts
│   │   │   ├── search.ts    # 模糊 + 语义搜索 (Fuzzy + semantic search)
│   │   │   ├── tours.ts     # 导览生成 (Tour generation)
│   │   │   ├── schema.ts    # Zod 验证模式 (Zod validation schemas)
│   │   │   └── tree-sitter.ts
│   │   └── tests/
│   └── dashboard/           # React 仪表板应用 (React dashboard app)
│       └── src/

增量更新 (Incremental Updates)

重新运行 /understand 仅会重新分析自上次运行以来发生更改的文件(基于存储在图谱元数据中的修改时间和内容哈希)。对于大型 monorepo,这使得后续运行速度很快。

要强制进行全面重新分析:

rm -rf .understand-anything/
/understand

开发命令 (Development Commands)

pnpm install                                        # 安装所有依赖 (Install all dependencies)
pnpm --filter @understand-anything/core build       # 构建核心包 (Build core package)
pnpm --filter @understand-anything/core test        # 运行核心测试 (Run core tests)
pnpm --filter @understand-anything/skill build      # 构建插件包 (Build plugin package)
pnpm --filter @understand-anything/skill test       # 运行插件测试 (Run plugin tests)
pnpm --filter @understand-anything/dashboard build  # 构建仪表板 (Build dashboard)
pnpm dev:dashboard                                  # 带热模块替换的仪表板开发服务器 (Dashboard dev server with HMR)

常见模式 (Common Patterns)

代码审查前 (Before a code review)

# 查看您的差异在架构中实际影响的内容 (See what your diff actually touches in the architecture)
/understand-diff

新工程师入职 (Onboarding a new engineer)

# 基于真实代码生成结构化的入职文档 (Generate a structured onboarding doc grounded in the real code)
/understand-onboard

研究功能领域 (Researching a feature area)

/understand-chat GraphQL API 的所有入口点是什么? (What are all the entry points for the GraphQL API?)
/understand-explain src/graphql/resolvers/

理解不熟悉的模块 (Understanding an unfamiliar module)

/understand-explain src/workers/queue-processor.ts
# 返回:摘要、关键函数、谁调用它、它调用谁、使用的概念 (Returns: summary, key functions, what calls it, what it calls, concepts used)

故障排除 (Troubleshooting)

/understand 在大型仓库中超时 (times out on large repos)

  • 文件分析器最多并发运行 3 个工作进程。非常大的仓库(>5 万个文件)可能需要耐心等待。如果之前的运行被中断,请删除 .understand-anything/ 并重新运行。

仪表板未打开 (Dashboard doesn’t open)

  • 如果从源码工作,请先运行 pnpm --filter @understand-anything/dashboard build,然后重试 /understand-dashboard

重大重构后图谱过时 (Stale graph after major refactor)

  • 删除 .understand-anything/knowledge-graph.json 以强制完全重新分析:rm .understand-anything/knowledge-graph.json && /understand

pnpm install 因工作区错误而失败 (fails with workspace errors)

  • 确保您使用的是 pnpm v8+:pnpm --version。该项目使用 pnpm-workspace.yaml 中定义的 pnpm 工作区。

搜索无结果 (Search returns no results)

  • 确认图谱已生成:cat .understand-anything/knowledge-graph.json | head -5。如果为空或缺失,请先运行 /understand

贡献 (Contributing)

# 复刻,然后: (Fork, then:)
git checkout -b feature/my-feature
pnpm --filter @understand-anything/core test   # 必须通过 (must pass)
# 打开拉取请求 — 对于重大更改,请先提交问题 (open a PR — file an issue first for major changes)

许可证:MIT © Lum1104

📄 原始文档

完整文档(英文):

https://skills.sh/aradotso/trending-skills/understand-anything-knowledge-graph

💡 提示:点击上方链接查看 skills.sh 原始英文文档,方便对照翻译。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。