Code to Diagram

A powerful Visual Studio Code extension that generates interactive diagrams from your JavaScript, Python, and C++ code using D3.js visualization.

Download the Extension

Features

• 🎯 Multi-language Support: Analyzes JavaScript, TypeScript, Python, and C++ code
• 📊 Interactive Diagrams: Dynamic, zoomable D3.js visualizations
• 🎨 Smart Styling: Automatic color themes based on VS Code's current theme
• 🔍 Detailed Information: Shows class relationships, methods, parameters, and documentation
• ⚡ Real-time Updates: Generates diagrams instantly as you code
• 🎭 Dark/Light Theme Support: Seamless integration with VS Code themes

Usage

1. Open any supported file (JavaScript, TypeScript, Python, or C++)
2. Open Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
3. Type "codesketch" and select the command
4. View the interactive diagram in the side panel

Features in Detail

Class Visualization

• Hierarchical class structure
• Inheritance relationships
• Method and property details
• Parameter types and return values
• Documentation from comments

Interactive Elements

• Zoom in/out for detail
• Drag nodes to rearrange
• Hover for detailed information
• Click to highlight relationships
• Smooth animations

Customization

• Automatic theme adaptation
• Configurable colors and styles
• Adjustable layout options
• Custom node grouping

Requirements

• Visual Studio Code 1.80.0 or higher
• Node.js 14.0 or higher
• Python 3.7 or higher (for Python file analysis)
• npm or yarn

Extension Settings

This extension contributes the following settings:

• codeStructure.diagramTheme: Set the default color theme
• codeStructure.showDocumentation: Toggle documentation display
• codeStructure.layoutDirection: Set diagram layout direction
• codeStructure.autoGenerate: Enable/disable automatic diagram generation

Known Issues

• Large files may take longer to process
• Some complex template structures in C++ might not be fully represented
• Certain JavaScript decorators may not be properly visualized

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• D3.js for visualization
• Python AST for Python code parsing
• VS Code Extension API

Made with ❤️ by Vaibhav Kothari

Follow me on GitHub, Twitter, and LinkedIn