Codebase Architecture Visualizer
Instant architecture diagrams for 13 frameworks — no API key needed.
Available on VS Code, Cursor, VSCodium, and any editor using the Open VSX registry.
Codebase Viz analyzes your project statically and renders three interactive diagrams inside your editor: route hierarchy with HTTP methods, component trees, and DB schema with FK relations.
🖼️ How It Looks
Routes & Components — at a glance
Switch tabs once and see every route, every component, with SSR/CSR/ISR/SSG labels colour-coded.
Mouse wheel to zoom, click and drag to pan — explore freely.
Data Flow — four views, one click
Toggle between All / FK Relations / Page Queries / Server Actions to isolate what you need.
The right sidebar shows every column, FK, and which routes/actions query the table.
Control everything from the sidebar — analyze, re-analyze, open the viewer, export diagrams, and manage your API key.
🌐 Supported Frameworks
| Framework |
Level |
Routes |
Components |
DB |
| Next.js App Router |
L3 |
✅ SSR/SSG/ISR/CSR · .js/.jsx/.tsx |
✅ import graph |
✅ Supabase · Prisma · Drizzle · TypeORM |
| NestJS |
L2 |
✅ GET/POST labels · template literals |
✅ Controllers · Services · Modules |
✅ TypeORM entities + FK relations |
| Django |
L2 |
✅ CBV/FBV · re_path regex |
✅ View / ViewSet classes |
✅ models.Model + nullable/FK/db_table |
| FastAPI |
L2 |
✅ GET/POST labels · relative imports |
✅ Pydantic schemas |
✅ SQLAlchemy + nullable/type/tablename |
| Spring Boot |
L2 |
✅ GET/POST labels |
✅ @Service / @Repository |
✅ JPA @Entity + FK · MyBatis mapper XML |
| Flask |
L2 |
✅ Blueprint routes · HTTP methods |
✅ View classes |
✅ SQLAlchemy (Base / db.Model) + FK relations |
| SvelteKit |
L2 |
✅ +page/+layout/+server |
✅ .svelte + runtime tags |
✅ Supabase · Prisma · Drizzle · TypeORM |
| Nuxt |
L2 |
✅ pages/ |
✅ .vue SFC import graph |
✅ Supabase · Prisma · Drizzle · TypeORM |
| Next.js Pages Router |
L2 |
✅ SSG/ISR/SSR detection |
✅ component graph |
✅ Supabase · Prisma · Drizzle · TypeORM |
| Remix |
L2 |
✅ nested folder routes · splat (*) |
✅ component graph |
✅ Supabase · Prisma · Drizzle · TypeORM |
| React Router |
L2 |
✅ createBrowserRouter() |
✅ import chain |
✅ Supabase · Prisma · Drizzle · TypeORM |
| Vue SPA |
L2 |
✅ createRouter() |
✅ template renders graph |
✅ Supabase · Prisma · Drizzle · TypeORM |
| Angular |
L2 |
✅ provideRouter() · lazy loadComponent |
✅ template renders + lazy edges |
✅ Supabase · Prisma · Drizzle · TypeORM |
L3 = all 3 tabs always · L2 = routes + components + DB (DB shown when ORM detected) · L1 = routes only
Frameworks not in this list (Express, Hono, Rails, Go, etc.) use LLM primary mode when an Anthropic API key is provided.
✨ What's new in v1.2.69
Readable on first open
"Fit to view" never shrinks a diagram below 65% — large schemas used to open at ~7%, unreadable. Bigger diagrams open at the top-left and you pan for the rest, on every tab. The legend can be collapsed, and it no longer covers the first row.
Sequence tab: one chain per endpoint
Every caller's arrow points at the shared endpoint, and the backend chain behind it is drawn once.
Accuracy fixes
- Angular: lazy
loadChildren modules keep their parent path (/admin/settings, not /settings) and are no longer listed twice.
- TypeORM:
@JoinColumn({ name }) and real primary-key columns are used for foreign keys.
- Flyway:
ALTER TABLE changes and foreign keys are applied, in version order.
Full version history lives in the CHANGELOG.
✨ Features
| Tab |
What you see |
| Rendering Architecture |
Route hierarchy · HTTP method badges · SSR/CSR/ISR/SSG labels |
| Screen–Component |
Route → component renders/import graph · runtime tags (client/shared/server) |
| Data Flow |
Tables · columns with types/nullable/FK arrows · mapper connections to routes |
Sidebar panel
- Detected framework, parsing level (L2/L3), route/table count, last cached time
- Analyze → Re-analyze button
- Open Viewer — opens the diagram panel
- Feedback — rate on Open VSX or report an issue on GitHub
Two analysis modes
| Mode |
What you get |
API key |
| Static analysis |
Full L3 for Next.js App Router. L2 for all 12 other adapters. |
Not required |
| LLM-enhanced (BYOK) |
Fills gaps the static parser can't reach |
Required |
Quality-of-life
- Results cached in
.codebase-viz/cache.json
- Offline-friendly — Mermaid bundled locally, no CDN
- Pure Node.js — Python/Java AST via bundled WebAssembly, no native installs
🚀 Getting Started
Install
- VS Code — search "Codebase Architecture Visualizer" in Extensions, or install from the Marketplace
- Cursor / VSCodium / code-server — search in Extensions panel (served via Open VSX)
Run
- Open your project folder (
File → Open Folder)
- Click the Codebase Viz icon in the Activity Bar → ▶ Analyze Project
- Explore the three diagram tabs
Or use the Command Palette (Ctrl+Shift+P):
Codebase Viz: Analyze Project
🤖 LLM Analysis (BYOK)
Codebase Viz uses Anthropic Claude for deeper enrichment on top of static analysis. Your key is stored in VS Code's SecretStorage and never sent anywhere other than Anthropic's API.
Setup
- Get an API key at console.anthropic.com
- Click 🔑 Set API Key in the sidebar
- Toggle Enable LLM Analysis
Model selection (codebaseViz.model)
| Value |
Description |
claude-sonnet-4-6 |
Default — best balance |
claude-haiku-4-5-20251001 |
Faster, lower cost |
claude-opus-4-7 |
Highest quality for large codebases |
⚙️ Settings
| Setting |
Default |
Description |
codebaseViz.enableLLM |
false |
Enable Claude-powered analysis |
codebaseViz.model |
claude-sonnet-4-6 |
Claude model to use |
🔧 Commands
| Command |
Description |
Codebase Viz: Analyze Project |
Run analysis and open the viewer |
Codebase Viz: Set Anthropic API Key |
Store your API key securely |
Codebase Viz: Clear Anthropic API Key |
Remove the stored key |
📋 Requirements
- VS Code 1.90+ (or Cursor / VSCodium based on the same version)
- No additional runtimes — Python and Java AST via bundled WebAssembly
🔒 Privacy
- Your code is never sent anywhere in static-only mode
- In LLM mode, relevant source files are sent to the Anthropic API using your own key
- Anthropic's data handling: anthropic.com/privacy
- Results cached locally in
.codebase-viz/cache.json
📦 Source
github.com/cubha/codebase-viz — MIT License
