Skip to content
| Marketplace
Sign in
Visual Studio Code>Visualization>Code Logic 3D VisualizerNew to Visual Studio Code? Get it now.
Code Logic 3D Visualizer

Code Logic 3D Visualizer

Mohit Choudhary

|
1 install
| (0) | Free
Real-time 3D visualization of code logic using Three.js
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Code Logic 3D Visualizer

A powerful VSCode extension that provides real-time 3D visualization of your code's architecture and logic using Three.js.

🚀 Features

  • Real-time 3D Mapping: Instantly visualizes your code as you type, creating a living map of your logic.
  • Universal Language Support: Robust parsing for JavaScript, TypeScript, Python, Rust, Go, C++, Java, PHP, Shell, and more.
  • Logical Block Envelopes: Visualizes code blocks (functions, classes) as translucent 3D volumes that group related logic.
  • Complexity Analysis: Sphere sizes dynamically represent cyclomatic complexity, helping you identify "hot spots" in your code.
  • Force-Directed Layout: An organic 3D graph that organizes itself based on parent-child relationships and code structure.
  • Interactive Navigation: Click any 3D node to instantly jump to the corresponding line in your editor.
  • Metrics Dashboard: Real-time stats on total complexity, average complexity, lines of code, and node counts.
  • Visual Cues: Subtle pulsing animations and glow effects for errors and active nodes.

🛠️ How to Use

  1. Install the extension from the VSCode Marketplace.
  2. Open any code file in your editor.
  3. Launch the Viewer:
    • Click the Pulse icon (⚡) in the editor title bar (top right).
    • OR run the command Start Real-Time Logic Viewer from the Command Palette (Ctrl+Shift+P).
  4. Explore: Rotate the 3D scene with your mouse, hover over nodes for details, and click to navigate.

📦 Publishing & Packaging

To prepare this extension for the VSCode Marketplace:

  1. Install vsce:
    npm install -g @vscode/vsce
    
  2. Login to Azure DevOps: Create a Personal Access Token (PAT) and a publisher account on the Marketplace.
  3. Package the extension:
    vsce package
    
    This will generate a .vsix file in your root directory.
  4. Publish:
    vsce publish
    

🏗️ Technical Architecture

  • Rendering Engine: Three.js (r128) with custom shaders and materials.
  • Parsing Engine: Advanced regex-based universal parser with indentation-aware hierarchy management.
  • Physics Simulation: Custom 3D Force-Directed simulation for organic layout.
  • Communication Layer: VSCode Webview API for low-latency, real-time data synchronization.

📄 License

MIT © Mohit Choudhary

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft