Skip to content
BranchesTags

Repository files navigation

Code Flow Visualizer

An interactive VS Code extension that visualizes code structure and function call relationships in real-time.

Features

  • 📊 Interactive Graph Visualization: See your code structure as an interactive node graph
  • 🔍 Function Analysis: Analyze function calls, complexity, and relationships
  • 🎯 Click to Navigate: Click any node to jump to that function in your code
  • 🌈 Complexity Coloring: Visual indicators for function complexity (green=low, yellow=medium, red=high)
  • 🔄 Multiple Layouts: Switch between force-directed and hierarchical layouts
  • 🌐 Multi-Language Support: Works with JavaScript, TypeScript, Python, and Java
  • ⚡ Real-time Updates: Automatically updates visualization when you save files

Installation & Setup

Step 1: Install Dependencies

cd code-flow-visualizer
npm install

Step 2: Compile TypeScript

npm run compile

Or for continuous compilation during development:

npm run watch

Step 3: Run the Extension

  1. Open the code-flow-visualizer folder in VS Code
  2. Press F5 to launch the Extension Development Host
  3. A new VS Code window will open with the extension loaded

Usage

Quick Start

  1. Open any JavaScript, TypeScript, Python, or Java file
  2. Press Ctrl+Alt+V (or Cmd+Alt+V on Mac)
  3. The visualizer panel will open showing your code structure

Commands

Access these via Command Palette (Ctrl+Shift+P or Cmd+Shift+P):

  • Code Flow: Start Visualization - Opens the visualizer panel
  • Code Flow: Analyze Current File - Analyzes the currently open file
  • Code Flow: Analyze Entire Workspace - Analyzes all supported files in workspace (up to 50 files)

Keyboard Shortcuts

  • Ctrl+Alt+V (Mac: Cmd+Alt+V) - Start visualization

Visualizer Controls

  • Click a node - Navigate to that function in your code
  • Drag background - Pan the view
  • Scroll wheel - Zoom in/out
  • Reset View - Reset zoom and position
  • Change Layout - Toggle between force-directed and hierarchical layouts
  • Zoom In/Out - Manual zoom controls

Understanding the Visualization

Node Size: Larger nodes indicate higher complexity (more conditional logic)

Node Color:

  • 🟢 Green: Low complexity (0-2 decision points)
  • 🟡 Yellow: Medium complexity (3-6 decision points)
  • 🔴 Red: High complexity (7+ decision points)

Connections: Lines show function calls (from caller to callee)

Info Panel: Hover over nodes to see detailed information

Development

Project Structure

code-flow-visualizer/
├── src/
│ ├── extension.ts # Main extension entry point
│ ├── analyzer.ts # Code analysis engine
│ └── visualizer.ts # Webview visualization manager
├── out/ # Compiled JavaScript (generated)
├── package.json # Extension manifest
└── tsconfig.json # TypeScript configuration

Key Components

Analyzer (analyzer.ts):

  • Parses source code to extract functions
  • Identifies function calls and relationships
  • Calculates cyclomatic complexity
  • Supports JS/TS, Python, and Java

Visualizer (visualizer.ts):

  • Manages the webview panel
  • Handles communication between extension and UI
  • Implements force-directed and hierarchical layouts
  • Provides interactive navigation

Debugging

  1. Set breakpoints in TypeScript files
  2. Press F5 to start debugging
  3. Debug output appears in the original VS Code window
  4. Extension runs in the new Extension Development Host window

Making Changes

  1. Edit TypeScript files in src/
  2. Run npm run compile or use watch mode (npm run watch)
  3. Press Ctrl+R (or Cmd+R) in the Extension Development Host to reload

Packaging for Distribution

Create VSIX Package

npx vsce package

This creates a .vsix file you can share or install manually.

Install VSIX Manually

code --install-extension code-flow-visualizer-0.0.1.vsix

Supported Languages

  • JavaScript (.js)
  • TypeScript (.ts)
  • Python (.py)
  • Java (.java)

Basic support for other languages with generic function pattern matching.

Future Enhancements

  • Class diagram visualization
  • Export visualization as SVG/PNG
  • Filter by complexity threshold
  • Search/filter functions
  • Call stack tracing
  • Performance profiling integration
  • Minimap overview
  • Collaborative annotations

Troubleshooting

Extension doesn't activate:

  • Check that you're in a workspace with supported file types
  • Look for errors in Output > Extension Host

Visualization is empty:

  • Ensure the file contains analyzable functions
  • Try "Code Flow: Analyze Current File" command

Navigation doesn't work:

  • Make sure the file being visualized is open in the editor
  • Check that line numbers are correct

Contributing

Contributions welcome! This was built for a hackathon but can be extended.

Hackathon Notes

Built during [Hackathon Name] to solve the common developer problem of understanding code structure in large codebases. The AR-like visualization helps developers "see" their code architecture without specialized hardware.

About

VS Code extension that uses tree-sitter to map function relationships across a codebase, with Gemini-powered Big O analysis and explanations.

Topics

