Visual Code Flow Navigator
See how your functions connect — an interactive call-graph for any function, right inside VS Code.
Visual Code Flow Navigator visualizes how functions call each other in your codebase. Instead of jumping between files with Go to Definition, place your cursor in a function and instantly see an interactive graph of who calls it, what it calls, and how deep the chain goes.
Features
- Interactive call graph — the function at your cursor sits in the center; callers fan out to the left, callees to the right.
- Color-coded nodes — amber = the selected function, green = callers, blue = callees.
- Click to navigate — click any node to jump straight to that function's source, with a brief highlight.
- Search & filter — find nodes by name or file path; filter to callers-only or callees-only.
- Adjustable depth — explore 1–5 levels deep with a slider.
- Multiple layouts — dagre (hierarchical), circle, grid, or breadthfirst.
- Minimap — an overview panel for navigating large graphs.
- Export & share — save as PNG or JSON, or copy a deep link to share a graph with a teammate.
- Language-agnostic — works with any language that provides a VS Code Call Hierarchy provider (JavaScript, TypeScript, Python, Go, Rust, C#, and more).
- Works offline — all rendering libraries are bundled; no network, CDN, or external requests required.
Installation
From the VS Code Marketplace
- Open the Extensions view (
Ctrl+Shift+X / Cmd+Shift+X).
- Search for Visual Code Flow Navigator.
- Click Install.
From a .vsix file
- Download the
.vsix from the Releases page.
- In VS Code, open the Extensions view → ⋯ menu → Install from VSIX…, or drag the file into the window.
Usage
- Open any JS, TS, Python (or other LSP-supported) file.
- Place your cursor inside a function.
- Trigger the graph in any of these ways:
- Press
Ctrl+Shift+G (Cmd+Shift+G on macOS).
- Right-click → Show Code Flow Graph.
- Click
$(type-hierarchy) Code Flow in the status bar.
- The graph opens to the right. Click nodes to navigate, drag to pan, scroll to zoom, and use the toolbar to search, filter, change depth, switch layout, or export.
Tips
- Single-click a node to jump to its source; double-click to re-root the graph on that function and keep exploring. Use the ← button to go back.
- Works on functions, methods, and constructors — anything your language's Call Hierarchy provider supports. Place the cursor on a callable symbol (not a variable or type) to start.
Keyboard Shortcuts
| Shortcut |
Action |
Ctrl+Shift+G / Cmd+Shift+G |
Show the call graph for the function at the cursor |
All commands (available in the Command Palette):
| Command |
Description |
Show Code Flow Graph |
Show the call graph for the function at the cursor |
Refresh Code Flow Graph |
Re-analyze the current function |
Clear Code Flow Cache |
Clear cached graph data |
Settings
| Setting |
Type |
Default |
Description |
codeflow.maxDepth |
number (1–5) |
3 |
How many levels deep to traverse the call graph |
codeflow.theme |
dark | light | auto |
auto |
Graph color theme (auto follows VS Code) |
codeflow.layout |
dagre | circle | grid | breadthfirst |
dagre |
Graph layout algorithm |
codeflow.showCallers |
boolean |
true |
Show functions that call the root |
codeflow.showCallees |
boolean |
true |
Show functions the root calls |
codeflow.autoRefresh |
boolean |
false |
Re-render the graph when the cursor moves to a new function |
Pricing
Free for individuals. Team features coming soon.
Roadmap
- Python support — first-class call-hierarchy tuning for Python projects.
- GitHub integration — open and explore call graphs directly from a repository.
- Team sharing — shareable graph links and collaborative exploration for teams.
Requirements
A language extension that provides a Call Hierarchy provider for your file type (most popular languages do — JS/TS work out of the box; Python needs the Python extension, etc.).
Known Limitations
- If a language has no Call Hierarchy provider, the graph can't be built — you'll see a friendly message.
- Analysis runs against the saved state of files.
License
MIT
| |
