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 that lives in your Explorer sidebar.
⚡ Real-time Updates: The graph automatically shifts focus as you open and edit different files.
🔍 Bi-directional Visualization: See everything your current file imports, and every file that imports it.
🖱️ Rich Interactions:
Single Click: Highlight the local dependency network.
Double Click: Jump directly into the file in your editor.
Drag & Zoom: Total control over your layout—zoom out for the macro view or in for the details.
🚀 Full Screen Mode: Open the graph in a full editor tab for an immersive exploration of complex structures.
🌈 Visual Guide
Color
Meaning
🔵 Blue
Currently active file
🟢 Green
Direct dependencies (imported by active file)
🟠 Orange
Dependents (files that import the active file)
⚫ Gray
Indirect dependencies (2nd level)
🛠 Usage
Open the File Graph panel in the Explorer sidebar.
Select any source file—the graph will instantly map its connections.
Click nodes to see their immediate family of dependencies.
Double-click to navigate your codebase visually.
Use the refresh icon in the title bar to rescan your workspace.
