> For the complete documentation index, see [llms.txt](https://agua.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://agua.gitbook.io/docs/quick-start/excalidraw-tutorial.md).

# Excalidraw: Tutorial

In this tutorial, we'll walk through [Excalidraw's](https://excalidraw.com/) codebase's components and dependency structure.

***

{% tabs %}
{% tab title="Excalidraw" %}

<figure><img src="/files/DSU2ZprzNmak1eEBTC9w" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Basic Setup

Retrieve all necessary assets from [Excalidraw's GitHub](https://github.com/excalidraw/excalidraw) and start using Agua.

***

### 1. Codebase setup[​](https://docs.agua.dev/installation#1-codebase-setup) <a href="#id-1-codebase-setup" id="id-1-codebase-setup"></a>

> Fork and clone the GitHub repository locally:

```
https://github.com/excalidraw/excalidraw.git
```

### 2. Agua setup[​](https://docs.agua.dev/installation#2-agua-setup) <a href="#id-2-agua-setup" id="id-2-agua-setup"></a>

#### 2.1 Sign Up

> Open Agua's [web editor](https://auth.agua.app/signin/):
>
> Register with your Google Account.&#x20;

```
https://auth.agua.app/signin/
```

{% tabs %}
{% tab title="Sign Up" %}

<figure><img src="/files/23F9ISgGUKO0RIsKLpey" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
Agua is currently only supported in [**Google Chrome**](https://www.google.com/intl/es-419/chrome/).
{% endhint %}

#### 2.2. Terminal installation[​](https://docs.agua.dev/installation#21-terminal-installation) <a href="#id-21-terminal-installation" id="id-21-terminal-installation"></a>

> Go to the root folder of the Excalidraw repository and run:

```
npx --yes agua-server
```

{% tabs %}
{% tab title="Terminal installation" %}

<figure><img src="/files/areWzwicghQii0mNtVgy" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
Agua is currently only supported in [**Node.js 18**](https://nodejs.org/en/download).
{% endhint %}

#### 2.3. Welcome to Agua <a href="#id-23-folder-selection" id="id-23-folder-selection"></a>

{% tabs %}
{% tab title="Welcome to Agua" %}

<figure><img src="/files/G8XbcdlXWynYPVyrsIGY" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Platform Tour[​](https://docs.agua.dev/installation#3-platform-tour) <a href="#id-3-platform-tour" id="id-3-platform-tour"></a>

***

### A. [UI Quick Access](/docs/basics/ui-picker.md)

> Click and access an element's file, component structure, and dependencies.

{% tabs %}
{% tab title="Components tree" %}

<figure><img src="/files/qH4xRwjwjWnLX7SRumFq" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### A. [Components Tree](/docs/basics/components-tree.md)

> Visualize component hierarchies and locate Sentry's files.

{% tabs %}
{% tab title="Components tree" %}

<figure><img src="/files/qH4xRwjwjWnLX7SRumFq" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### B. [Dependencies Tree](/docs/basics/dependencies-tree.md)

> Visualize component dependencies.

{% tabs %}
{% tab title="Dependencies Tree" %}

<figure><img src="/files/pxRKgAPCVsybZ4pjFBWN" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### D. [Integrated IDE](broken://pages/0kfwTGAuXfYHWyESXIel)

> Edit Sentry's code in our web-based VS Code.

{% tabs %}
{% tab title="Welcome to Agua" %}

<figure><img src="/files/QVdjoxu5vXD43QJBsUlj" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}