# Diagram Editor - Controls

### Basic Diagram Editor controls

On the lower right corner of diagram editor you can find a toolbar with some basic tools to help you when you are creating/editing your diagram.

<figure><img src="https://2718133043-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2UzeMjUGHvOZRX1jMiVc%2Fuploads%2FkneYo64LIyQnB4oOpeP3%2Fdiagram%20controls.jpg?alt=media&#x26;token=381be153-40c2-4de3-9e18-2d6b242ba1b7" alt=""><figcaption></figcaption></figure>

Here is a small description of each tool functionality:

<div align="left"><figure><img src="https://2718133043-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2UzeMjUGHvOZRX1jMiVc%2Fuploads%2FGeSlRgtPIsoBBcIKh8i9%2Fdiagram%20tools.jpg?alt=media&#x26;token=308d5b76-80eb-41ea-80ec-286b6246a30e" alt=""><figcaption></figcaption></figure></div>

| Tool / Button                       | Description                                                                                                           |
| ----------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| **Zoom in / zoom out**              | diagram zoom                                                                                                          |
| **Fit view**                        | automatically fits whole diagram on screen to fit whole view                                                          |
| **Lock \ Unlock diagram**           | You can toggle diagram lock on/off. When you turn off lock, you cannot move any nodes or connection on diagram        |
| **Align Horizontally \ Vertically** | You can select **multiple** link groups together and **align** selected groups in horizontal or vertical arrangement. |
| **Duplicate**                       | Duplicate selected groups including their conenctions.                                                                |
| **Delete**                          | deletes selected group nodes or selected connections (same as "**delete**" / "**backspace**" keys)                    |

### Selections

You can select select a **group** or a **connection** by clicking on them.

When you select a group, it will get highlighted as shown below.

<figure><img src="https://2718133043-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2UzeMjUGHvOZRX1jMiVc%2Fuploads%2FZxYtQxI30aBP4FfxbW8s%2Fdiagram%20editor%20-%20selected.jpg?alt=media&#x26;token=b31d5742-2b65-483c-9816-62876d0ff0ed" alt=""><figcaption><p>Group node selection</p></figcaption></figure>

When you select a connection it will get a dash-line highlight effect.

<figure><img src="https://2718133043-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2UzeMjUGHvOZRX1jMiVc%2Fuploads%2FENURVcwOPgD7MRbdQ2Ft%2Fdiagram%20editor%20-%20selected%20connection.jpg?alt=media&#x26;token=cd565f0f-337e-4aba-af36-b476b754f26a" alt=""><figcaption><p>Selecting a connection</p></figcaption></figure>

You can also select multiple groups using **Ctrl** (Windows) / **Command** (Mac) to move or delete them.

<figure><img src="https://2718133043-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2UzeMjUGHvOZRX1jMiVc%2Fuploads%2FiMRcJzByzFbzQx0Wt2Sf%2Fdiagram%20editor%20multiple%20select.JPG?alt=media&#x26;token=35f62c86-622c-4cde-a6e6-f3bc03ea2892" alt=""><figcaption><p>Multiple selection of groups</p></figcaption></figure>

### Deleting groups & connections

To delete a group or a connection, select either a group or a connection and press "**delete**" or "**backspace**" on keyboard or use "**delete**" tool from toolbar.