ast-parsercode-visualizationdeveloper-toolsfastapigemini-apitree-sittertypescriptvscode-extension

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - eddywang4340/code-flow-visualizer: VS Code extension that uses tree-sitter to map function relationships across a codebase, with Gemini-powered Big O analysis and explanations. · GitHub
Skip to content
BranchesTags
Repository files navigation
Code Flow Visualizer
An interactive VS Code extension that visualizes code structure and function call relationships in real-time.
Features
  • 📊 Interactive Graph Visualization: See your code structure as an interactive node graph
  • 🔍 Function Analysis: Analyze function calls, complexity, and relationships
  • 🎯 Click to Navigate: Click any node to jump to that function in your code
  • 🌈 Complexity Coloring: Visual indicators for function complexity (green=low, yellow=medium, red=high)
  • 🔄 Multiple Layouts: Switch between force-directed and hierarchical layouts
  • 🌐 Multi-Language Support: Works with JavaScript, TypeScript, Python, and Java
  • ⚡ Real-time Updates: Automatically updates visualization when you save files
Installation & Setup
Step 1: Install Dependencies
cd code-flow-visualizer
npm install
Step 2: Compile TypeScript
npm run compile
Or for continuous compilation during development:
npm run watch
Step 3: Run the Extension
  1. Open the code-flow-visualizer folder in VS Code
  2. Press F5 to launch the Extension Development Host
  3. A new VS Code window will open with the extension loaded
Usage
Quick Start
  1. Open any JavaScript, TypeScript, Python, or Java file
  2. Press Ctrl+Alt+V (or Cmd+Alt+V on Mac)
  3. The visualizer panel will open showing your code structure
Commands
Access these via Command Palette (Ctrl+Shift+P or Cmd+Shift+P):
  • Code Flow: Start Visualization - Opens the visualizer panel
  • Code Flow: Analyze Current File - Analyzes the currently open file
  • Code Flow: Analyze Entire Workspace - Analyzes all supported files in workspace (up to 50 files)
Keyboard Shortcuts
  • Ctrl+Alt+V (Mac: Cmd+Alt+V) - Start visualization
Visualizer Controls
  • Click a node - Navigate to that function in your code
  • Drag background - Pan the view
  • Scroll wheel - Zoom in/out
  • Reset View - Reset zoom and position
  • Change Layout - Toggle between force-directed and hierarchical layouts
  • Zoom In/Out - Manual zoom controls
Understanding the Visualization
Node Size: Larger nodes indicate higher complexity (more conditional logic)
Node Color:
  • 🟢 Green: Low complexity (0-2 decision points)
  • 🟡 Yellow: Medium complexity (3-6 decision points)
  • 🔴 Red: High complexity (7+ decision points)
Connections: Lines show function calls (from caller to callee)
Info Panel: Hover over nodes to see detailed information
Development
Project Structure
code-flow-visualizer/
├── src/
│ ├── extension.ts # Main extension entry point
│ ├── analyzer.ts # Code analysis engine
│ └── visualizer.ts # Webview visualization manager
├── out/ # Compiled JavaScript (generated)
├── package.json # Extension manifest
└── tsconfig.json # TypeScript configuration

Key Components
Analyzer (analyzer.ts):
  • Parses source code to extract functions
  • Identifies function calls and relationships
  • Calculates cyclomatic complexity
  • Supports JS/TS, Python, and Java
Visualizer (visualizer.ts):
  • Manages the webview panel
  • Handles communication between extension and UI
  • Implements force-directed and hierarchical layouts
  • Provides interactive navigation
Debugging
  1. Set breakpoints in TypeScript files
  2. Press F5 to start debugging
  3. Debug output appears in the original VS Code window
  4. Extension runs in the new Extension Development Host window
Making Changes
  1. Edit TypeScript files in src/
  2. Run npm run compile or use watch mode (npm run watch)
  3. Press Ctrl+R (or Cmd+R) in the Extension Development Host to reload
Packaging for Distribution
Create VSIX Package
npx vsce package
This creates a .vsix file you can share or install manually.
Install VSIX Manually
code --install-extension code-flow-visualizer-0.0.1.vsix
Supported Languages
  • JavaScript (.js)
  • TypeScript (.ts)
  • Python (.py)
  • Java (.java)
Basic support for other languages with generic function pattern matching.
Future Enhancements
  •  Class diagram visualization
  •  Export visualization as SVG/PNG
  •  Filter by complexity threshold
  •  Search/filter functions
  •  Call stack tracing
  •  Performance profiling integration
  •  Minimap overview
  •  Collaborative annotations
Troubleshooting
Extension doesn't activate:
  • Check that you're in a workspace with supported file types
  • Look for errors in Output > Extension Host
Visualization is empty:
  • Ensure the file contains analyzable functions
  • Try "Code Flow: Analyze Current File" command
Navigation doesn't work:
  • Make sure the file being visualized is open in the editor
  • Check that line numbers are correct
