Code Visualizer is a VS Code extension that provides an interactive, WebGL-based visualization of your codebase architecture. It helps developers understand complex codebases by visualizing code relationships, dependencies, and structure in an intuitive 3D interface.
- Interactive 3D Visualization: Explore your code architecture through an immersive WebGL-powered visualization using Three.js
- Real-time Code Analysis: Automatically detects changes in your codebase and updates the visualization
- Dependency Mapping: Visualizes relationships between files, functions, and modules
- Advanced Navigation: Intuitive controls for zooming, panning, and rotating the visualization
- Customizable Views: Filter and highlight specific elements to focus on areas of interest
- Performance Optimized: Efficiently handles large codebases with minimal performance impact
- VS Code 1.85.0 or higher
- WebGL-capable browser environment
- Open your project in VS Code
- Launch the extension by:
- Running the "Open Code Visualizer" command from the Command Palette (
Ctrl+Shift+P
orCmd+Shift+P
) - Clicking on the Code Visualizer icon in the Activity Bar
- Running the "Open Code Visualizer" command from the Command Palette (
- The visualization will open in a new WebView panel
- Navigate the visualization:
- Left-click and drag to rotate the view
- Right-click and drag to pan
- Scroll to zoom in/out
- Click on nodes to view detailed information
- Use the controls panel to filter and customize the visualization
- Node.js (latest LTS version recommended)
- npm or yarn
- Clone the repository
git clone https://github.com/example/code-visualizer.git
cd code-visualizer
- Install dependencies
npm install
- Build the extension
npm run compile
- Package the extension
npm run package
- Run and debug
- Press F5 in VS Code to launch a new window with the extension loaded
- Run the "Open Code Visualizer" command to test the extension
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.