Link Canvas is a VS Code extension that visualizes code dependencies, references, and relationships on an infinite canvas. Explore your codebase interactively with OS-window-style code viewers that support zooming, panning, and direct navigation to definitions and references.
- Infinite Canvas: Navigate through your code on a boundless canvas with smooth zooming and panning
- Interactive Code Windows: OS-style windows with drag, resize, and Monaco Editor integration
- Dependency Visualization: See how functions, classes, and files are connected
- Quick Navigation: Right-click context menu for jumping to definitions and references
- File Tree Integration: Browse your project structure directly in the sidebar
- Style Customization: Fully customizable themes, window styles, and fonts (details)
- Node.js 16 or higher
- VS Code 1.80.0 or higher
- Clone the repository
git clone https://github.com/is0692vs/link-canvas.git
cd link-canvas- Install dependencies
npm install- Build the extension
npm run build- Install in VS Code
- Open the project in VS Code
- Press F5 to launch extension development host
- Or package and install manually
- Click the "Link Canvas" icon in the VS Code activity bar
- Browse your project files in the sidebar
- Click on a file to open it on the canvas
- Zoom in to see full code with Monaco Editor, zoom out for overview
- Right-click in any editor to jump to definitions or references on the canvas
Link Canvas allows you to customize themes, window styles, and fonts via VSCode settings (settings.json).
{
"linkCanvas.theme": "dark",
"linkCanvas.window.borderColor": "#3c3c3c",
"linkCanvas.window.borderRadius": 8,
"linkCanvas.font.size": 14
}See the Style Customization Guide for detailed configuration options.
Screenshots and demo GIFs will be added soon.
- VS Code 1.80.0+
- Node.js 16+ (for development)
MIT
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.