Contributing
Contributions welcome! This was built for a hackathon but can be extended.
Hackathon Notes
Built during [Hackathon Name] to solve the common developer problem of understanding code structure in large codebases. The AR-like visualization helps developers "see" their code architecture without specialized hardware.
About
VS Code extension that uses tree-sitter to map function relationships across a codebase, with Gemini-powered Big O analysis and explanations.
Topics
ast-parsercode-visualizationdeveloper-toolsfastapigemini-apitree-sittertypescriptvscode-extension
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - eddywang4340/code-flow-visualizer: VS Code extension that uses tree-sitter to map function relationships across a codebase, with Gemini-powered Big O analysis and explanations. · GitHub
Skip to content
BranchesTags
Repository files navigation
Code Flow Visualizer
An interactive VS Code extension that visualizes code structure and function call relationships in real-time.
Features
  • 📊 Interactive Graph Visualization: See your code structure as an interactive node graph
  • 🔍 Function Analysis: Analyze function calls, complexity, and relationships
  • 🎯 Click to Navigate: Click any node to jump to that function in your code
  • 🌈 Complexity Coloring: Visual indicators for function complexity (green=low, yellow=medium, red=high)
  • 🔄 Multiple Layouts: Switch between force-directed and hierarchical layouts
  • 🌐 Multi-Language Support: Works with JavaScript, TypeScript, Python, and Java
  • ⚡ Real-time Updates: Automatically updates visualization when you save files
Installation & Setup
Step 1: Install Dependencies
cd code-flow-visualizer
npm install
Step 2: Compile TypeScript
npm run compile
Or for continuous compilation during development:
npm run watch
Step 3: Run the Extension
  1. Open the code-flow-visualizer folder in VS Code
  2. Press F5 to launch the Extension Development Host
  3. A new VS Code window will open with the extension loaded
Usage
Quick Start
  1. Open any JavaScript, TypeScript, Python, or Java file
  2. Press Ctrl+Alt+V (or Cmd+Alt+V on Mac)
  3. The visualizer panel will open showing your code structure
Commands
Access these via Command Palette (Ctrl+Shift+P or Cmd+Shift+P):
  • Code Flow: Start Visualization - Opens the visualizer panel
  • Code Flow: Analyze Current File - Analyzes the currently open file
  • Code Flow: Analyze Entire Workspace - Analyzes all supported files in workspace (up to 50 files)
Keyboard Shortcuts
  • Ctrl+Alt+V (Mac: Cmd+Alt+V) - Start visualization
Visualizer Controls
  • Click a node - Navigate to that function in your code
  • Drag background - Pan the view
  • Scroll wheel - Zoom in/out
  • Reset View - Reset zoom and position
  • Change Layout - Toggle between force-directed and hierarchical layouts
  • Zoom In/Out - Manual zoom controls
Understanding the Visualization
Node Size: Larger nodes indicate higher complexity (more conditional logic)
Node Color:
  • 🟢 Green: Low complexity (0-2 decision points)
  • 🟡 Yellow: Medium complexity (3-6 decision points)
  • 🔴 Red: High complexity (7+ decision points)
Connections: Lines show function calls (from caller to callee)
Info Panel: Hover over nodes to see detailed information
Development
Project Structure
code-flow-visualizer/
├── src/
│ ├── extension.ts # Main extension entry point
│ ├── analyzer.ts # Code analysis engine
│ └── visualizer.ts # Webview visualization manager
├── out/ # Compiled JavaScript (generated)
├── package.json # Extension manifest
└── tsconfig.json # TypeScript configuration

Key Components
Analyzer (analyzer.ts):
  • Parses source code to extract functions
  • Identifies function calls and relationships
  • Calculates cyclomatic complexity
  • Supports JS/TS, Python, and Java
Visualizer (visualizer.ts):
  • Manages the webview panel
  • Handles communication between extension and UI
  • Implements force-directed and hierarchical layouts
  • Provides interactive navigation
Debugging
  1. Set breakpoints in TypeScript files
  2. Press F5 to start debugging
  3. Debug output appears in the original VS Code window
  4. Extension runs in the new Extension Development Host window
Making Changes
  1. Edit TypeScript files in src/
  2. Run npm run compile or use watch mode (npm run watch)
  3. Press Ctrl+R (or Cmd+R) in the Extension Development Host to reload
Packaging for Distribution
Create VSIX Package
npx vsce package
This creates a .vsix file you can share or install manually.
Install VSIX Manually
code --install-extension code-flow-visualizer-0.0.1.vsix
Supported Languages
  • JavaScript (.js)
  • TypeScript (.ts)
  • Python (.py)
  • Java (.java)
Basic support for other languages with generic function pattern matching.
Future Enhancements
  •  Class diagram visualization
  •  Export visualization as SVG/PNG
  •  Filter by complexity threshold
  •  Search/filter functions
  •  Call stack tracing
  •  Performance profiling integration
  •  Minimap overview
  •  Collaborative annotations
Troubleshooting
Extension doesn't activate:
  • Check that you're in a workspace with supported file types
  • Look for errors in Output > Extension Host
Visualization is empty:
  • Ensure the file contains analyzable functions
  • Try "Code Flow: Analyze Current File" command
Navigation doesn't work:
  • Make sure the file being visualized is open in the editor
  • Check that line numbers are correct
