Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Code Flow LensNew to Visual Studio Code? Get it now.
Code Flow Lens

Code Flow Lens

Mahammadasim Vora

|
2 installs
| (0) | Free
visualizing code flow
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Interactive Code Visualizer 🚀

An interactive, lazy-loading Python call graph explorer built directly into VS Code. It parses your Python files on the fly using Abstract Syntax Trees (AST) and visualizes the function and class call flows dynamically layer by layer.

Features ✨

  • Dynamic Lazy-Loading: Instead of rendering an overwhelming static graph, it maps out your repository in memory and fetches exactly 1 level of children at a time when you click a node.
  • Dual View Orientations: Toggle instantly between Top-to-Bottom (Vertical) and Left-to-Right (Horizontal) graph layouts using a smooth, live-updating transition.
  • Integrated Source Viewer: Click any node to instantly view its live extracted source code snippet right in the side utility panel.
  • Direct Deep Linking: Jump straight from a visual node right into its corresponding file and line number inside your active VS Code workspace.

How It Works 🧠

The extension operates with a hybrid, zero-disk footprint architecture:

  1. Extension Host (TypeScript): Detects your active editor window and automatically boots up a lightweight background controller process using your native system Python (python3 / python).
  2. In-Memory Analyzer (Python AST): Spawns a local HTTP server that maps the repository's relationships purely in memory—no tracking JSON dumps or bulky temp files are written to your computer.
  3. Reactive UI Framework (D3.js): Communicates with the background server asynchronously using a webview frame. Clicking nodes fires deep fetch actions to cleanly extend graph branches.

Getting Started & Usage 🏃‍♂️

  1. Open any Python project workspace directory inside VS Code.
  2. Click to open and focus your primary entry script file inside your editor workspace.
  3. Open the VS Code Command Palette:
    • Windows/Linux: Ctrl + Shift + P
    • macOS: Cmd + Shift + P
  4. Type and select: Visualize Code Flow
  5. An interactive splitting tab will load next to your active file showing your module's root structure tree layout!

Extension Settings ⚙️

This extension currently runs with zero required configuration fields. It automatically looks for system binary aliases to choose between execution contexts smoothly.

Requirements 🛠️

  • VS Code: ^1.80.0 or higher.
  • Python Engine: A local installation of Python 3 (accessible via the python3 or python execution alias in your environment system path variables).

Developer Installation & Publishing (For Contributors) 🛰️

If you are developing or re-packaging this extension locally:

# Clone or step into the directory
cd code-flow-lens

# Compile the TypeScript extension manager source code
npm run compile

# Package the extension components into a single distributable file
vsce package
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft