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.
CodeSight 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.
DB–Screen — 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.1.53
Fixed — Small-project Y-axis stack (adapter-wide)
Projects with as few as 28 routes were being forced into a chunked rendering path purely because their top-level folder count exceeded a heuristic — viewer then stacked the chunks vertically, producing a single-column Y-axis dump instead of a proper tree layout. The same defect was latent in every adapter's mini fixture (angular / fastapi / flask / next / nextpages / nuxt / react-router / remix / sveltekit / vue-spa Tab2).
- Root cause:
GROUPS_PER_ROW = 5 (Tab1) / TAB2_GROUPS_PER_ROW = 2 (Tab2) thresholds triggered chunking based on top-level group count alone, with no regard for total route count.
- Fix: New
SINGLE_DIAGRAM_ROUTE_THRESHOLD = 100 gate. Chunked path now requires both branchingGroups > GROUPS_PER_ROW AND routeCount > 100. Small projects render as a single Mermaid diagram with nested subgraphs and Mermaid's natural layout handles the X-axis fan-out.
- Verified: 630 tests pass (including the v1.1.6 200-route NestJS stress test). Real-world
dev-log-portfolio re-analysis: Tab1·Tab2 chunk count 7 → 0.
Previous highlights
v1.1.52 — Tab1/Tab2 chunk 과다 수정 (698→9 chunks) · Tab3 bin/main/sql/primary/** extractModule fix · row-mode floating island fix (left:50%→0) · React Router sub-router 2-pass parsing (9→130 routes)
v1.1.51 — chunked path nested grouping preservation for 937+ route monorepos · 1 top-level branch = 1 chunk boundary
v1.1.5 — i18n 4 languages (한국어·English·日本語·中文 简体) with instant locale switch · demo GIFs (Tab switch · DB toggle)
v1.1.4 — Turbo/Lerna/Nx monorepo detection · multi-service projects without root package.json · Flutter (pubspec.yaml) support · last-resort scan fallback
✨ 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) |
| DB–Screen |
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
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
.codesight/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 CodeSight icon in the Activity Bar → ▶ Analyze Project
- Explore the three diagram tabs
Or use the Command Palette (Ctrl+Shift+P):
CodeSight: Analyze Project
🤖 LLM Analysis (BYOK)
CodeSight 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 (codesight.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 |
codesight.enableLLM |
false |
Enable Claude-powered analysis |
codesight.model |
claude-sonnet-4-6 |
Claude model to use |
🔧 Commands
| Command |
Description |
CodeSight: Analyze Project |
Run analysis and open the viewer |
CodeSight: Set Anthropic API Key |
Store your API key securely |
CodeSight: 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
.codesight/cache.json
📦 Source
github.com/cubha/codesight — MIT License