Contributing
Contributions welcome! This was built for a hackathon but can be extended.
Hackathon Notes
Built during [Hackathon Name] to solve the common developer problem of understanding code structure in large codebases. The AR-like visualization helps developers "see" their code architecture without specialized hardware.
About
VS Code extension that uses tree-sitter to map function relationships across a codebase, with Gemini-powered Big O analysis and explanations.
Topics
ast-parsercode-visualizationdeveloper-toolsfastapigemini-apitree-sittertypescriptvscode-extension
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - eddywang4340/code-flow-visualizer: VS Code extension that uses tree-sitter to map function relationships across a codebase, with Gemini-powered Big O analysis and explanations. · GitHub
Skip to content
BranchesTags
Repository files navigation
Code Flow Visualizer
An interactive VS Code extension that visualizes code structure and function call relationships in real-time.
Features
  • 📊 Interactive Graph Visualization: See your code structure as an interactive node graph
  • 🔍 Function Analysis: Analyze function calls, complexity, and relationships
  • 🎯 Click to Navigate: Click any node to jump to that function in your code
  • 🌈 Complexity Coloring: Visual indicators for function complexity (green=low, yellow=medium, red=high)
  • 🔄 Multiple Layouts: Switch between force-directed and hierarchical layouts
  • 🌐 Multi-Language Support: Works with JavaScript, TypeScript, Python, and Java
  • ⚡ Real-time Updates: Automatically updates visualization when you save files
Installation & Setup
Step 1: Install Dependencies
cd code-flow-visualizer
npm install
Step 2: Compile TypeScript
npm run compile
Or for continuous compilation during development:
npm run watch
Step 3: Run the Extension
  1. Open the code-flow-visualizer folder in VS Code
  2. Press F5 to launch the Extension Development Host
  3. A new VS Code window will open with the extension loaded
Usage
Quick Start
  1. Open any JavaScript, TypeScript, Python, or Java file
  2. Press Ctrl+Alt+V (or Cmd+Alt+V on Mac)
  3. The visualizer panel will open showing your code structure
Commands
Access these via Command Palette (Ctrl+Shift+P or Cmd+Shift+P):
  • Code Flow: Start Visualization - Opens the visualizer panel
  • Code Flow: Analyze Current File - Analyzes the currently open file
  • Code Flow: Analyze Entire Workspace - Analyzes all supported files in workspace (up to 50 files)
Keyboard Shortcuts
  • Ctrl+Alt+V (Mac: Cmd+Alt+V) - Start visualization
Visualizer Controls
  • Click a node - Navigate to that function in your code
  • Drag background - Pan the view
  • Scroll wheel - Zoom in/out
  • Reset View - Reset zoom and position
  • Change Layout - Toggle between force-directed and hierarchical layouts
  • Zoom In/Out - Manual zoom controls
Understanding the Visualization
Node Size: Larger nodes indicate higher complexity (more conditional logic)
Node Color:
  • 🟢 Green: Low complexity (0-2 decision points)
  • 🟡 Yellow: Medium complexity (3-6 decision points)
  • 🔴 Red: High complexity (7+ decision points)
Connections: Lines show function calls (from caller to callee)
Info Panel: Hover over nodes to see detailed information
Development
Project Structure
code-flow-visualizer/
├── src/
│ ├── extension.ts # Main extension entry point
│ ├── analyzer.ts # Code analysis engine
│ └── visualizer.ts # Webview visualization manager
├── out/ # Compiled JavaScript (generated)
├── package.json # Extension manifest
└── tsconfig.json # TypeScript configuration

Key Components
Analyzer (analyzer.ts):
  • Parses source code to extract functions
  • Identifies function calls and relationships
  • Calculates cyclomatic complexity
  • Supports JS/TS, Python, and Java
Visualizer (visualizer.ts):
  • Manages the webview panel
  • Handles communication between extension and UI
  • Implements force-directed and hierarchical layouts
  • Provides interactive navigation
Debugging
  1. Set breakpoints in TypeScript files
  2. Press F5 to start debugging
  3. Debug output appears in the original VS Code window
  4. Extension runs in the new Extension Development Host window
Making Changes
  1. Edit TypeScript files in src/
  2. Run npm run compile or use watch mode (npm run watch)
  3. Press Ctrl+R (or Cmd+R) in the Extension Development Host to reload
Packaging for Distribution
Create VSIX Package
npx vsce package
This creates a .vsix file you can share or install manually.
Install VSIX Manually
code --install-extension code-flow-visualizer-0.0.1.vsix
Supported Languages
  • JavaScript (.js)
  • TypeScript (.ts)
  • Python (.py)
  • Java (.java)
Basic support for other languages with generic function pattern matching.
Future Enhancements
  •  Class diagram visualization
  •  Export visualization as SVG/PNG
  •  Filter by complexity threshold
  •  Search/filter functions
  •  Call stack tracing
  •  Performance profiling integration
  •  Minimap overview
  •  Collaborative annotations
Troubleshooting
Extension doesn't activate:
  • Check that you're in a workspace with supported file types
  • Look for errors in Output > Extension Host
Visualization is empty:
  • Ensure the file contains analyzable functions
  • Try "Code Flow: Analyze Current File" command
Navigation doesn't work:
  • Make sure the file being visualized is open in the editor
  • Check that line numbers are correct
