A Visual Studio Code extension that allows you to visualize your codebase on an infinite canvas. View file relationships, application flow and understand your project structure in a more intuitive way.
Features:
Opening files in a canvas view (Right click -> open in code visualizer)
Cmd + scroll to zoom
Hold space to pan
Click and drag to select multiple files
Backspace to close a file
See relations between local dependencies (imports / exports in local modules)
works for javascript / typescript files
project must be open at the root level containing the tsconfig.json to pick up absolute imports
Visual display of references when clicking on a token in a file
Click on a token to see a list of references (local & global)
Click on reference to open the associated file
Open files from imports
drag out the import handle to open the imported file (local imports only)
Folders displaying around files on the canvas & folder drag & drop
Toggle display in sidebar. 2 options:
Just folder outlines
Folder names + highlight folder outlines on hover
Symbols outline shown as overlay on top of files when zoomed out
Toggle display in sidebar. 2 options:
Root level symbols only
All file symbols
Layout algorithms for organizing files based on dependencies / folders
Arrange files by specified criterias. 3 options:
Sort by folders
Folders with dependencies (files in each folder are arranged by dependencies)
Dependencies only (files are arranged in a left to right tree based by dependencies. Folder structure is ignored)
Display of local changes in files (diffs with HEAD)
Shows changed lines in a file
TO DO: Show deleted / added files
The extension is in early development
For any suggestions / improvements / feedback, my DMs are open:
