Open Finapp
Development

Codebase Graph

Interactive knowledge graph of the Finapp codebase generated by the understand-anything plugin.

What It Is

understand-anything is a Claude Code plugin that analyzes the codebase and produces an interactive knowledge graph. It maps every file to an architectural layer, extracts relationships between components, and generates a guided tour of the project.

Live dashboard: finapp-graph.ilko.me

Commands

CommandDescription
/understandRun analysis - incremental if a graph exists, full if not
/understand --fullForce a complete rebuild from scratch
/understand --reviewRun LLM graph reviewer on the existing graph (no re-analysis)
/understand --auto-updateEnable automatic graph updates on every commit
/understand --no-auto-updateDisable automatic graph updates
/understand --language ruGenerate all text in the given language (en, ru, zh, ja, ko, etc.)
/understand /path/to/dirAnalyze a different directory instead of the current one

Options can be combined: /understand --full --language ru

How It Works

The command runs through 7 phases:

PhaseWhat happens
0Pre-flight - detects incremental vs full rebuild
0.5Reads .understandignore exclusion rules
1Scans all project files
1.5Groups files into semantic batches
2Analyzes each batch with LLM (5 concurrent subagents)
3-5Merges batches, assembles graph, reviews
6-7Builds tour steps, writes output files

Output goes to .understand-anything/:

  • knowledge-graph.json - the full graph (nodes, edges, layers, tour)
  • meta.json - commit hash and timestamp of last analysis
  • fingerprints.json - file hashes for incremental updates

Exclusions

.understand-anything/.understandignore controls what gets excluded. It uses gitignore syntax. Built-in defaults always exclude node_modules/, dist/, *.lock, images, etc.

Current active exclusions:

.playwright-mcp        # Playwright MCP screenshots
docs/                  # Docs site (separate project)
*.test.*               # Test files
*.spec.*               # Spec files
*.snap                 # Snapshots

Uncomment or add patterns to exclude more, then re-run /understand.

Incremental Updates

If a graph already exists, /understand checks the current git commit against meta.json:

  • Same commit - asks whether to rebuild or skip
  • Changed files - re-analyzes only the changed files, merges into existing graph
  • --full flag - forces a complete rebuild from scratch

Updating the Dashboard

After running /understand, redeploy the dashboard:

# 1. Copy the updated graph to the dashboard's public directory
cp .understand-anything/knowledge-graph.json \
   ~/.claude/plugins/cache/understand-anything/understand-anything/2.7.5/packages/dashboard/public/
cp .understand-anything/meta.json \
   ~/.claude/plugins/cache/understand-anything/understand-anything/2.7.5/packages/dashboard/public/

# 2. Build (demo mode - serves graph from same origin)
cd ~/.claude/plugins/cache/understand-anything/understand-anything/2.7.5/packages/dashboard
VITE_DEMO_MODE=true pnpm exec vite build --config vite.config.demo.ts --base /

# 3. Deploy
cd dist && vercel deploy --prod --yes

Dashboard Features

The dashboard has three views:

  • Knowledge Graph - full file relationship graph with layer coloring, filtering by layer or edge type
  • Domain Graph - business domain flows (if domain analysis was run)
  • Architecture Layers - files grouped by layer with summaries

From any node you can open the source file inline, see its imports and dependents, and follow the guided tour.

Architecture Layers

Files are assigned to one of 9 layers:

LayerDescription
EntryApp entry points and Nuxt config
ConfigBuild config, ESLint, TypeScript config
BackendSupabase Postgres schema + RLS + PowerSync sync rules (app/supabase/, app/powersync/)
AuthSupabase Auth (email/password); two-layer route guard
StorePinia stores (categories, wallets, trns, rates, settings)
ComposablesVue composables and utilities
ComponentsVue components grouped by feature
PagesNuxt pages and layouts
TypesShared TypeScript types and validators