Codebase Explorer

Visualize your project's architecture with a stunning, interactive dependency graph directly inside VS Code. Stop guessing how your files are connected and start seeing the big picture.

Complex Relationship Mapping

Path Highlighting

Core Features

Live Dependency Graph

An interactive D3.js force-directed graph integrated into the Explorer sidebar, giving you a clear visual map of your codebase.

Real-time Updates

The graph updates automatically as you open or edit files, keeping everything in sync with your current context.

Bi-directional Visualization

Understand both sides of your code relationships:

• What the current file imports
• What files depend on it

Interactive Controls

• Single click: Highlight related dependencies
• Double click: Open the file instantly
• Drag & zoom: Navigate complex graphs with precision

Full Screen Mode

Expand the graph into a dedicated editor tab for exploring large and complex projects.

Visual Guide

Usage

1. Open the File Graph panel from the Explorer sidebar
2. Select a source file to generate its dependency graph
3. Click nodes to explore relationships
4. Double-click nodes to navigate to files
5. Use the refresh option to rescan your workspace

Supported Languages

• TypeScript (.ts, .tsx)
• JavaScript (.js, .jsx)
• Python
• Go
• Java
• Rust
• Vue
• Svelte

Why This Extension?

Most dependency tools show static graphs or require manual interaction. This extension stays aligned with your workflow by updating in real time and keeping navigation tightly integrated with your editor.

License

MIT © Harshit Bareja