Contributing
Contributions welcome! This was built for a hackathon but can be extended.
Hackathon Notes
Built during [Hackathon Name] to solve the common developer problem of understanding code structure in large codebases. The AR-like visualization helps developers "see" their code architecture without specialized hardware.
About
VS Code extension that uses tree-sitter to map function relationships across a codebase, with Gemini-powered Big O analysis and explanations.
Topics
ast-parsercode-visualizationdeveloper-toolsfastapigemini-apitree-sittertypescriptvscode-extension
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - eddywang4340/code-flow-visualizer: VS Code extension that uses tree-sitter to map function relationships across a codebase, with Gemini-powered Big O analysis and explanations. · GitHub
Skip to content
BranchesTags
Repository files navigation
Code Flow Visualizer
An interactive VS Code extension that visualizes code structure and function call relationships in real-time.
Features
  • 📊 Interactive Graph Visualization: See your code structure as an interactive node graph
  • 🔍 Function Analysis: Analyze function calls, complexity, and relationships
  • 🎯 Click to Navigate: Click any node to jump to that function in your code
  • 🌈 Complexity Coloring: Visual indicators for function complexity (green=low, yellow=medium, red=high)
  • 🔄 Multiple Layouts: Switch between force-directed and hierarchical layouts
  • 🌐 Multi-Language Support: Works with JavaScript, TypeScript, Python, and Java
  • ⚡ Real-time Updates: Automatically updates visualization when you save files
Installation & Setup
Step 1: Install Dependencies
cd code-flow-visualizer
npm install
Step 2: Compile TypeScript
npm run compile
Or for continuous compilation during development:
npm run watch
Step 3: Run the Extension
  1. Open the code-flow-visualizer folder in VS Code
  2. Press F5 to launch the Extension Development Host
  3. A new VS Code window will open with the extension loaded
Usage
Quick Start
  1. Open any JavaScript, TypeScript, Python, or Java file
  2. Press Ctrl+Alt+V (or Cmd+Alt+V on Mac)
  3. The visualizer panel will open showing your code structure
Commands
Access these via Command Palette (Ctrl+Shift+P or Cmd+Shift+P):
  • Code Flow: Start Visualization - Opens the visualizer panel
  • Code Flow: Analyze Current File - Analyzes the currently open file
  • Code Flow: Analyze Entire Workspace - Analyzes all supported files in workspace (up to 50 files)
Keyboard Shortcuts
  • Ctrl+Alt+V (Mac: Cmd+Alt+V) - Start visualization
Visualizer Controls
  • Click a node - Navigate to that function in your code
  • Drag background - Pan the view
  • Scroll wheel - Zoom in/out
  • Reset View - Reset zoom and position
  • Change Layout - Toggle between force-directed and hierarchical layouts
  • Zoom In/Out - Manual zoom controls
Understanding the Visualization
Node Size: Larger nodes indicate higher complexity (more conditional logic)
Node Color:
  • 🟢 Green: Low complexity (0-2 decision points)
  • 🟡 Yellow: Medium complexity (3-6 decision points)
  • 🔴 Red: High complexity (7+ decision points)
Connections: Lines show function calls (from caller to callee)
Info Panel: Hover over nodes to see detailed information
Development
Project Structure
code-flow-visualizer/
├── src/
│ ├── extension.ts # Main extension entry point
│ ├── analyzer.ts # Code analysis engine
│ └── visualizer.ts # Webview visualization manager
├── out/ # Compiled JavaScript (generated)
├── package.json # Extension manifest
└── tsconfig.json # TypeScript configuration

Key Components
Analyzer (analyzer.ts):
  • Parses source code to extract functions
  • Identifies function calls and relationships
  • Calculates cyclomatic complexity
  • Supports JS/TS, Python, and Java
Visualizer (visualizer.ts):
  • Manages the webview panel
  • Handles communication between extension and UI
  • Implements force-directed and hierarchical layouts
  • Provides interactive navigation
Debugging
  1. Set breakpoints in TypeScript files
  2. Press F5 to start debugging
  3. Debug output appears in the original VS Code window
  4. Extension runs in the new Extension Development Host window
Making Changes
  1. Edit TypeScript files in src/
  2. Run npm run compile or use watch mode (npm run watch)
  3. Press Ctrl+R (or Cmd+R) in the Extension Development Host to reload
Packaging for Distribution
Create VSIX Package
npx vsce package
This creates a .vsix file you can share or install manually.
Install VSIX Manually
code --install-extension code-flow-visualizer-0.0.1.vsix
Supported Languages
  • JavaScript (.js)
  • TypeScript (.ts)
  • Python (.py)
  • Java (.java)
Basic support for other languages with generic function pattern matching.
Future Enhancements
  •  Class diagram visualization
  •  Export visualization as SVG/PNG
  •  Filter by complexity threshold
  •  Search/filter functions
  •  Call stack tracing
  •  Performance profiling integration
  •  Minimap overview
  •  Collaborative annotations
Troubleshooting
Extension doesn't activate:
  • Check that you're in a workspace with supported file types
  • Look for errors in Output > Extension Host
Visualization is empty:
  • Ensure the file contains analyzable functions
  • Try "Code Flow: Analyze Current File" command
Navigation doesn't work:
  • Make sure the file being visualized is open in the editor
  • Check that line numbers are correct
