Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Source Code VisualizerNew to Visual Studio Code? Get it now.
Source Code Visualizer

Source Code Visualizer

visualprogrammingx

|
9,767 installs
| (2) | Free
Visualize the calling structure of source code in a class diagram-like fashion
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

This is a VSCode extension to create dynamically growing diagrams. See the video below or watch the Youtube video (2:20m) to get a grasp of what it does.

Quick example video

How to use?

Activate

  • Method 1:

    • Put the caret (cursor) on a function/class/namespace/whatever name
    • Right-click
    • Select Visualize This
  • Method 2:

    • Put the caret (cursor) on a function/class/namespace/whatever name
    • Open VSCode commands (press Ctrl+Shift+P)
    • Search and select Visualize This

Navigation

  • View: zoom-in / zoom-out: Alt+Scrolling
  • View: move around:
    • Drag&Drop the background
    • Scroll over background (vertical scroll)
    • Shift+Scroll over background (horizontal scroll)
  • Open a definition: doubleclick an identifier

Remarks

Don't change code while working within the diagram (this problem will be fixed in future versions)

Supported Languages

Currently the following languages are supported:

  • Python
  • C/C++ (beware, due to VSCode's bad support for C/C++ you might experience difficulties)
  • Php (experimental)
  • Javascript (experimental)
  • Typescript (experimental)
  • Java (experimental)
  • Dart (experimental)
  • Typescript+React (experimental)

Planned Features

  • Allow editing while viewing the diagram
  • Enable multiple diagrams
  • Save diagrams

Acknowledgements

  • Ivan Sagalaev for highlightjs
  • Creators and maintainers of VSCode
  • Creators and maintainers of nodejs
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft