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

Layer	What It Shows
L1 System Design	Services, infrastructure nodes (DB, cache, queue), inter-service connections
L2a Feature Clusters	Domain groupings within a service, dependency edges between clusters
L2b API & Subsystem List	All API endpoints and internal modules for a cluster, with method + route
L3 Sequence Diagram	Participants and message flow for one API call, swimlane style
L4 File Diagram	Imports, variables, functions, class members with dependency edges
L5 Function Flow	Control flow: decisions, loops, statements, return paths

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:

Color	Meaning
Green	Added at this exact level
Red	Deleted — ghost node/edge shown
Orange	Modified here, or a child at a deeper level changed

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

Install the extension from the VS Code Marketplace
Open any project or mono-repo in VS Code
Run CodeAtlas: Initialize Visuals from the Command Palette (Cmd/Ctrl+Shift+P)
The System Design map opens — click any service to drill into its feature clusters
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.

Commands

Command	Description
`CodeAtlas: Initialize Visuals`	Scan workspace and build all diagram layers
`CodeAtlas: Re-sync Everything`	Rebuild all diagrams and reset the baseline
`CodeAtlas: Open System Design`	Open the L1 service topology map
`CodeAtlas: Open Feature Diagram`	Open feature clusters for the current service
`CodeAtlas: Open API Explorer`	Focus the API Explorer sidebar
`CodeAtlas: Open Sequence Diagram`	Open sequence diagram for a selected API
`CodeAtlas: Open File Diagram`	Open file diagram for the active editor
`CodeAtlas: Open Function Flow`	Open function flowchart
`CodeAtlas: Add Comment`	Add a comment on any diagram node or edge
`CodeAtlas: Show Comments`	Show the comments sidebar
`CodeAtlas: Resolve Comment`	Mark a comment as resolved
`CodeAtlas: Rebuild Current File`	Rebuild diagrams for the active file only
`CodeAtlas: Toggle Auto Update`	Enable or disable auto-update on file save

Settings

Setting	Default	Description
`codeatlas.autoUpdateOnSave`	`true`	Automatically update diagrams on file save
`codeatlas.maxFiles`	`2000`	Maximum files to scan per workspace
`codeatlas.ignore`	`["/node_modules/", "/dist/"]`	Glob patterns to exclude from scanning
`codeatlas.showUnchangedInDiagrams`	`true`	Show unchanged elements alongside diffs
`codeatlas.diff.resetOnBranchChange`	`false`	Reset baseline when git branch changes

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

CodeAtlas-Live-Java

codeatlas live