CodeVisualizer is a VS Code extension designed to enhance code comprehension by providing real-time, interactive visualizations. It offers function-level flowcharts for understanding code control flow and codebase-level dependency graphs for analyzing project structure. This tool benefits developers by reducing the time spent on manual diagramming, improving onboarding to new codebases, and simplifying debugging of complex logic.

How It Works

Function-level flowcharts are generated via a pipeline that parses code into Abstract Syntax Trees (AST) using Tree-sitter WASM parsers. The AST is then analyzed to identify control structures, transformed into an Intermediate Representation (IR), and finally converted to Mermaid diagram syntax for rendering within a VS Code webview. Codebase dependency analysis involves discovering files, extracting import/require statements using language-specific parsers, resolving paths, and building a directed graph of file dependencies. This graph is then visualized using Mermaid with color-coded nodes. Optional AI features leverage LLM providers (OpenAI, Gemini, etc., or local Ollama) to generate human-friendly labels for flowchart nodes, enhancing readability. All core code analysis is performed locally for privacy.

Quick Start & Requirements

• Primary install: Install from the VS Code Marketplace by searching for "CodeVisualizer". Alternatively, install from a VSIX file.
• Prerequisites: Visual Studio Code version 1.105.0 or higher, and an active workspace with supported programming languages.
• AI Configuration (Optional): Enable AI labels in VS Code settings and provide an API key for supported providers or configure Ollama for local processing.
• Usage: Right-click any function and select "CodeVisualizer: Open flowchart in new window", or right-click a folder and select "Visualize Codebase Flow".
• Links: Project repository: https://github.com/DucPhamNgoc08/CodeVisualizer

Highlighted Details

• Supports function-level flowcharts for Python, TypeScript/JavaScript, Java, C++, C, Rust, and Go.
• Codebase dependency visualization is currently available for TypeScript/JavaScript and Python, with more languages planned.
• Optional AI-powered features provide smart, human-friendly labels for function flowcharts, supporting multiple LLM providers and local processing via Ollama.
• Features interactive visualizations with click-to-code navigation, zoom, and pan capabilities, along with multiple themes.
• Emphasizes a privacy-first design with all code analysis performed locally on the user's machine.

Maintenance & Community

The project is maintained by Duc Pham Ngoc. Support and contributions are managed through GitHub Issues and Discussions. The primary contact is Duc Pham Ngoc via email (Ducphamngoc39@gmail.com).

Licensing & Compatibility

Distributed under the MIT License. This license is permissive and generally compatible with commercial use and linking in closed-source projects.

Limitations & Caveats

Codebase dependency visualization is currently limited to TypeScript/JavaScript and Python; support for Java, C++, C, Rust, and Go is planned for future releases. AI features are opt-in and require explicit configuration, including API key management or local model setup.