代码库知识图谱分析工具 - Understand Anything 多智能体代码理解与可视化

understand-anything-knowledge-graph by aradotso/trending-skills

557 周安装量

15 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/aradotso/trending-skills --skill understand-anything-knowledge-graph

AI/机器学习开发知识管理

🇨🇳中文介绍

理解万物 —— 代码库知识图谱

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

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

安装

通过 Claude Code 插件市场

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

从源码安装（开发）

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

核心技能 / 命令

命令	功能
`/understand`

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

4. 提交前审查差异影响

# 进行更改后：
/understand-diff

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

5. 解释特定文件

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

图谱存储在 .understand-anything/knowledge-graph.json。关键类型（来自 packages/core）：

// packages/core/src/types.ts

interface GraphNode {
  id: string;                    // 唯一标识符："file:src/auth/login.ts"
  type: "file" | "function" | "class" | "module";
  name: string;
  filePath: string;
  layer: ArchitectureLayer;      // "api" | "service" | "data" | "ui" | "utility"
  summary: string;               // LLM 生成的通俗易懂的英文描述
  code?: string;                 // 原始源代码片段
  language?: string;
  concepts?: LanguageConcept[];  // 例如："generics", "closures", "decorators"
  metadata?: Record<string, unknown>;
}

interface GraphEdge {
  id: string;
  source: string;                // 节点 id
  target: string;                // 节点 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";

以编程方式使用核心包

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

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

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

// 查找函数的所有调用者
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));

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

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

# 启动仪表板开发服务器（热重载）
pnpm dev:dashboard

# 构建生产版本
pnpm --filter @understand-anything/dashboard build

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

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

understand-anything-plugin/
├── .claude-plugin/          # 插件清单（由 Claude Code 读取）
├── agents/                  # 智能体定义（project-scanner, file-analyzer 等）
├── skills/                  # 技能定义（/understand, /understand-chat 等）
├── src/                     # 插件 TypeScript 源码
│   ├── context-builder.ts   # 从图谱构建 LLM 上下文
│   └── diff-analyzer.ts     # Git diff → 受影响的节点
├── packages/
│   ├── core/                # 分析引擎
│   │   ├── src/
│   │   │   ├── types.ts     # GraphNode, GraphEdge, KnowledgeGraph
│   │   │   ├── persistence.ts
│   │   │   ├── search.ts    # 模糊 + 语义搜索
│   │   │   ├── tours.ts     # 导览生成
│   │   │   ├── schema.ts    # Zod 验证模式
│   │   │   └── tree-sitter.ts
│   │   └── tests/
│   └── dashboard/           # React 仪表板应用
│       └── src/

重新运行 /understand 只会重新分析自上次运行以来发生更改的文件（基于存储在图谱元数据中的 mtime 和内容哈希）。对于大型单体仓库，这使得后续运行速度很快。

强制完全重新分析：

rm -rf .understand-anything/
/understand

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                                  # 带 HMR 的仪表板开发服务器

# 查看您的差异实际触及了架构中的哪些部分
/understand-diff

# 基于实际代码生成结构化的入职文档
/understand-onboard

/understand-chat GraphQL API 的所有入口点是什么？
/understand-explain src/graphql/resolvers/

理解不熟悉的模块

/understand-explain src/workers/queue-processor.ts
# 返回：摘要、关键函数、谁调用它、它调用什么、使用的概念

/understand 在大型仓库上超时

文件分析器最多同时运行 3 个工作线程。非常大的仓库（>5 万个文件）可能需要耐心。如果之前的运行被中断，请删除 .understand-anything/ 并重新运行。

仪表板无法打开

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

重大重构后图谱过时

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

pnpm install 因工作区错误而失败

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

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

# Fork，然后：
git checkout -b feature/my-feature
pnpm --filter @understand-anything/core test   # 必须通过
# 开启一个 PR —— 对于重大更改，请先提交一个 issue

许可证：MIT © Lum1104

🇺🇸English

Understand Anything — Codebase Knowledge Graph

Skill by ara.so — Daily 2026 Skills collection.

Understand Anything is a Claude Code plugin that runs a multi-agent pipeline over your project, builds a knowledge graph of every file, function, class, and dependency, and opens an interactive React dashboard for visual exploration. It produces plain-English summaries of every node so anyone — developer, PM, or designer — can understand the codebase.

Installation

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`	Run the full multi-agent analysis pipeline on the current project
`/understand-dashboard`	Open the interactive knowledge graph dashboard
`/understand-chat <question>`	Ask anything about the codebase in natural language
`/understand-diff`	Analyze impact of current uncommitted changes
`/understand-explain <path>`	Deep-dive explanation of a specific file or function
`/understand-onboard`	Generate an onboarding guide for new team members

Typical Workflow

1. Analyze a project

# Inside any project directory, in Claude Code:
/understand

This orchestrates 5 agents in sequence (with file-analyzers running up to 3 concurrent):

project-scanner — discovers files, detects languages/frameworks
file-analyzer — extracts functions, classes, imports; builds graph nodes and edges
architecture-analyzer — groups nodes into architectural layers (API, Service, Data, UI, Utility)
tour-builder — generates ordered learning tours
graph-reviewer — validates referential integrity

Output is saved to .understand-anything/knowledge-graph.json in your project root.

2. Open the dashboard

/understand-dashboard

The React + Vite dashboard opens in your browser. Features:

Graph view — React Flow canvas, color-coded by layer, zoom/pan
Node inspector — click any node for code, relationships, LLM summary
Search — fuzzy + semantic search across all nodes
Tours — guided walkthroughs ordered by dependency
Persona mode — toggle detail level (Junior Dev / PM / Power User)

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

Returns a list of affected nodes in the knowledge graph — shows ripple effects before you push.

5. Explain a specific file

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

Knowledge Graph Schema

The graph is stored at .understand-anything/knowledge-graph.json. Key types (from packages/core):

// packages/core/src/types.ts

interface GraphNode {
  id: string;                    // unique: "file:src/auth/login.ts"
  type: "file" | "function" | "class" | "module";
  name: string;
  filePath: string;
  layer: ArchitectureLayer;      // "api" | "service" | "data" | "ui" | "utility"
  summary: string;               // LLM-generated plain-English description
  code?: string;                 // raw source snippet
  language?: string;
  concepts?: LanguageConcept[];  // e.g. "generics", "closures", "decorators"
  metadata?: Record<string, unknown>;
}

interface GraphEdge {
  id: string;
  source: string;                // node id
  target: string;                // 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(`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

The dashboard is a Vite + React 18 app using:

React Flow — graph canvas rendering
Zustand — graph state management
TailwindCSS v4 — styling
Fuse.js — fuzzy search
web-tree-sitter — in-browser AST parsing
Dagre — automatic graph layout

Project Structure

understand-anything-plugin/
├── .claude-plugin/          # Plugin manifest (read by Claude Code)
├── agents/                  # Agent definitions (project-scanner, file-analyzer, etc.)
├── skills/                  # Skill definitions (/understand, /understand-chat, etc.)
├── src/                     # Plugin TypeScript source
│   ├── context-builder.ts   # Builds LLM context from the graph
│   └── diff-analyzer.ts     # 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 validation schemas
│   │   │   └── tree-sitter.ts
│   │   └── tests/
│   └── dashboard/           # React dashboard app
│       └── src/

Incremental Updates

Re-running /understand only re-analyzes files that changed since the last run (based on mtime and content hash stored in the graph metadata). For large monorepos this makes subsequent runs fast.

To force a full re-analysis:

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 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

The file-analyzer runs up to 3 workers concurrently. Very large repos (>50k files) may need patience. Delete .understand-anything/ and re-run if a previous run was interrupted.

Dashboard doesn't open

Run pnpm --filter @understand-anything/dashboard build first if working from source, then retry /understand-dashboard.

Stale graph after major refactor

Delete .understand-anything/knowledge-graph.json to force full re-analysis: rm .understand-anything/knowledge-graph.json && /understand

pnpm install fails with workspace errors

Ensure you are using pnpm v8+: pnpm --version. The project uses pnpm workspaces defined in pnpm-workspace.yaml.

Search returns no results

Confirm the graph was generated: cat .understand-anything/knowledge-graph.json | head -5. If empty or missing, run /understand first.

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

Weekly Installs

310

Repository

aradotso/trending-skills

GitHub Stars

First Seen

7 days ago

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode309

kimi-cli308

gemini-cli308

amp308

cline308

github-copilot308

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

106,200 周安装

代码库知识图谱分析工具 - Understand Anything 多智能体代码理解与可视化

🇨🇳中文介绍

理解万物 —— 代码库知识图谱

安装

通过 Claude Code 插件市场

从源码安装（开发）

核心技能 / 命令

相关 Skills

典型工作流程

1. 分析项目

2. 打开仪表板

3. 提问