✦ Aura Visualizer
Visualize your codebase in 3D directly inside VS Code
Interactive dependency graph • Force-directed layout • AI-ready
Features
3D Force-Directed Graph
Files become interactive 3D nodes, dependencies become edges. The graph uses physics simulation to arrange nodes organically — highly connected files cluster together, isolated files drift to the periphery.
- Node size scales with lines of code (cube root)
- Edge colors reflect dependency type (import, include, function call, etc.)
- Directional arrows show dependency direction
- Animated particles flow along highlighted paths
Multi-Language Support
Powered by Tree-sitter AST parsing (WASM) for accurate, structural code analysis.
| Language |
Extensions |
Color |
| C source |
.c |
🔷 Light blue |
| C header |
.h |
📘 Sky blue |
| JavaScript |
.js, .jsx |
🟡 Yellow |
| TypeScript |
.ts, .tsx |
🔵 Blue |
| Python |
.py |
🟢 Green |
| Java |
.java |
🔴 Red |
| Go |
.go |
🩵 Cyan |
| Rust |
.rs |
🟠 Orange |
| CSS |
.css |
🟣 Purple |
| HTML |
.html |
🟧 Coral |
Cross-file function calls are detected for C, JS/TS, Python, Java, Go, and Rust.
Inheritance edges (extends / implements) are detected for JS/TS, Python, Java, Go (struct embedding), and Rust (trait impl).
Language filter buttons are dynamic — only languages present in the current analysis are shown.
Interactive Exploration
| Action |
Effect |
| Click |
Select node, show detail panel, focus camera |
| Double-click |
Open file in VS Code editor |
| Right-click |
Pin focus — isolate file + neighbors up to N depth |
| Shift+Right-click |
Blast radius — show impact (all dependents) with depth coloring |
| Shift+Click |
Multi-select — aggregate stats for multiple files |
| Scroll |
Zoom in / out |
| Drag |
Rotate the 3D view |
| Background click |
Clear all selections |
Heatmap Modes
Color every node by a metric to spot hotspots at a glance. Press H to cycle through:
| Mode |
Description |
| Off |
Color by programming language |
| Complexity |
Cyclomatic complexity (branching, loops) |
| Fan-in |
How many files depend on this file |
| Fan-out |
How many files this file depends on |
| Lines of Code |
File size |
| Last Modified |
Git commit recency |
| Communities |
Architectural modules detected by Louvain algorithm |
Blue = low, Red = high. A legend displays the value range.
The Communities heatmap mode uses the Louvain algorithm to detect architectural modules by dependency coupling — not directory structure. Each community gets a unique color and is named after its hub file (highest fan-in).
A floating palette appears on the right, listing all communities with:
- Color swatch and hub name
- File count per community
- Click to toggle individual communities on/off
- All / None buttons for batch selection
Unselected communities are grayed out (nodes + links), just like pin focus.
Blast Radius
Shift+Right-click on any file to see its impact radius — all files that transitively depend on it. Nodes are colored by depth of impact:
| Depth |
Color |
| Source |
White (orange glow halo) |
| 1 |
Red |
| 2 |
Orange |
| 3 |
Yellow |
| 4 |
Yellow-green |
| 5 |
Green |
Use the Depth slider (1–5) or keys 1–5 to control the blast radius depth.
File Explosion
Expand any file into its internal symbols — functions, structs, enums, macros. Each symbol becomes its own node, connected to the parent file. Double-click a symbol to jump to that exact line in the editor.
Path Finder
Find the shortest dependency path between any two files. Click Path in the toolbar then select source and destination. The path lights up with animated particles.
Dead Code Detection ☠️
Press X or click the Dead Code button. Files with unused exports are highlighted in orange-to-red gradient. The detail panel lists each unused export with a ⚠️ label.
Circular Dependencies 🔄
Press C or click the Cycles button. All nodes involved in circular dependency chains are highlighted in orange. The detail panel shows the full cycle paths.
Orphan Detection
Press O to highlight isolated files (zero incoming and outgoing dependencies) in red. Useful for finding dead files that nothing references.
DAG Mode
Press D to switch from physics-based layout to a hierarchical top-down Directed Acyclic Graph layout. Entry-point files float to the top, leaf dependencies sink to the bottom.
Directory Clustering
Press G to group files by directory. Directories become translucent spheres containing their files. Click a cluster to expand or collapse it.
Multi-Selection
Hold Shift and click multiple nodes to select a group. The detail panel shows:
- Combined LOC and average complexity
- Language breakdown
- Internal links between selected files
- List of all selected files
Minimap 🗺️
Toggle with the 🗺️ Map button in the toolbar. A floating minimap displays a real-time overview of all nodes, projected from the camera's perspective. The white rectangle shows the current viewport.
- Rotate the 3D view — the minimap rotates in sync
- Drag inside the minimap — pan the camera in the 3D view
- Drag the header — reposition the minimap panel
- Close with the ✕ button or toggle the toolbar button
Time Travel ⏳
Navigate your project's git history commit by commit. A timeline bar at the bottom lets you scrub through commits. Changed files are color-coded: 🟢 green = added, 🔴 pink = removed, 🟡 yellow = modified. Edges follow the same color scheme.
| Control |
Action |
| Timeline slider |
Jump to any commit |
← / → arrows |
Step through commits |
| Prev / Next buttons |
Navigate history |
I |
Toggle impact cascade from changed files |
Escape |
Return to HEAD |
Visual Diff Between Commits 🔀
Press V or click the ⇄ Compare button to enter Compare mode. A second slider appears — drag both sliders to diff any two commits. Files that changed between those commits are highlighted; unchanged nodes are dimmed. Compare mode shows the cumulative diff across the selected range.
Search
Type in the search box (2+ characters) to find files by name or path. Results appear in a live dropdown — click to navigate.
File Explorer Panel
Toggle a tree-view panel showing all files organized by directory. Click a file to select it in the graph.
Directory filtering: Each directory has a checkbox to show/hide its files in the graph. Use the All / None buttons at the top for batch selection. Directories are checked by default.
Filter by Language
Toggle language buttons in the filter bar to show/hide files by type. Multiple languages can be active simultaneously.
Adjustable Controls
| Slider |
Effect |
| Node Size |
Scale the visual radius of all nodes |
| Spread |
Adjust repulsion force between nodes |
| Depth (1–5) |
Set how many neighbor levels to show when pinning focus |
Incremental Updates
When autoRefresh is enabled, the graph updates automatically whenever you save a file — no manual re-scan needed. Only the changed file is re-parsed and its edges recalculated (O(1) instead of O(N)).
Instant startup: The graph is persisted to a local SQLite database (.aura/graph.db). On next launch, the cached graph loads instantly while a background re-scan picks up any changes and sends a delta update.
Function Call Labels
In the detail panel, dependency links of type function-call display the actual function name (e.g. helper()) next to the target file. This makes it easy to see exactly which function creates each cross-file link.
For C/C++ projects, function-call links are only created between files connected via #include — preventing false positives between unrelated files that happen to define functions with the same name.
Tabbed Views
Switch between 7 visualization tabs for different perspectives on your codebase:
| Tab |
Description |
| ✦ 3D Graph |
Interactive 3D force-directed dependency graph (default) |
| 🗺️ Treemap |
Files nested by directory, sized by LOC or complexity, colored by metric. Click to zoom into subdirectories, breadcrumb navigation to zoom out. |
| 🗑️ Matrix |
N×N Dependency Structure Matrix (DSM). Rows and columns are files; a colored cell means a dependency exists. Red cells with ↺ indicate circular dependencies. Group by directory, language, or community. |
| 🎵 Chord |
Chord diagram showing dependency flows between groups (directories, languages, or communities). Ribbon thickness reflects flow volume. Hover to highlight a group and its connections. |
| 📊 Metrics |
Dashboard with bar charts: LOC, complexity, fan-in, fan-out by language and top files. |
| 📈 Timeline |
Line chart showing metric evolution over git history (LOC, file count, avg complexity, total complexity). Requires Time Travel scan. |
| 📋 Table |
Sortable, filterable spreadsheet of all files with LOC, complexity, fan-in/out, symbols, and folder. |
All tabs share the same live data and update when the graph is refreshed.
Getting Started
- Install the extension from the VS Code Marketplace (or load the
.vsix)
- Open a project folder in VS Code
- Press
Ctrl+Shift+A (or Cmd+Shift+A on Mac)
- Explore your codebase in 3D
You can also open the visualizer from the Aura icon in the Activity Bar or via the Command Palette → Aura: Visualize Codebase.
Commands
| Command |
Shortcut |
Description |
| Aura: Visualize Codebase |
Ctrl+Shift+A |
Open the 3D visualization |
| Aura: Refresh Visualization |
— |
Re-analyze the workspace |
| Aura: Focus Current File |
— |
Highlight the active editor file in the graph |
| Aura: Blast Radius |
— |
Show blast radius for the active file |
| Aura: Export Graph for AI |
— |
Export graph data as JSON |
Keyboard Shortcuts (in graph)
| Key |
Action |
F |
Fit to view / recenter |
L |
Toggle node labels |
G |
Toggle directory groups |
H |
Cycle heatmap modes |
P |
Toggle path-finding mode |
D |
Toggle DAG layout |
O |
Highlight orphan files |
X |
Toggle dead code visualization |
C |
Toggle circular dependencies |
1–5 |
Set pinned focus depth |
V |
Toggle timeline compare mode (dual slider) |
I |
Toggle timeline impact cascade |
← → |
Timeline: previous / next commit |
Escape |
Reset all — clear selections, heatmaps, timeline |
AI Integration
Aura includes a built-in MCP server (Model Context Protocol) and a Graph Database so AI assistants can query your codebase structure programmatically.
Graph Database
Every analysis is persisted to a local SQLite database (.aura/graph.db via sql.js/WASM). This enables fast structural queries without re-parsing.
MCP Server
The MCP server exposes your codebase graph to AI tools via stdio transport. It registers automatically in .vscode/mcp.json on first run.
Resources:
| URI |
Description |
aura://overview |
Architecture overview — file counts, LOC, complexity by language |
aura://nodes |
All files with full metrics |
aura://node/{id} |
Detail for a specific file — symbols, dependencies, dependents |
Tools:
| Tool |
Parameters |
Description |
find_dependencies |
file, depth |
Transitive dependency tree |
find_dependents |
file, depth |
Impact analysis — blast radius with risk levels |
find_path |
from, to |
Shortest dependency path between two files |
find_cycles |
— |
All circular dependency cycles |
find_dead_code |
— |
Unused exports across the codebase |
find_unused_functions |
file, include_methods |
Functions/methods never called anywhere |
get_hotspots |
limit, sort_by |
Most complex / impactful files |
search_symbols |
query, kind |
Find functions, classes, exports by name |
find_heritage |
file |
Inheritance and implementation relationships (extends/implements) |
get_architecture |
— |
High-level overview by language |
get_communities |
— |
Architectural modules detected by Louvain algorithm |
generate_documentation |
hotspot_limit |
Full documentation payload: overview, modules, hotspots, cycles, dead code, inter-module links |
Settings
| Setting |
Default |
Description |
auraVisualizer.excludePaths |
["node_modules", ".git", "dist", "build", "out", "__pycache__"] |
Directories to exclude from analysis |
auraVisualizer.maxFiles |
500 |
Maximum number of files to analyze |
auraVisualizer.autoRefresh |
true |
Auto-refresh on file save |
Edge Types
| Type |
Color |
Source |
include |
Light blue |
C #include "file.h" |
system-include |
Light blue (dim) |
C #include <stdlib.h> |
import |
Yellow |
JS/TS import |
require |
Yellow (dim) |
CommonJS require() |
dynamic-import |
Yellow (faint) |
import() expressions |
function-call |
Green |
Cross-file function calls (C, JS/TS, Python, Java, Go, Rust) |
extends |
Pink |
Class/struct inheritance |
implements |
Purple |
Interface / trait implementation |
script |
Orange |
HTML <script src> |
stylesheet |
Purple |
HTML <link rel="stylesheet"> |
css-import |
Purple (dim) |
CSS @import |
css-url |
Purple (faint) |
CSS url() references |
License
MIT
