See your code flow and file connections on an infinite canvas.
Explore file relationships, understand application flow, and gain insights into your project structure in a more intuitive way.
Supporting for now, although some of the features might work for other languages
Features:
1. Opening files in the canvas
ℹ️ Show details
** Opening the canvas: **
Type Open Code Canvas in the Command Palette (Cmd + shift + P)
Click Code Canvas icon in the bottom right corner
** Navigating: **
Cmd + scroll to zoom
Hold Space to enable panning, then drag from an empty space on the canvas
Use the minimap controls or drag on the minimap to move (Press M to toggle minimap)
** Opening / closing files: **
Right Click a file or folder in the side bar and select Open in Code Canvas
Select files and hit Backspace or Cmd + X to close them. Shift + X to close all files
Drag out the import handle to open imported files
Node Toolbar
Open all imported files by clicking the right arrow in the file node toolbar
Or open all files that import that file by clicking the left arrow
Option + click on an arrow to see the list of files and select which ones to open
2. Real-time display of local changes
Particularly useful for understanding changes done by AI assistants, or reviewing large amounts of edits across multiple files before committing
Press Shift + O to open all the files in the current workspace that have any changes (added, removed, edited)
Editing a file automatically opens it in the canvas
Changes are automatically refreshed when you commit, stage, or unstage files
3. Visual display of token references and their connections
Click on a token (functions, variables, params, etc) to open a dropdown with a list of references, definitions, implementations, as well as outgoing and incoming calls for functions
(Press R to toggle the display of the references dropdown when tokens are selected)
Trace code execution paths visually: see relationships between functions and their references throughout all the files in the codebase
4. Layout algorithms for organizing your selected files
Layout options with keyboard shortcuts (Shift + 1, 2, 3, 4, etc) to organize your view
Select files to apply the algorithm only to the selection
Shit + 1 is a custom layout algorithm with adjustable parameters. Open the Layout Panel in the toolbar to customize it
Auto-fit and spacing options apply only to algos from 2 onwards
Privacy & Security
Your code stays on your machine
All code processing is done locally on your device
No code is ever sent to external servers
Code analysis, syntax highlighting, and file relationships are computed entirely within VS Code
Git authentication is only used for subscription management - your repository content remains private
Analytics & Privacy
Code Canvas collects anonymous telemetry to improve the extension experience. We take your privacy seriously:
Respects VS Code Settings: Telemetry is automatically disabled when VS Code telemetry is off
No Personal Information: We never collect names, emails, or any PII
No Source Code: Your code content is never transmitted
No File Paths: All file paths are sanitized to generic identifiers
No Session Recordings: Screen recording and session replay are completely disabled
What We Collect
Feature usage patterns (which features you use, not how you use them)
Performance metrics (load times, render times)
Error rates (without stack traces or sensitive details)
Anonymous session identifiers
VS Code and extension version information
How to Opt Out
You can disable telemetry at any time through:
VS Code Settings: Set telemetry.telemetryLevel to off (disables all extension telemetry)
Extension Settings: Disable codeCanvas.telemetry.enabled in VS Code settings
For complete details about our data practices, see our Privacy Policy
for now, although some of the features might work for other languages
