# Lum1104/Understand-Anything Architecture: Monorepo, Core Engine, and Multi-Agent Pipeline

> Explore the Lum1104/Understand-Anything architecture: a monorepo featuring a core engine, React dashboard, and multi-agent pipeline for interactive knowledge graphs.

- Repository: [Yuxiang Lin/Understand-Anything](https://github.com/Lum1104/Understand-Anything)
- Tags: architecture
- Published: 2026-06-07

---

**Lum1104/Understand-Anything is a pnpm workspace monorepo that layers a browser-safe core engine, a React dashboard, and a TypeScript plugin-driven multi-agent pipeline to transform source code into an interactive knowledge graph.**

The Lum1104/Understand-Anything architecture is designed to bridge deterministic static analysis with large language model reasoning. According to the project source code, the repository is organized into three distinct layers that handle parsing, visualization, and orchestration. This design keeps structural graph generation reproducible while allowing LLM-generated semantics to enrich the final output.

## Monorepo Structure and Workspace Layout

The project is managed as a single monorepo using pnpm workspaces. It is divided into three primary packages that separate analysis logic from presentation and command orchestration.

### Core Engine (`packages/core`)

The core engine lives in `packages/core` and serves as the shared analysis library for the entire system. It wraps **web-tree-sitter** (WASM) for deterministic parsing and exposes sub-path exports such as `./search`, `./types`, and `./schema`. As noted in [`CLAUDE.md`](https://github.com/Lum1104/Understand-Anything/blob/main/CLAUDE.md), these exports are deliberately browser-safe so that the dashboard can import them without pulling in Node-only modules.

### Dashboard (`packages/dashboard`)

The dashboard is a React and TypeScript application located in `packages/dashboard` that consumes the knowledge graph produced by the core. Styled with TailwindCSS v4 around a dark-luxury theme, the interface uses a graph-first layout allocating roughly 75 percent of the viewport to the graph and 360 pixels to the sidebar. It renders nodes with React Flow and manages global state via Zustand.

### Plugin and Skill Layer (`understand-anything-plugin/src/`)

The plugin layer under `understand-anything-plugin/src/` defines CLI commands including `/understand`, `/understand-dashboard`, and `/understand-chat`. It also hosts the **agent pipeline** that automates codebase analysis, as implemented in the [`index.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/index.ts) export hub.

## Tree-Sitter and LLM Hybrid Analysis

Static analysis is handled by **web-tree-sitter**, which deterministically parses files into concrete syntax trees. From these trees the engine extracts structural facts such as imports, exports, class and function definitions, call sites, and inheritance, creating reproducible edges in the knowledge graph.

A large language model then consumes this parsed structure alongside the original source to generate semantic data. This includes plain-English summaries, tags, architectural layer assignments, business-domain mappings, guided tours, and language-concept callouts. This separation guarantees that the structural side remains deterministic while the semantic side captures developer intent.

## Multi-Agent Pipeline Architecture

The `/understand` command orchestrates several specialized agents in sequence, as documented in [`README.md`](https://github.com/Lum1104/Understand-Anything/blob/main/README.md):

1. **`project-scanner`** – Discovers files and detects languages or frameworks.
2. **`file-analyzer`** – Extracts functions, classes, and imports to build graph nodes and edges.
3. **`architecture-analyzer`** – Determines architectural layer assignments.
4. **`tour-builder`** – Generates guided learning tours.
5. **`graph-reviewer`** – Validates graph completeness and referential integrity.

Optionally, the pipeline can run a **`domain-analyzer`** to extract business domains, flows, and steps, and an **`article-analyzer`** to parse wiki articles into entities and claims. File analyzers execute in parallel with up to five concurrent workers and support incremental updates, re-analyzing only changed files since the last run.

## Key Files and Entry Points

Several files define the public surface of the Lum1104/Understand-Anything architecture:

- **[`understand-anything-plugin/src/index.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/src/index.ts)** – The export hub for all skill-building functions, including chat, diff, explain, and onboarding.
- **[`understand-anything-plugin/src/context-builder.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/src/context-builder.ts)** – Implements the LLM-ready context consumed by the `/understand-chat` and `/understand-explain` skills.
- **[`understand-anything-plugin/src/diff-analyzer.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/src/diff-analyzer.ts)** – Powers the `/understand-diff` command with change-impact analysis.
- **[`understand-anything-plugin/src/onboard-builder.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/src/onboard-builder.ts)** – Generates onboarding guides for new team members.
- **`packages/core/**`** – Houses tree-sitter integration, schema definitions, search utilities, and type persistence.
- **`packages/dashboard/**`** – Contains the React graph UI, theming logic, and Zustand state stores.
- **`scripts/generate-large-graph.mjs`** – A helper script to generate synthetic large knowledge graphs for performance testing.

## Building Chat Context and Running the Workspace

The plugin layer exposes utilities that downstream skills can import to prepare LLM prompts. In [`understand-anything-plugin/src/context-builder.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/src/context-builder.ts), the `buildChatContext` and `formatContextForPrompt` functions assemble file-specific context into a prompt-ready string:

```ts
// Example: building a chat context for the /understand-chat skill
import { buildChatContext, formatContextForPrompt } from
  '@understand-anything/core/context-builder';

async function getChatPrompt(filePath: string) {
  const ctx = await buildChatContext({ file: filePath });
  return formatContextForPrompt(ctx);
}

// Usage (in a plugin script)
const prompt = await getChatPrompt('src/auth/login.ts');
console.log('Prompt for LLM →', prompt);

```

To bootstrap the monorepo from the repository root, use the standard pnpm workspace workflow:

```bash

# Quick-start command sequence (run from the repo root)

pnpm install                               # install all workspace deps

pnpm --filter @understand-anything/core build   # compile the core engine

pnpm --filter @understand-anything/skill build   # compile the plugin

./understand-anything-plugin/src/index.ts   # (or invoke via CLI) /understand

```

## Summary

- Lum1104/Understand-Anything is a pnpm workspace monorepo split into core, dashboard, and plugin layers.
- The core engine in `packages/core` uses web-tree-sitter for deterministic parsing and exposes browser-safe sub-path exports.
- The dashboard in `packages/dashboard` renders the knowledge graph with React Flow and a TailwindCSS v4 dark-luxury theme.
- The plugin layer in `understand-anything-plugin/src/` runs a multi-agent pipeline that mixes parallel file analysis with LLM enrichment.
- Key agents include the project-scanner, file-analyzer, architecture-analyzer, tour-builder, and graph-reviewer, with optional domain and article analyzers.

## Frequently Asked Questions

### What is the architecture of Lum1104/Understand-Anything?

Lum1104/Understand-Anything follows a three-layer monorepo architecture built with pnpm workspaces. It combines a browser-safe core engine for tree-sitter parsing, a React dashboard for graph visualization, and a TypeScript plugin layer that orchestrates a multi-agent analysis pipeline.

### How does the tree-sitter and LLM hybrid work in Understand-Anything?

Web-tree-sitter deterministically extracts structural facts like imports and class definitions to build reproducible graph edges. A large language model then adds semantic data such as summaries, tags, and architectural assignments, ensuring deterministic structure while capturing developer intent.

### Which agents run in the Understand-Anything pipeline?

The standard pipeline runs five agents: project-scanner, file-analyzer, architecture-analyzer, tour-builder, and graph-reviewer. Two optional agents, domain-analyzer and article-analyzer, can augment the graph with business-domain mappings and wiki-derived entities.

### How is the core engine made safe for browser use?

The core package deliberately splits its public API into sub-path exports such as `./search`, `./types`, and `./schema`. This lets the dashboard import only browser-safe logic without bundling Node-only modules.