CodeAtlas

A zoomable structural map of your codebase — like Google Maps for code. Navigate from service topology down to a single function, with live differential rendering that highlights exactly what changed and where.

What It Does

CodeAtlas continuously builds five linked diagram layers for your workspace. Each layer shows the right level of detail for its zoom level, and every element is clickable to drill deeper. When code changes, diagrams update automatically and color-code every affected layer — so you always know what changed and where it ripples.

The 5 Diagram Layers

[L1]  System Design Map         ← whole-workspace service topology
       ↓ click a service
[L2a] Feature / Domain Clusters ← domains inside that service
       ↓ click a cluster
[L2b] API & Subsystem List      ← APIs + internal modules for that cluster
       ↓ click an API entry
[L3]  Sequence Diagram          ← interaction flow for that API endpoint
       ↓ click a participant
[L4]  File / Class Diagram      ← file structure: imports, vars, functions
       ↓ click a function node
[L5]  Function Flowchart        ← control flow inside one function
       ↓ click any node
[src] Source Editor             ← jumps to exact line

Live Differential Rendering

CodeAtlas tracks a baseline (snapshot at Initialize or Resync) and a working state (rebuilt on every file save). Every structural change is color-coded and propagated upward through all layers:

Example: modify createOrder() function body

L5  Function Flow: createOrder()     → orange (body modified)
L4  File Diagram: orderController.ts → orange (contains modified function)
L3  Sequence: POST /orders           → orange (participant changed)
L2b API List: Order Management       → orange (handler changed)
L2a Feature: Order Management        → orange (cluster has changed content)
L1  System Design: OrderService      → orange (service structure changed)

Example: delete cancelOrder() function

L5  Function Flow: cancelOrder()     → red    (ghost shown)
L4  File Diagram: orderController.ts → orange (file lost a function)
L3  Sequence: DELETE /orders/:id     → red    (sequence ghost shown)
L2b API List: Order Management       → red    (API entry removed)
L2a Feature: Order Management        → orange (feature lost an API)
L1  System Design: OrderService      → orange (service structure changed)

Language & Framework Support

CodeAtlas is language-agnostic. Services are auto-detected by entry points, manifests, and directory boundaries.

Supported languages: JavaScript, TypeScript, Java, Kotlin, Python, Go, Rust, C, C++, C#, PHP, Ruby, Swift

Framework route detection: Express, Koa, Fastify, NestJS, FastAPI, Flask, Django, Spring Boot, Gin, Actix, Rails, Laravel

Infrastructure detection: PostgreSQL, MySQL, MongoDB, Redis, RabbitMQ, Kafka — from code patterns and docker-compose

Getting Started

1. Install the extension from the VS Code Marketplace
2. Open any project or mono-repo in VS Code
3. Run CodeAtlas: Initialize Visuals from the Command Palette (Cmd/Ctrl+Shift+P)
4. The System Design map opens — click any service to drill into its feature clusters
5. Navigate down through layers by clicking nodes; diagrams update automatically on file save

State is persisted in .codeatlas/state.json in your workspace root. Delete this file to reset all diagrams and baseline.

Git Diff Mode

CodeAtlas can compare any two commits from your git history and render the structural diff across all five diagram layers simultaneously. This is separate from the live baseline-vs-working diff and works even when your working tree is clean.

How it works

1. Click the ⎇ Compare Commits button in any diagram panel's header bar
2. Select the base commit (older, the "before" state) from the list
3. Select the head commit (newer, the "after" state)
4. CodeAtlas builds both snapshots in memory and diffs every graph

The System Design map opens immediately showing which services changed. From there, drill down through all five layers exactly as in live mode — all navigation works, all diff colors are accurate.

Diff colors in git diff mode

The same green / red / orange coloring applies:

Badge and reset

While a git diff session is active, every diagram panel shows:

⎇ abc1234 → bcd2345

Click ✕ Reset to return to live baseline-vs-working diff mode.

Persistence

The git diff session is persisted to .codeatlas/git-diff-state.json. Reopening VS Code within the same session restores the comparison automatically.

Commands

Notes

• Live file-save updates are frozen while in git diff mode — your working tree changes do not affect the displayed diagrams
• If you have unsaved baseline-vs-working differences, CodeAtlas will prompt you to re-sync before entering git diff mode
• The comparison reads file contents from git object storage — it does not require a clean working tree

Commands

Settings

Sidebar Panels

The sidebar tracks your current zoom level and updates dynamically:

• Microservices — all detected services with diff status
• Feature Clusters — domain groups within a service
• API Explorer — all detected API routes, grouped by service
• File Explorer — all scanned files with diff indicators
• Function Explorer — all functions across the workspace
• Changed Elements — only nodes and edges that changed since baseline
• Comments — all inline comments, grouped by diagram layer

License

See LICENSE.md