Contributing
Contributions welcome! This was built for a hackathon but can be extended.
Hackathon Notes
Built during [Hackathon Name] to solve the common developer problem of understanding code structure in large codebases. The AR-like visualization helps developers "see" their code architecture without specialized hardware.
About
VS Code extension that uses tree-sitter to map function relationships across a codebase, with Gemini-powered Big O analysis and explanations.
Topics
ast-parsercode-visualizationdeveloper-toolsfastapigemini-apitree-sittertypescriptvscode-extension
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - eddywang4340/code-flow-visualizer: VS Code extension that uses tree-sitter to map function relationships across a codebase, with Gemini-powered Big O analysis and explanations. · GitHub
Skip to content
BranchesTags
Repository files navigation
Code Flow Visualizer
An interactive VS Code extension that visualizes code structure and function call relationships in real-time.
Features
  • 📊 Interactive Graph Visualization: See your code structure as an interactive node graph
  • 🔍 Function Analysis: Analyze function calls, complexity, and relationships
  • 🎯 Click to Navigate: Click any node to jump to that function in your code
  • 🌈 Complexity Coloring: Visual indicators for function complexity (green=low, yellow=medium, red=high)
  • 🔄 Multiple Layouts: Switch between force-directed and hierarchical layouts
  • 🌐 Multi-Language Support: Works with JavaScript, TypeScript, Python, and Java
  • ⚡ Real-time Updates: Automatically updates visualization when you save files
Installation & Setup
Step 1: Install Dependencies
cd code-flow-visualizer
npm install
Step 2: Compile TypeScript
npm run compile
Or for continuous compilation during development:
npm run watch
Step 3: Run the Extension
  1. Open the code-flow-visualizer folder in VS Code
  2. Press F5 to launch the Extension Development Host
  3. A new VS Code window will open with the extension loaded
Usage
Quick Start
  1. Open any JavaScript, TypeScript, Python, or Java file
  2. Press Ctrl+Alt+V (or Cmd+Alt+V on Mac)
  3. The visualizer panel will open showing your code structure
Commands
Access these via Command Palette (Ctrl+Shift+P or Cmd+Shift+P):
  • Code Flow: Start Visualization - Opens the visualizer panel
  • Code Flow: Analyze Current File - Analyzes the currently open file
  • Code Flow: Analyze Entire Workspace - Analyzes all supported files in workspace (up to 50 files)
Keyboard Shortcuts
  • Ctrl+Alt+V (Mac: Cmd+Alt+V) - Start visualization
Visualizer Controls
  • Click a node - Navigate to that function in your code
  • Drag background - Pan the view
  • Scroll wheel - Zoom in/out
  • Reset View - Reset zoom and position
  • Change Layout - Toggle between force-directed and hierarchical layouts
  • Zoom In/Out - Manual zoom controls
Understanding the Visualization
Node Size: Larger nodes indicate higher complexity (more conditional logic)
Node Color:
  • 🟢 Green: Low complexity (0-2 decision points)
  • 🟡 Yellow: Medium complexity (3-6 decision points)
  • 🔴 Red: High complexity (7+ decision points)
Connections: Lines show function calls (from caller to callee)
Info Panel: Hover over nodes to see detailed information
Development
Project Structure
code-flow-visualizer/
├── src/
│ ├── extension.ts # Main extension entry point
│ ├── analyzer.ts # Code analysis engine
│ └── visualizer.ts # Webview visualization manager
├── out/ # Compiled JavaScript (generated)
├── package.json # Extension manifest
└── tsconfig.json # TypeScript configuration

Key Components
Analyzer (analyzer.ts):
  • Parses source code to extract functions
  • Identifies function calls and relationships
  • Calculates cyclomatic complexity
  • Supports JS/TS, Python, and Java
Visualizer (visualizer.ts):
  • Manages the webview panel
  • Handles communication between extension and UI
  • Implements force-directed and hierarchical layouts
  • Provides interactive navigation
Debugging
  1. Set breakpoints in TypeScript files
  2. Press F5 to start debugging
  3. Debug output appears in the original VS Code window
  4. Extension runs in the new Extension Development Host window
Making Changes
  1. Edit TypeScript files in src/
  2. Run npm run compile or use watch mode (npm run watch)
  3. Press Ctrl+R (or Cmd+R) in the Extension Development Host to reload
Packaging for Distribution
Create VSIX Package
npx vsce package
This creates a .vsix file you can share or install manually.
Install VSIX Manually
code --install-extension code-flow-visualizer-0.0.1.vsix
Supported Languages
  • JavaScript (.js)
  • TypeScript (.ts)
  • Python (.py)
  • Java (.java)
Basic support for other languages with generic function pattern matching.
Future Enhancements
  •  Class diagram visualization
  •  Export visualization as SVG/PNG
  •  Filter by complexity threshold
  •  Search/filter functions
  •  Call stack tracing
  •  Performance profiling integration
  •  Minimap overview
  •  Collaborative annotations
Troubleshooting
Extension doesn't activate:
  • Check that you're in a workspace with supported file types
  • Look for errors in Output > Extension Host
Visualization is empty:
  • Ensure the file contains analyzable functions
  • Try "Code Flow: Analyze Current File" command
Navigation doesn't work:
  • Make sure the file being visualized is open in the editor
  • Check that line numbers are correct
