github.com/DucPhamNgoc08/CodeVisualizer @v1.0.6

[![Contributors][contributors-shield]][contributors-url] [![Forks][forks-shield]][forks-url] [![Stargazers][stars-shield]][stars-url] [![Issues][issues-shield]][issues-url] [![MIT License][license-shield]][license-url] [![VS Code][vscode-shield]][vscode-url]

CodeVisualizer

Real-time interactive flowcharts and dependency visualization for your code



<a href="https://marketplace.visualstudio.com/items?itemName=DucPhamNgoc.codevisualizer">Download Extension</a>
·
<a href="https://github.com/DucPhamNgoc08/CodeVisualizer/issues/new?labels=bug&template=bug-report---.md">Report Bug</a>
·
<a href="https://github.com/DucPhamNgoc08/CodeVisualizer/issues/new?labels=enhancement&template=feature-request---.md">Request Feature</a>

Table of Contents

1. About The Project
   • Built With
   • Key Features
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Supported Languages
5. How It Works
6. Privacy & Security
7. Contributing
8. License
9. Contact

About The Project

![CodeVisualizer Demo][product-video]

CodeVisualizer is a powerful VS Code extension that transforms the way you understand and navigate code. Whether you're diving into a new codebase, debugging complex logic, or documenting your architecture, CodeVisualizer provides instant visual insights through two powerful visualization modes.

Why CodeVisualizer?

• Understand complex codebases instantly with interactive dependency graphs showing how your modules connect
• Debug and comprehend function logic through beautiful flowcharts that reveal control flow, loops, and decision points
• Save hours of manual diagramming - generate production-ready visualizations in seconds
• Support for 7+ programming languages with intelligent semantic analysis
• Privacy-first design - all code analysis happens locally on your machine

CodeVisualizer bridges the gap between code and comprehension, making it easier for developers to onboard, debug, and maintain software projects of any size.

(back to top)

Built With

This extension leverages cutting-edge technologies to deliver fast, accurate code analysis and beautiful visualizations:

• [![TypeScript][TypeScript]][TypeScript-url]
• [![Node.js][Node.js]][Node-url]
• [![VS Code API][VSCode]][VSCode-url]
• [![Tree-sitter][Tree-sitter]][Tree-sitter-url]
• [![Mermaid][Mermaid]][Mermaid-url]
• [![WebAssembly][WASM]][WASM-url]

(back to top)

Key Features

Note on Language Support:
- Function-Level Flowcharts: Supports Python, TypeScript/JavaScript, Java, C++, C, Rust, and Go
- Codebase Dependency Visualization: Currently supports TypeScript/JavaScript and Python (more languages coming soon)
- AI-Powered Features: Available only for Function-Level Flowcharts

Function-Level Flowchart Generation

Transform individual functions into interactive, visual flowcharts to understand control flow, decision points, and execution paths.

Capabilities: - Multi-language Support: Parse and visualize functions across Python, TypeScript/JavaScript, Java, C++, C, Rust, and Go - Interactive Visualization: Click nodes to navigate to code, zoom and pan for detailed exploration - Multiple Views: Sidebar view for quick reference and detachable panel windows for deep analysis - Semantic Analysis: Intelligent understanding of control flow, loops, exceptions, and async operations - 9 Beautiful Themes: Choose from Monokai, Catppuccin, GitHub, Solarized, One Dark Pro, Dracula, Material Theme, Nord, or Tokyo Night - Auto-refresh: Automatically update flowcharts as you edit code

Codebase Dependency Visualization

Analyze and visualize your entire codebase structure, revealing module dependencies, file relationships, and project architecture at a glance.

Capabilities: - Dependency Graph: Complete visualization of import/require relationships between modules - Color-Coded Categories: Automatic file classification into Core, Report, Config, Tool, and Entry categories - VSCode Theme Integration: Seamless dark/light theme support matching your editor - High-Contrast Visualization: Color-coded edges and strokes for instant comprehension - Interactive Navigation: Zoom, pan, and explore even the largest dependency graphs smoothly - Folder Hierarchy: Smart subgraphs organized by your directory structure

AI-Powered Features (Function Flowcharts)

Note: AI features enhance function-level flowcharts only, making complex logic instantly readable.

• Smart Labels: AI-generated human-friendly descriptions replace cryptic variable names and expressions
• Multiple Providers: Works with OpenAI, Gemini, Groq, Ollama (local), and Anthropic
• Intelligent Caching: Minimizes API calls and costs through efficient label caching
• Customizable Styles: Choose between concise, explanatory, or technical label formats
• Multi-language Support: Generate labels in your preferred language for global teams

(back to top)

Getting Started

Get CodeVisualizer up and running in your VS Code environment in just a few clicks.

Prerequisites

• Visual Studio Code version 1.105.0 or higher
• Active workspace with supported programming languages (Python, TypeScript/JavaScript, Java, C++, C, Rust, or Go)

Installation

1. Install from VS Code Marketplace
2. Open VS Code
3. Press Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (Mac) to open Extensions
4. Search for "CodeVisualizer"

