divlook-fancy / sourcecodevisualizer

VSCode extension to create dynamic, interactive diagrams from your source code

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.

Install

From VSCode

Install the extension Code Visualizer

From Release File

Menu → File → Preferences → Extensions → Three dots in the top corner → Install from VSIX...

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

Ackknowledgements

• Ivan Sagalaev for highlightjs
• Creators and maintainers of VSCode
• Creators and maintainers of nodejs

Development

See README.md in src directory