> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vxplain.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Architecture 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`.

<Frame>
  <img src="https://mintcdn.com/vxplain/8o-Zp9WJZRYomy0s/images/assets/generate_diagram.webp?fit=max&auto=format&n=8o-Zp9WJZRYomy0s&q=85&s=de37a867686ce78073bf66abd9522c79" alt="Vxplain Generate Diagram Command" className="rounded-lg" noZoom width="789" height="514" data-path="images/assets/generate_diagram.webp" />
</Frame>

## 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`.

<Frame>
  <img src="https://mintcdn.com/vxplain/FHf24DsTSE9UlH1m/images/gif/arch_usage.gif?s=63824766efb5e09df661b18ab3a06350" alt="Vxplain Get Folder Architecture Command" className="rounded-lg" noZoom width="786" height="480" data-path="images/gif/arch_usage.gif" />
</Frame>

* **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.