Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>Visual CodingNew to Visual Studio Code? Get it now.
Visual Coding

Visual Coding

xavuye

|
1 install
| (0) | Free
Visualize and edit source code as interactive node graphs. Open any code file and switch between code view and node view.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Visual Scripting C++

Visualize and edit your C++ source code as an interactive node graph — right inside VS Code.

Features

  • One-click visualization — click the graph icon (⋔) in the editor title bar when a .cpp, .h, or .hpp file is open
  • Live editing — rename functions, edit arguments, add return comments, reorder nodes
  • Sync back to code — hit Save to File to write the reconstructed source back to your C++ file
  • Dead code detection — unreachable functions shown in grey
  • Smart layout — nodes auto-arranged by call order
  • Undo / redo — full edit history

Usage

  1. Open any .cpp file
  2. Click the ⋔ (type-hierarchy) icon in the editor title bar
    — or right-click and choose "Open Visual Node View"
  3. The node graph opens side-by-side with your code
  4. Edit nodes, then click Save to File to apply changes

Sync Model

Direction How
Code → Graph Automatic on open; updates when you save the file
Graph → Code Click Save to File in the graph header

Limitations (v0.1)

  • Parser handles common C++ patterns (functions, classes, structs, includes)
  • Reconstructed source is reformatted (original whitespace/comments may change)
  • Templates and operator overloads appear as raw blocks

License

MIT

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