> For the complete documentation index, see [llms.txt](https://docs.seoneo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.seoneo.io/documentation/diagram-editor/diagram-editor-controls.md).

# 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="/files/e1C3WPKhyGta7la6jAJF" alt=""><figcaption></figcaption></figure>

Here is a small description of each tool functionality:

<div align="left"><figure><img src="/files/UUVXTZAfCwX2dM0XZLJl" 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="/files/YedPmBbex6ZovfGHA8yk" 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="/files/peKdOttOvAREuc3TaM2B" 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="/files/KHgP48dE7A0V857fjs2l" 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.