VS Code Extensions
C

Code Logic 3D Visualizer

by mohit-choudhary

Visualize code architecture, logic, complexity, and relationships in an interactive 3D view directly in VS Code.

Downloads

180

Rating

— (0)

Version

1.0.0

Last updated

Apr 07, 2026

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