Skip to content
| Marketplace
Sign in
Visual Studio Code>Visualization>Code to DiagramNew to Visual Studio Code? Get it now.
Code to Diagram

Code to Diagram

Vaibhav Kothari

|
137 installs
| (1) | Free
Convert code to visual diagrams
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Code-to-Diagram Generator VS Code Extension

Overview

The Code-to-Diagram Generator is a Visual Studio Code extension that parses JavaScript, Python, and C++ code to generate real-time flowcharts using Abstract Syntax Tree (AST) parsing and Mermaid.js.

Features

  • Supports JavaScript (via Esprima), Python (via python-ast), and C++ (via cpp-parser).
  • Converts code into a structured flowchart for better visualization.
  • Automatically detects the language of the open file.
  • Displays the generated diagram in a separate VS Code WebView panel.

Installation

  1. Clone the repository:
    git clone https://github.com/vaibhavkothari33/Code-to-Diagram.git
    
  2. Navigate into the project folder:
    cd code-to-diagram
    
  3. Install dependencies:
    npm install
    
  4. Open the project in VS Code and press F5 to launch the extension in a new VS Code window.

Usage

  1. Open a JavaScript, Python, or C++ file in VS Code.
  2. Run the command Generate Diagram from the VS Code command palette (Ctrl+Shift+P).
  3. The generated flowchart will open in a new preview window.

Dependencies

Ensure you have the following installed:

  • VS Code
  • Node.js & npm
  • The following npm packages:
    npm install vscode mermaid esprima python-ast cpp-parser
    

Development

To modify or enhance the extension:

  1. Edit extension.js to update AST parsing logic.
  2. Modify generateFlowchart() to customize the diagram structure.
  3. Update the WebView showDiagram() function to adjust the Mermaid.js rendering.

License

This project is licensed under the MIT License.

Contributions

Contributions are welcome! Feel free to fork the repository and submit a pull request.

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