# Introduction
Source: https://docs.vxplain.com/index
Vxplain is a VS Code extension that helps you understand any codebase in minutes by generating architecture diagrams, call graphs, and more.
## Understand Any Codebase in Minutes, Not Weeks
Vxplain is a powerful VS Code extension that helps developers understand any codebase. It reduces onboarding time from weeks to minutes by automatically generating visual representations of your code architecture and logic flows.
With Vxplain, you can:
* Generate [architecture diagrams](/src/features/arch-diagrams) to visualize your codebase.
* Create [call graphs](/src/features/call-graphs) to understand the relationships between functions.
* View a [directory tree](/src/features/directory-tree) of your project.
* Generate [diagrams from code snippets](/src/features/code-to-diagram).
* Get multi-level [code summaries](/src/features/summaries).
Ready to get started? Check out the [Quickstart](/src/quickstart) guide to install Vxplain and generate your first diagram.
# Keyboard Shortcuts
Source: https://docs.vxplain.com/src/customization/keyboard-shortcuts
Boost your productivity with this full list of keyboard shortcuts for the Vxplain VS Code extension. Learn how to quickly navigate views and access settings.
For quick access, you can use the following keyboard shortcuts:
| Action | Shortcut |
| --------------------------- | ----------- |
| Open Extension | `⌘ + ⌥ + v` |
| Open VSCode Settings | `⌘ + ⌥ + s` |
| Switch to Architecture View | `a` |
| Switch to Directory View | `d` |
| Switch to Call Graph View | `c` |
| Switch to Playground View | `p` |
| Open Settings Panel | `s` |
| Close Settings Panel | `Esc` |
# Configuring LLM Providers
Source: https://docs.vxplain.com/src/customization/llm-providers
Learn how to configure and switch between different Language Model (LLM) providers like OpenAI and Anthropic for AI-powered features in the Vxplain VS Code extension.
Select the Language Model (LLM) provider to use for AI-powered features. You can bring your own LLM provider. This is one of the main [customization settings](/src/customization/settings) you can configure.
To change the LLM provider, follow these steps:
1. Click on the `Vxplain LLM` option in the VS Code bottom bar.
2. Select your preferred provider from the dropdown menu.
# Settings & Configurations
Source: https://docs.vxplain.com/src/customization/settings
Learn how to customize the Vxplain VS Code extension, including configuration options for AI, analytics, and auto-start, as well as accessing top-bar options.
You can also access settings and other options in the top right corner of the Vxplain sidebar.
These options are available in the top right corner of the Vxplain sidebar.
* **Open in Editor:** Opens the diagram in the editor.
* **[LLM Provider](/src/customization/llm-providers):** Selects the LLM provider to use for AI-powered features.
* **Report Issue:** Reports an issue with Vxplain.
* **Settings:** Opens the settings.
## Configuration Options
To open the settings, press `Cmd+Alt+s` on Mac or `Ctrl+Alt+s` on Windows/Linux, or run the `Vxplain: Open Settings` command from the Command Palette.
Enable or disable AI-powered features. When disabled, features like **architecture diagrams**, **summaries**, and **code-to-diagram** generation will not be available. Only **function call graphs** and the **directory tree** visualization will work.
Enable or disable the collection of usage data and crash reports. We use this data to improve Vxplain. We never collect any source code, file contents, or other sensitive data.
Enable or disable the automatic start of the Vxplain extension when you open VS Code.
# Architecture Diagrams
Source: https://docs.vxplain.com/src/features/arch-diagrams
Learn how to generate and interpret architecture diagrams in Vxplain to get a high-level overview of your project for both the entire codebase and specific folders.
Vxplain excels at creating visual representations of your codebase to help you understand its structure and flow.
Architecture diagrams provide a high-level overview of your codebase. They show the main components of your application and how they are connected.
## Entire Project
To generate an architecture diagram for the entire project, click on the Vxplain logo in the sidebar and then click `Generate Diagram`.
## Specific Folder
If you want to generate a diagram for a specific folder, you can right-click on the folder in the Explorer view and select `Vxplain: Get Folder Architecture`.
* **Nodes:** Each node in the diagram represents a component, such as a module, class, or function.
* **Edges:** The edges between nodes represent the relationships between components, such as dependencies or function calls.
## Interacting with Diagrams
The diagrams generated by Vxplain are interactive. You can:
* **Zoom and Pan:** Use your mouse or trackpad to zoom in and out and pan around the diagram.
# Call Graphs
Source: https://docs.vxplain.com/src/features/call-graphs
Visualize function call relationships and trace code execution with interactive call graphs in Vxplain.
Call graphs show the relationships between functions in your code. They help you trace the flow of execution and understand how different functions interact.
To view a call graph for a specific function, right-click on the function name in your code and select `Vxplain: View Call Graph`.
* **Nodes:** Each node in the call graph represents a function.
* **Edges:** The edges show the calls between functions. An arrow from function A to function B means that function A calls function B.
## Interacting with Diagrams
The diagrams generated by Vxplain are interactive. You can:
* **Zoom and Pan:** Use your mouse or trackpad to zoom in and out and pan around the diagram.
* **Click on Nodes:** Click on a node to see more information about the corresponding component, such as its source code.
# Code-to-Diagram
Source: https://docs.vxplain.com/src/features/code-to-diagram
Learn how to use Vxplain's Code-to-Diagram feature to generate instant visualizations of code snippets, helping you understand complex logic and control flow.
Generate diagrams from code snippets to quickly understand control flow and business logic. This is particularly useful for analyzing small, complex pieces of code without needing to visualize the entire application.
To use this feature, simply select a piece of code in your editor, right-click, and choose `Vxplain: Generate Diagram`.
# Directory Tree
Source: https://docs.vxplain.com/src/features/directory-tree
Learn how to use Vxplain's interactive directory tree to visualize and navigate your project's file structure, open files, and generate diagrams.
Vxplain provides an interactive directory tree that allows you to visualize and navigate your project's full file structure in a clear, organized layout. This is especially helpful for understanding the layout of large and complex codebases.
## Viewing the Directory Tree
To access the Directory Tree view, click on the **Directory Tree** icon in the Vxplain sidebar toolbar. This will display a hierarchical view of all the files and folders in your project.
## Interacting with the Tree
The directory tree is not just a static view; you can interact with it to explore your code:
* **Expand and Collapse:** Click on the folder names to expand or collapse them.
* **Open Files:** Click on the file names to open them directly in the editor.
# Navigations
Source: https://docs.vxplain.com/src/features/navigation
Learn how to navigate the Vxplain extension using the sidebar toolbar, keyboard shortcuts, and page-specific actions to access all features.
You can navigate to the Vxplain using the Vxplain logo in the sidebar or by using the [keyboard shortcut](/src/customization/keyboard-shortcuts) `Cmd+Alt+v` on Mac or `Ctrl+Alt+v` on Windows/Linux.
This will open the Vxplain sidebar, where you can access all the features.
Each icon in the toolbar represents a different page:
* **[Architectures](/src/features/arch-diagrams):** View and generate architecture diagrams.
* **[Directory Tree](/src/features/directory-tree):** Explore your project's file structure.
* **[Call Graph](/src/features/call-graphs):** Visualize function call relationships.
* **[Playground](/src/features/code-to-diagram):** Experiment with code snippets and generate diagrams from them.
## Page-Specific Actions
Similarly, you will find many page-specific actions on the top left of every page.
* **History of diagrams:** Access previously generated diagrams.
* **Copy & Reload:** Copy the current view or reload the data.
* **More...:** Access additional options and actions for the current view.
# Summaries
Source: https://docs.vxplain.com/src/features/summaries
Learn how to generate multi-level summaries for your code, functions, and overall architecture in Vxplain to get a quick overview of your project.
Vxplain leverages Markdown to present the information it generates in a clear and readable format. When you generate summaries or other text-based outputs, they will be rendered as Markdown.
## Code Summaries
When you right-click on a specific function, Vxplain gives you the option to generate a summary. This provides a concise explanation of the code's purpose and functionality in Markdown, including code blocks for any relevant snippets.
This allows you to easily copy and paste the summaries into your own documentation files or share them with your team.
## Architecture Summaries
In the [architecture diagrams](/src/features/arch-diagrams) page, you can find an option to generate an 'Architecture overview'. This provides a high-level summary of your entire codebase, explaining the main components and their interactions.
# Quickstart
Source: https://docs.vxplain.com/src/quickstart
Get started with Vxplain in minutes. This guide walks you through installing the extension and generating your first architecture diagram.
This guide will help you get started with Vxplain. You'll learn how to install the extension and generate your first [architecture diagram](/src/features/arch-diagrams).
## Installation
1. Open Visual Studio Code/Cursor/Windsurf.
2. Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window or by pressing `Ctrl+Shift+x` or `Cmd+Shift+x` on Mac.
3. Search for `vxplain` in the Extensions view search bar.
4. Click the `Install` button for the Vxplain extension.
## Generating Your First Architecture Diagram
Once you have installed Vxplain, you can generate an architecture diagram of your codebase.
1. Open your project in Visual Studio Code/Cursor/Windsurf.
2. Click on the Vxplain logo in the sidebar.
3. Click on `Generate Diagram`.
Vxplain will analyze your codebase and generate an interactive architecture diagram. You can then explore the diagram to understand the structure of your code.
## Next Steps
Now that you've generated your first architecture diagram, you can explore more of Vxplain's features:
* [View Call Graphs](/src/features/call-graphs)
* [Explore the Directory Tree](/src/features/directory-tree)
* [Generate Code Summaries](/src/features/summaries)
2. Select your preferred provider from the dropdown menu.
# Settings & Configurations
Source: https://docs.vxplain.com/src/customization/settings
Learn how to customize the Vxplain VS Code extension, including configuration options for AI, analytics, and auto-start, as well as accessing top-bar options.
You can also access settings and other options in the top right corner of the Vxplain sidebar.
## Specific Folder
If you want to generate a diagram for a specific folder, you can right-click on the folder in the Explorer view and select `Vxplain: Get Folder Architecture`.
* **Nodes:** Each node in the diagram represents a component, such as a module, class, or function.
* **Edges:** The edges between nodes represent the relationships between components, such as dependencies or function calls.
## Interacting with Diagrams
The diagrams generated by Vxplain are interactive. You can:
* **Zoom and Pan:** Use your mouse or trackpad to zoom in and out and pan around the diagram.
# Call Graphs
Source: https://docs.vxplain.com/src/features/call-graphs
Visualize function call relationships and trace code execution with interactive call graphs in Vxplain.
Call graphs show the relationships between functions in your code. They help you trace the flow of execution and understand how different functions interact.
To view a call graph for a specific function, right-click on the function name in your code and select `Vxplain: View Call Graph`.
* **Nodes:** Each node in the call graph represents a function.
* **Edges:** The edges show the calls between functions. An arrow from function A to function B means that function A calls function B.
## Interacting with Diagrams
The diagrams generated by Vxplain are interactive. You can:
* **Zoom and Pan:** Use your mouse or trackpad to zoom in and out and pan around the diagram.
* **Click on Nodes:** Click on a node to see more information about the corresponding component, such as its source code.
# Code-to-Diagram
Source: https://docs.vxplain.com/src/features/code-to-diagram
Learn how to use Vxplain's Code-to-Diagram feature to generate instant visualizations of code snippets, helping you understand complex logic and control flow.
Generate diagrams from code snippets to quickly understand control flow and business logic. This is particularly useful for analyzing small, complex pieces of code without needing to visualize the entire application.
To use this feature, simply select a piece of code in your editor, right-click, and choose `Vxplain: Generate Diagram`.
# Directory Tree
Source: https://docs.vxplain.com/src/features/directory-tree
Learn how to use Vxplain's interactive directory tree to visualize and navigate your project's file structure, open files, and generate diagrams.
Vxplain provides an interactive directory tree that allows you to visualize and navigate your project's full file structure in a clear, organized layout. This is especially helpful for understanding the layout of large and complex codebases.
## Viewing the Directory Tree
To access the Directory Tree view, click on the **Directory Tree** icon in the Vxplain sidebar toolbar. This will display a hierarchical view of all the files and folders in your project.
## Interacting with the Tree
The directory tree is not just a static view; you can interact with it to explore your code:
* **Expand and Collapse:** Click on the folder names to expand or collapse them.
* **Open Files:** Click on the file names to open them directly in the editor.
# Navigations
Source: https://docs.vxplain.com/src/features/navigation
Learn how to navigate the Vxplain extension using the sidebar toolbar, keyboard shortcuts, and page-specific actions to access all features.
You can navigate to the Vxplain using the Vxplain logo in the sidebar or by using the [keyboard shortcut](/src/customization/keyboard-shortcuts) `Cmd+Alt+v` on Mac or `Ctrl+Alt+v` on Windows/Linux.
This will open the Vxplain sidebar, where you can access all the features.
Each icon in the toolbar represents a different page:
* **[Architectures](/src/features/arch-diagrams):** View and generate architecture diagrams.
* **[Directory Tree](/src/features/directory-tree):** Explore your project's file structure.
* **[Call Graph](/src/features/call-graphs):** Visualize function call relationships.
* **[Playground](/src/features/code-to-diagram):** Experiment with code snippets and generate diagrams from them.
## Page-Specific Actions
Similarly, you will find many page-specific actions on the top left of every page.
* **History of diagrams:** Access previously generated diagrams.
* **Copy & Reload:** Copy the current view or reload the data.
* **More...:** Access additional options and actions for the current view.
# Summaries
Source: https://docs.vxplain.com/src/features/summaries
Learn how to generate multi-level summaries for your code, functions, and overall architecture in Vxplain to get a quick overview of your project.
Vxplain leverages Markdown to present the information it generates in a clear and readable format. When you generate summaries or other text-based outputs, they will be rendered as Markdown.
## Code Summaries
When you right-click on a specific function, Vxplain gives you the option to generate a summary. This provides a concise explanation of the code's purpose and functionality in Markdown, including code blocks for any relevant snippets.
This allows you to easily copy and paste the summaries into your own documentation files or share them with your team.
## Architecture Summaries
In the [architecture diagrams](/src/features/arch-diagrams) page, you can find an option to generate an 'Architecture overview'. This provides a high-level summary of your entire codebase, explaining the main components and their interactions.
# Quickstart
Source: https://docs.vxplain.com/src/quickstart
Get started with Vxplain in minutes. This guide walks you through installing the extension and generating your first architecture diagram.
This guide will help you get started with Vxplain. You'll learn how to install the extension and generate your first [architecture diagram](/src/features/arch-diagrams).
## Installation
1. Open Visual Studio Code/Cursor/Windsurf.
2. Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window or by pressing `Ctrl+Shift+x` or `Cmd+Shift+x` on Mac.
3. Search for `vxplain` in the Extensions view search bar.
4. Click the `Install` button for the Vxplain extension.
## Generating Your First Architecture Diagram
Once you have installed Vxplain, you can generate an architecture diagram of your codebase.
1. Open your project in Visual Studio Code/Cursor/Windsurf.
2. Click on the Vxplain logo in the sidebar.
3. Click on `Generate Diagram`.
Vxplain will analyze your codebase and generate an interactive architecture diagram. You can then explore the diagram to understand the structure of your code.