Contributing
Contributions welcome! This was built for a hackathon but can be extended.
Hackathon Notes
Built during [Hackathon Name] to solve the common developer problem of understanding code structure in large codebases. The AR-like visualization helps developers "see" their code architecture without specialized hardware.
About
VS Code extension that uses tree-sitter to map function relationships across a codebase, with Gemini-powered Big O analysis and explanations.
Topics
ast-parsercode-visualizationdeveloper-toolsfastapigemini-apitree-sittertypescriptvscode-extension
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - eddywang4340/code-flow-visualizer: VS Code extension that uses tree-sitter to map function relationships across a codebase, with Gemini-powered Big O analysis and explanations. · GitHub
Skip to content
BranchesTags
Repository files navigation
Code Flow Visualizer
An interactive VS Code extension that visualizes code structure and function call relationships in real-time.
Features
  • 📊 Interactive Graph Visualization: See your code structure as an interactive node graph
  • 🔍 Function Analysis: Analyze function calls, complexity, and relationships
  • 🎯 Click to Navigate: Click any node to jump to that function in your code
  • 🌈 Complexity Coloring: Visual indicators for function complexity (green=low, yellow=medium, red=high)
  • 🔄 Multiple Layouts: Switch between force-directed and hierarchical layouts
  • 🌐 Multi-Language Support: Works with JavaScript, TypeScript, Python, and Java
  • ⚡ Real-time Updates: Automatically updates visualization when you save files
Installation & Setup
Step 1: Install Dependencies
cd code-flow-visualizer
npm install
Step 2: Compile TypeScript
npm run compile
Or for continuous compilation during development:
npm run watch
Step 3: Run the Extension
  1. Open the code-flow-visualizer folder in VS Code
  2. Press F5 to launch the Extension Development Host
  3. A new VS Code window will open with the extension loaded
Usage
Quick Start
  1. Open any JavaScript, TypeScript, Python, or Java file
  2. Press Ctrl+Alt+V (or Cmd+Alt+V on Mac)
  3. The visualizer panel will open showing your code structure
Commands
Access these via Command Palette (Ctrl+Shift+P or Cmd+Shift+P):
  • Code Flow: Start Visualization - Opens the visualizer panel
  • Code Flow: Analyze Current File - Analyzes the currently open file
  • Code Flow: Analyze Entire Workspace - Analyzes all supported files in workspace (up to 50 files)
Keyboard Shortcuts
  • Ctrl+Alt+V (Mac: Cmd+Alt+V) - Start visualization
Visualizer Controls
  • Click a node - Navigate to that function in your code
  • Drag background - Pan the view
  • Scroll wheel - Zoom in/out
  • Reset View - Reset zoom and position
  • Change Layout - Toggle between force-directed and hierarchical layouts
  • Zoom In/Out - Manual zoom controls
Understanding the Visualization
Node Size: Larger nodes indicate higher complexity (more conditional logic)
Node Color:
  • 🟢 Green: Low complexity (0-2 decision points)
  • 🟡 Yellow: Medium complexity (3-6 decision points)
  • 🔴 Red: High complexity (7+ decision points)
Connections: Lines show function calls (from caller to callee)
Info Panel: Hover over nodes to see detailed information
Development
Project Structure
code-flow-visualizer/
├── src/
│ ├── extension.ts # Main extension entry point
│ ├── analyzer.ts # Code analysis engine
│ └── visualizer.ts # Webview visualization manager
├── out/ # Compiled JavaScript (generated)
├── package.json # Extension manifest
└── tsconfig.json # TypeScript configuration

Key Components
Analyzer (analyzer.ts):
  • Parses source code to extract functions
  • Identifies function calls and relationships
  • Calculates cyclomatic complexity
  • Supports JS/TS, Python, and Java
Visualizer (visualizer.ts):
  • Manages the webview panel
  • Handles communication between extension and UI
  • Implements force-directed and hierarchical layouts
  • Provides interactive navigation
Debugging
  1. Set breakpoints in TypeScript files
  2. Press F5 to start debugging
  3. Debug output appears in the original VS Code window
  4. Extension runs in the new Extension Development Host window
Making Changes
  1. Edit TypeScript files in src/
  2. Run npm run compile or use watch mode (npm run watch)
  3. Press Ctrl+R (or Cmd+R) in the Extension Development Host to reload
Packaging for Distribution
Create VSIX Package
npx vsce package
This creates a .vsix file you can share or install manually.
Install VSIX Manually
code --install-extension code-flow-visualizer-0.0.1.vsix
Supported Languages
  • JavaScript (.js)
  • TypeScript (.ts)
  • Python (.py)
  • Java (.java)
Basic support for other languages with generic function pattern matching.
Future Enhancements
  •  Class diagram visualization
  •  Export visualization as SVG/PNG
  •  Filter by complexity threshold
  •  Search/filter functions
  •  Call stack tracing
  •  Performance profiling integration
  •  Minimap overview
  •  Collaborative annotations
Troubleshooting
Extension doesn't activate:
  • Check that you're in a workspace with supported file types
  • Look for errors in Output > Extension Host
Visualization is empty:
  • Ensure the file contains analyzable functions
  • Try "Code Flow: Analyze Current File" command
Navigation doesn't work:
  • Make sure the file being visualized is open in the editor
  • Check that line numbers are correct
