d ๐Ÿ”น 44e1fee31b fix(dashboard): O(N+K) per-layer aggregations, kill quadratic Array.includes (#102)
Three hot paths in the dashboard ran `layer.nodeIds.includes(node.id)`,
which is O(K) per check. Combined with their enclosing loops they
collectively spent quadratic time per render of the overview / per
filter recompute / per node-selection event. On the 4.8 MB knowledge
graph reported in #102, the overview render alone took ~470 ms of
synchronous main-thread work before ELK / React Flow ran โ€” long
enough for the page to register as unresponsive.

Fix: precompute two indexes once when a graph is loaded.

  - `nodesById: Map<string, GraphNode>`
  - `nodeIdToLayerId: Map<string, string>`  (first layer wins, matching
    prior `findNodeLayer` semantics)

Both live in `useDashboardStore` and are rebuilt by `setGraph`. The
three call sites:

1. `useOverviewGraph` (GraphView.tsx) โ€” per-layer complexity aggregation
   moved into a new `computeLayerStats(layer, nodesById)` helper that
   walks `layer.nodeIds` instead of filtering all `graph.nodes`. Search
   match counts now read straight from `nodeIdToLayerId` instead of
   rebuilding a layer index on every searchResults change.

2. `filterNodes` (utils/filters.ts) โ€” takes `nodeIdToLayerId` instead of
   `Layer[]`; the layer-membership check is one Map.get() per node.
   Updated `ExportMenu.tsx` caller to pass the store-level index.

3. `findNodeLayer` (store.ts) โ€” replaced with `nodeIdToLayerId.get()` at
   the four call sites. `navigateTourToLayer` helper updated to take the
   index rather than the whole graph.

Behavior is preserved exactly:

  - "First layer wins" semantics for nodes that appear in multiple
    layers (#102 schema doesn't forbid this).
  - 30 % aggregate-complexity threshold pinned by tests.
  - Layer filter that excludes layer-less orphans, but ungated when
    no layers are selected.

Verified locally:

  Bench (`scripts/benchmark-aggregations.mjs`, node 22):
    100 layers ร— 200 nodes (#102 shape):  475 ms โ†’ 2 ms  (232ร— faster)
    50  layers ร— 200 nodes:               116 ms โ†’ 0.6 ms (190ร— faster)
    30  layers ร— 100 nodes:                12 ms โ†’ 0.2 ms (63ร—  faster)

  Tests: `pnpm --filter @understand-anything/dashboard test`
    24 โ†’ 41 pass (+17 new tests across `layerStats.test.ts` and
    `filters.test.ts`, including a #102 perf-regression guard at
    100 layers ร— 100 nodes < 50 ms).
  `pnpm --filter @understand-anything/core test` โ€” 654 / 654 pass.
  `pnpm --filter @understand-anything/dashboard exec tsc -b` โ€” clean.
  `pnpm --filter @understand-anything/dashboard build` โ€” clean.

Pre-existing on master and not from this branch: `pnpm lint` errors
out with "eslint: command not found" โ€” `eslint` isn't installed by any
package and the root `lint` script is bare `eslint .`. Out of scope here.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
44e1fee31b ยท 2026-05-04 11:49:20 +08:00
441 Commits
2026-05-03 18:16:02 +08:00
2026-05-03 18:16:02 +08:00
2026-05-03 18:16:02 +08:00
2026-04-25 20:49:48 +08:00
2026-04-24 12:11:05 +08:00
2026-03-17 14:54:57 +08:00

Understand Anything

Turn any codebase, knowledge base, or docs into an interactive knowledge graph you can explore, search, and ask questions about.
Works with Claude Code, Codex, Cursor, Copilot, Gemini CLI, and more.

English | ็ฎ€ไฝ“ไธญๆ–‡ | ็น้ซ”ไธญๆ–‡ | ๆ—ฅๆœฌ่ชž | ํ•œ๊ตญ์–ด | Espaรฑol | Tรผrkรงe

Star History Rank

Quick Start License: MIT Claude Code Codex Copilot Copilot CLI Gemini CLI OpenCode Homepage Live Demo Discord

Understand Anything โ€” Turn any codebase into an interactive knowledge graph


Tip

A huge thank you to the community! The support for Understand-Anything has been incredible. If this tool saves you a few minutes of digging through complexity, that's all I wanted. ๐Ÿš€

You just joined a new team. The codebase is 200,000 lines of code. Where do you even start?

Understand Anything is a Claude Code Plugin that analyzes your project with a multi-agent pipeline, builds a knowledge graph of every file, function, class, and dependency, then gives you an interactive dashboard to explore it all visually. Stop reading code blind. Start seeing the big picture.

Graphs that teach > graphs that impress.


โœจ Features

Note

Want to skip the reading? Try the live demo in our homepage โ€” a fully interactive dashboard you can pan, zoom, search, and explore right in your browser.

Explore the structural graph

Navigate your codebase as an interactive knowledge graph โ€” every file, function, and class is a node you can click, search, and explore. Select any node to see plain-English summaries, relationships, and guided tours.

Structural graph โ€” explore files, functions, classes and their relationships

Understand business logic

Switch to the domain view and see how your code maps to real business processes โ€” domains, flows, and steps laid out as a horizontal graph.

Domain graph โ€” business domains, flows, and process steps

Analyze knowledge bases

Point /understand-knowledge at a Karpathy-pattern LLM wiki and get a force-directed knowledge graph with community clustering. The deterministic parser extracts wikilinks and categories from index.md, then LLM agents discover implicit relationships, extract entities, and surface claims โ€” turning your wiki into a navigable graph of interconnected ideas.

๐Ÿงญ Guided Tours

Auto-generated walkthroughs of the architecture, ordered by dependency. Learn the codebase in the right order.

Find anything by name or by meaning. Search "which parts handle auth?" and get relevant results across the graph.

๐Ÿ“Š Diff Impact Analysis

See which parts of the system your changes affect before you commit. Understand ripple effects across the codebase.

๐ŸŽญ Persona-Adaptive UI

The dashboard adjusts its detail level based on who you are โ€” junior dev, PM, or power user.

๐Ÿ—๏ธ Layer Visualization

Automatic grouping by architectural layer โ€” API, Service, Data, UI, Utility โ€” with color-coded legend.

๐Ÿ“š Language Concepts

12 programming patterns (generics, closures, decorators, etc.) explained in context wherever they appear.


๐Ÿš€ Quick Start

1. Install the plugin

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

2. Analyze your codebase

/understand

A multi-agent pipeline scans your project, extracts every file, function, class, and dependency, then builds a knowledge graph saved to .understand-anything/knowledge-graph.json.

3. Explore the dashboard

/understand-dashboard

An interactive web dashboard opens with your codebase visualized as a graph โ€” color-coded by architectural layer, searchable, and clickable. Select any node to see its code, relationships, and a plain-English explanation.

4. Keep learning

# Ask anything about the codebase
/understand-chat How does the payment flow work?

# Analyze impact of your current changes
/understand-diff

# Deep-dive into a specific file or function
/understand-explain src/auth/login.ts

# Generate an onboarding guide for new team members
/understand-onboard

# Extract business domain knowledge (domains, flows, steps)
/understand-domain

# Analyze a Karpathy-pattern LLM wiki knowledge base
/understand-knowledge ~/path/to/wiki

๐ŸŒ Multi-Platform Installation

Understand-Anything works across multiple AI coding platforms.

Claude Code (Native)

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

Codex

Tell Codex:

Fetch and follow instructions from https://raw.githubusercontent.com/Lum1104/Understand-Anything/refs/heads/main/.codex/INSTALL.md

OpenCode

Tell OpenCode:

Fetch and follow instructions from https://raw.githubusercontent.com/Lum1104/Understand-Anything/refs/heads/main/.opencode/INSTALL.md

OpenClaw

Tell OpenClaw:

Fetch and follow instructions from https://raw.githubusercontent.com/Lum1104/Understand-Anything/refs/heads/main/.openclaw/INSTALL.md

Cursor

Cursor auto-discovers the plugin via .cursor-plugin/plugin.json when this repo is cloned. No manual installation needed โ€” just clone and open in Cursor.

VS Code + GitHub Copilot

VS Code with GitHub Copilot (v1.108+) auto-discovers the plugin via .copilot-plugin/plugin.json when this repo is cloned. No manual installation needed โ€” just clone and open in VS Code.

For personal skills (available across all projects), tell GitHub Copilot:

Fetch and follow instructions from https://raw.githubusercontent.com/Lum1104/Understand-Anything/refs/heads/main/.vscode/INSTALL.md

Copilot CLI

copilot plugin install Lum1104/Understand-Anything:understand-anything-plugin

Antigravity

Tell Antigravity:

Fetch and follow instructions from https://raw.githubusercontent.com/Lum1104/Understand-Anything/refs/heads/main/.antigravity/INSTALL.md

Gemini CLI

Tell Gemini CLI:

Fetch and follow instructions from https://raw.githubusercontent.com/Lum1104/Understand-Anything/refs/heads/main/.gemini/INSTALL.md

Pi Agent

Tell Pi Agent:

Fetch and follow instructions from https://raw.githubusercontent.com/Lum1104/Understand-Anything/refs/heads/main/.pi/INSTALL.md

Platform Compatibility

Platform Status Install Method
Claude Code โœ… Native Plugin marketplace
Codex โœ… Supported AI-driven install
OpenCode โœ… Supported AI-driven install
OpenClaw โœ… Supported AI-driven install
Cursor โœ… Supported Auto-discovery
VS Code + GitHub Copilot โœ… Supported Auto-discovery
Copilot CLI โœ… Supported Plugin install
Antigravity โœ… Supported AI-driven install
Gemini CLI โœ… Supported AI-driven install
Pi Agent โœ… Supported AI-driven install

๐Ÿ“ฆ Share the Graph with Your Team

The graph is just JSON โ€” commit it once, and teammates skip the pipeline. Good for onboarding, PR reviews, and docs-as-code.

Example: GoogleCloudPlatform/microservices-demo (fork) โ€” Go / Java / Python / Node reference with a committed graph.

What to commit: everything in .understand-anything/ except intermediate/ and diff-overlay.json (those are local scratch).

.understand-anything/intermediate/
.understand-anything/diff-overlay.json

Keep it fresh: enable /understand --auto-update โ€” a post-commit hook incrementally patches the graph so each commit lands with a matching graph. Or re-run /understand manually before releases.

Large graphs (10 MB+): track with git-lfs.

git lfs install
git lfs track ".understand-anything/*.json"
git add .gitattributes .understand-anything/

๐Ÿ”ง Under the Hood

Multi-Agent Pipeline

The /understand command orchestrates 5 specialized agents, and /understand-domain adds a 6th:

Agent Role
project-scanner Discover files, detect languages and frameworks
file-analyzer Extract functions, classes, imports; produce graph nodes and edges
architecture-analyzer Identify architectural layers
tour-builder Generate guided learning tours
graph-reviewer Validate graph completeness and referential integrity (runs inline by default; use --review for full LLM review)
domain-analyzer Extract business domains, flows, and process steps (used by /understand-domain)
article-analyzer Extract entities, claims, and implicit relationships from wiki articles (used by /understand-knowledge)

File analyzers run in parallel (up to 5 concurrent, 20-30 files per batch). Supports incremental updates โ€” only re-analyzes files that changed since the last run.


๐Ÿค Contributing

Contributions are welcome! Here's how to get started:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/my-feature)
  3. Run the tests (pnpm --filter @understand-anything/core test)
  4. Commit your changes and open a pull request

Please open an issue first for major changes so we can discuss the approach.


Stop reading code blind. Start understanding everything.

Star History

Star History Chart

MIT License ยฉ Lum1104

Languages
TypeScript 71.1%
JavaScript 15.8%
Python 9.2%
Astro 2.2%
PowerShell 0.6%
Other 1%