5. Click Install

6. Install from VSIX file (if applicable) sh code --install-extension codevisualizer-1.0.2.vsix

7. Configure AI Features (Optional)

8. Open Settings: Ctrl+, (Windows/Linux) or Cmd+, (Mac)
9. Search for "CodeVisualizer"
10. Enable AI labels and add your API key for supported providers

11. Or use Ollama for completely local AI processing

12. Start Visualizing

13. Right-click any function → "CodeVisualizer: Open flowchart in new window"
14. Right-click any folder → "Visualize Codebase Flow"

(back to top)

Usage

Generating Function Flowcharts

1. Open any supported source file in VS Code
2. Right-click in the editor
3. Select "CodeVisualizer: Open flowchart in new window"
4. Alternatively, use Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and type "CodeVisualizer"
5. Explore the interactive flowchart:
6. Click nodes to jump to corresponding code
7. Zoom in/out with mouse wheel
8. Pan by clicking and dragging
9. Switch themes from the settings icon

Visualizing Codebase Dependencies

1. In the Explorer sidebar, right-click on any folder containing your source code
2. Alternatively, use Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and type "Visualize Codebase Flow"
3. Select "Visualize Codebase Flow"
4. Explore the dependency graph:
5. View color-coded file categories
6. Trace import chains between modules
7. Identify circular dependencies
8. Understand your project architecture at a glance

AI-Enhanced Labels (Function Flowcharts)

1. Enable AI labels in Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and type "CodeVisualizer: Enable AI Labels"
2. Configure your preferred LLM provider and API key
3. Generate a flowchart - AI labels will automatically replace technical labels

(back to top)

Supported Languages

Function-Level Flowcharts

Language	Status
Python	Full Support
TypeScript/JavaScript	Full Support
Java	Full Support
C++	Full Support
C	Full Support
Rust	Full Support
Go	Full Support

Codebase Dependency Visualization

Language	Status	File Extensions
TypeScript/JavaScript	Full Support	.js, .ts, .mjs, .cjs
Python	Full Support	.py

Planned Support: Java, C++, C, Rust, Go dependency analysis coming in future releases.

(back to top)

How It Works

Function-Level Flowchart Pipeline

1. Parsing: Tree-sitter parsers (compiled to WASM) convert source code into Abstract Syntax Trees (AST)
2. Analysis: AST traversal identifies control structures, function boundaries, exception handling, async operations, and data flow
3. IR Generation: AST is transformed into an Intermediate Representation (IR) with nodes representing code blocks and edges showing flow
4. Visualization: IR is converted to Mermaid diagram syntax
5. Rendering: Mermaid.js renders an interactive flowchart in a VS Code webview panel

Codebase Dependency Analysis Pipeline

1. File Discovery: Scans workspace recursively for supported file types
2. Dependency Extraction: Parses import/require statements using language-specific parsers
3. Path Resolution: Resolves relative and absolute import paths to actual file locations
4. Graph Building: Constructs a directed graph with files as nodes and dependencies as edges
5. Classification: Categorizes files based on naming patterns and directory structure
6. Visualization: Generates Mermaid flowchart with color-coded nodes and edges
7. Rendering: Displays an interactive graph with zoom, pan, and navigation features

AI Label Generation (Function Flowcharts)

1. Extraction: Extracts node labels from generated Mermaid code
2. Caching: Checks local cache for previously generated labels
3. Translation: Sends uncached labels to selected LLM provider with optimized prompts
4. Replacement: Replaces technical labels with human-friendly descriptions
5. Storage: Caches results locally to minimize future API calls

(back to top)

Privacy & Security

Data Handling

Code Analysis: - All code parsing happens 100% locally on your machine - No code is ever sent to external servers for flowchart generation - AST parsing uses local Tree-sitter WASM parsers with zero network requests - Your source code never leaves your computer

AI Features (Optional & Opt-in): - When AI labels are enabled, only node labels (short text snippets, not full code) are sent to LLM providers - API keys are stored securely using VS Code's built-in Secret Storage API with encryption - Smart caching minimizes API calls and reduces data transmission - Use Ollama for complete privacy with local model processing - All AI features are disabled by default and require explicit user activation

What Data is Collected?

None. CodeVisualizer does not collect, store, or transmit your data.

Exception: When AI labels are explicitly enabled by you, minimal label text (e.g., "if x > 0", "return result") is sent to your chosen LLM provider for translation. This is completely optional and can be disabled anytime.

API Key Security

• Stored using VS Code's secure Secret Storage (encrypted at rest)
• Never transmitted except to your selected LLM provider during API calls
• Can be cleared instantly via settings
• Not included in any logs or diagnostic reports

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Development Setup

# Clone the repository
git clone https://github.com/DucPhamNgoc08/CodeVisualizer.git

# Install dependencies
npm install

# Open in VS Code
code .

# Press F5 to launch Extension Development Host

Top contributors:

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Duc Pham Ngoc - Ducphamngoc39@