Contributing
Contributions welcome! This was built for a hackathon but can be extended.
Hackathon Notes
Built during [Hackathon Name] to solve the common developer problem of understanding code structure in large codebases. The AR-like visualization helps developers "see" their code architecture without specialized hardware.
About
VS Code extension that uses tree-sitter to map function relationships across a codebase, with Gemini-powered Big O analysis and explanations.
Topics
ast-parsercode-visualizationdeveloper-toolsfastapigemini-apitree-sittertypescriptvscode-extension
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - eddywang4340/code-flow-visualizer: VS Code extension that uses tree-sitter to map function relationships across a codebase, with Gemini-powered Big O analysis and explanations. · GitHub
Skip to content
BranchesTags
Repository files navigation
Code Flow Visualizer
An interactive VS Code extension that visualizes code structure and function call relationships in real-time.
Features
  • 📊 Interactive Graph Visualization: See your code structure as an interactive node graph
  • 🔍 Function Analysis: Analyze function calls, complexity, and relationships
  • 🎯 Click to Navigate: Click any node to jump to that function in your code
  • 🌈 Complexity Coloring: Visual indicators for function complexity (green=low, yellow=medium, red=high)
  • 🔄 Multiple Layouts: Switch between force-directed and hierarchical layouts
  • 🌐 Multi-Language Support: Works with JavaScript, TypeScript, Python, and Java
  • ⚡ Real-time Updates: Automatically updates visualization when you save files
Installation & Setup
Step 1: Install Dependencies
cd code-flow-visualizer
npm install
Step 2: Compile TypeScript
npm run compile
Or for continuous compilation during development:
npm run watch
Step 3: Run the Extension
  1. Open the code-flow-visualizer folder in VS Code
  2. Press F5 to launch the Extension Development Host
  3. A new VS Code window will open with the extension loaded
Usage
Quick Start
  1. Open any JavaScript, TypeScript, Python, or Java file
  2. Press Ctrl+Alt+V (or Cmd+Alt+V on Mac)
  3. The visualizer panel will open showing your code structure
Commands
Access these via Command Palette (Ctrl+Shift+P or Cmd+Shift+P):
  • Code Flow: Start Visualization - Opens the visualizer panel
  • Code Flow: Analyze Current File - Analyzes the currently open file
  • Code Flow: Analyze Entire Workspace - Analyzes all supported files in workspace (up to 50 files)
Keyboard Shortcuts
  • Ctrl+Alt+V (Mac: Cmd+Alt+V) - Start visualization
Visualizer Controls
  • Click a node - Navigate to that function in your code
  • Drag background - Pan the view
  • Scroll wheel - Zoom in/out
  • Reset View - Reset zoom and position
  • Change Layout - Toggle between force-directed and hierarchical layouts
  • Zoom In/Out - Manual zoom controls
Understanding the Visualization
Node Size: Larger nodes indicate higher complexity (more conditional logic)
Node Color:
  • 🟢 Green: Low complexity (0-2 decision points)
  • 🟡 Yellow: Medium complexity (3-6 decision points)
  • 🔴 Red: High complexity (7+ decision points)
Connections: Lines show function calls (from caller to callee)
Info Panel: Hover over nodes to see detailed information
Development
Project Structure
code-flow-visualizer/
├── src/
│ ├── extension.ts # Main extension entry point
│ ├── analyzer.ts # Code analysis engine
│ └── visualizer.ts # Webview visualization manager
├── out/ # Compiled JavaScript (generated)
├── package.json # Extension manifest
└── tsconfig.json # TypeScript configuration

Key Components
Analyzer (analyzer.ts):
  • Parses source code to extract functions
  • Identifies function calls and relationships
  • Calculates cyclomatic complexity
  • Supports JS/TS, Python, and Java
Visualizer (visualizer.ts):
  • Manages the webview panel
  • Handles communication between extension and UI
  • Implements force-directed and hierarchical layouts
  • Provides interactive navigation
Debugging
  1. Set breakpoints in TypeScript files
  2. Press F5 to start debugging
  3. Debug output appears in the original VS Code window
  4. Extension runs in the new Extension Development Host window
Making Changes
  1. Edit TypeScript files in src/
  2. Run npm run compile or use watch mode (npm run watch)
  3. Press Ctrl+R (or Cmd+R) in the Extension Development Host to reload
Packaging for Distribution
Create VSIX Package
npx vsce package
This creates a .vsix file you can share or install manually.
Install VSIX Manually
code --install-extension code-flow-visualizer-0.0.1.vsix
Supported Languages
  • JavaScript (.js)
  • TypeScript (.ts)
  • Python (.py)
  • Java (.java)
Basic support for other languages with generic function pattern matching.
Future Enhancements
  •  Class diagram visualization
  •  Export visualization as SVG/PNG
  •  Filter by complexity threshold
  •  Search/filter functions
  •  Call stack tracing
  •  Performance profiling integration
  •  Minimap overview
  •  Collaborative annotations
Troubleshooting
Extension doesn't activate:
  • Check that you're in a workspace with supported file types
  • Look for errors in Output > Extension Host
Visualization is empty:
  • Ensure the file contains analyzable functions
  • Try "Code Flow: Analyze Current File" command
Navigation doesn't work:
  • Make sure the file being visualized is open in the editor
  • Check that line numbers are correct
Contributing
Contributions welcome! This was built for a hackathon but can be extended.
Hackathon Notes
Built during [Hackathon Name] to solve the common developer problem of understanding code structure in large codebases. The AR-like visualization helps developers "see" their code architecture without specialized hardware.
About
VS Code extension that uses tree-sitter to map function relationships across a codebase, with Gemini-powered Big O analysis and explanations.
Topics
ast-parsercode-visualizationdeveloper-toolsfastapigemini-apitree-sittertypescriptvscode-extension
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages