> For the complete documentation index, see [llms.txt](https://docs.brainboard.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.brainboard.co/cloud-design/design-area/connectors.md).

# Connectors

### Overview

{% hint style="info" %}
A connector is a line that connects two resources in the architecture. It is used to show a relationship between two resources.
{% endhint %}

*This article covers information about different connector types and how to create, edit, and delete a connector.*

***

### Connector types

There are two types of connectors:

1. Visual connector
2. Relationship connectors

#### **1. Visual connectors**

These are used to show a visual relationship between two resources. They are represented by a solid line.

<figure><img src="/files/daMJ3CbsA17X74zIp2VI" alt="" width="563"><figcaption></figcaption></figure>

#### **2. Relationship connectors**

These are used to show a relationship between two resources. They are represented by a solid line with the corresponding text in the middle of the connector.

<figure><img src="/files/bZklCsqeGBC268ixaD9e" alt="" width="558"><figcaption></figcaption></figure>

***

### How to create a connector?

#### Creating a visual connector

To create a **visual** connector, you need to follow these steps:

1. Click on the node/resource that you want to connect to another node/resource.
2. Once the borders of the selected node/resource are highlighted, you will see a **small circle** in the middle of all its four borders. Hover over that small circle, and you will see an **arrow-shaped icon**. Click on that arrow-shaped icon, drag it to another node/resource to which you want to connect the first node/resource, and drop it there. You can now see a visual connector connecting the two nodes/resources in your design space.

<figure><img src="/files/hjdRPoHPyNmTfeyqkp7y" alt=""><figcaption></figcaption></figure>

#### Creating a relationship connector between resources

To create a relationship connector, you need to follow these steps:

1. Right-click on the resource and select `Edit config` from the context menu.

<figure><img src="/files/s6XB699A5qRX7cyFBWEl" alt="" width="422"><figcaption></figcaption></figure>

2. The selected resource's **form will** open in the right pane. You can scroll down to its **Main parameters** and look for the relevant field where you can select the other resource for connection.

For example, in the image shared below, the desired storage is selected under the field **`Storage Account Name`** for the *<mark style="color:$primary;">Linux function app</mark>*.

{% hint style="success" %}
Once you select the desired resource in the relevant field, a relationship connector is drawn from the first resource pointing toward the second. The connector line will also be labelled accordingly.
{% endhint %}

<figure><img src="/files/q0sTPUTiZJVXIbVJEjtN" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
To verify the connection/relationship, you can cross-check the **label text** with the corresponding value in the code.
{% endhint %}

***

### How to delete a connector?

To delete a connector, simply click on the **connector line** and hit the **`Delete`** key on your keyboard. Or, you can click the **bin icon** available in the connector editor bar that appears upon clicking the connector line.

<figure><img src="/files/3cmPTatiOoXJLTmYY0Tn" alt=""><figcaption></figcaption></figure>

You will be prompted with two options:

* **Keep reference:** Clicking on this will only delete the *<mark style="color:$primary;">visual connector line</mark>*, while the configured relationship between the resources will stay **intact.**
* **Remove the reference:** Clicking on this will delete the *<mark style="color:$primary;">visual connector line</mark>* as well as the configured *<mark style="color:$primary;">relationship</mark>* between the resources.

<figure><img src="/files/XHGD3mfm7LlJuclC8x3J" alt=""><figcaption></figcaption></figure>

### How to edit a connector?

To edit a connector, simply click on the connect, and the options bar will appear above it. You can customzie the following properties of a connector-line:

* **Connector type:** Available options are **`orthogonal`**, **`straight`**, and **`curvy`**.
* **Line style:** Available options are **`solid`**, **`small dash`**, **`medium dash`**, and **`large dash`**.
* **Colour:** You can use the available colour palette or enter a specific hex code.
* **Line weight:** You can define the connector line weight as **`small`**, **`medium`**, or **`large`**.
* **Start/end shape options:** These options enable you to define the start and the end shape of the connector line. Available options are `filled arrow`, `outlined arrow`, `no shape`.

<figure><img src="/files/JWf2utEnpS7HqC7ea3UP" alt=""><figcaption></figcaption></figure>

### How to edit the connector text?

To edit the connector label text, simply **`double-click`** on the connector line and it will become editable as the **`cursor`** will appear at the end of the text. You can then edit it as you wish.

<figure><img src="/files/Y7N6uh937orzrEmTGOK6" alt=""><figcaption></figcaption></figure>