# Shapes

Shapes are the primary building blocks of a YouDesign Models board. Add them from the shape library, move and resize them, replace one for another while keeping connections intact, align and distribute multiple shapes at once, and lock any shape to prevent accidental changes.

## Adding Shapes

Two ways, both from the **Shapes library** in the Diagramming panel:

**Click & Add**

1. Click a shape in the library.
2. Move the mouse to the canvas.
3. Click again where you want the shape placed.

**Drag & Drop**

1. Click and hold the shape in the library.
2. Drag it onto the canvas.
3. Release to drop.

![Adding shapes](/files/RWUICtbwA3KVeojGr4I8)

## Moving Shapes

Click and drag to move a single shape. For multiple shapes at once:

* **Lasso** — press and hold left mouse button on the canvas for about 1 second, then drag to draw a selection box. Any shape the box touches is selected.
* **Shift-click** — hold **Shift** and click additional shapes to add them to the current selection.
* **Alt / Option click** — hold **Alt** (Windows) or **Option** (Mac) and click to add or remove individual shapes from a selection.

Once multi-selected, drag any shape in the set to move them all together.

## Removing Shapes

* Select and press **Backspace** or **Delete**.
* Or use the **Delete** option in the toolbar dropdown menu.

## Duplicate

To quickly copy a shape:

* **`Ctrl + D`** / **`Cmd + D`** — duplicate in place
* **Right-click → Duplicate** — same as above via menu
* **Copy/Paste** — `Ctrl/Cmd + C` then `Ctrl/Cmd + V`

### Duplicate in 4 Directions (Lane / Kanban pattern)

When working with lane-based visualizations (Kanban, Swimlanes), an **Add Lane** action duplicates the selected shape to one of four directions — **Right**, **Left**, **Top**, or **Bottom** — with appropriate spacing and connection-preservation. Use this for quickly extending lane structures.

## Replace Shape

You can swap one shape type for another while keeping the shape's connections, data binding, and position on the canvas:

1. Select a single shape on the canvas.
2. **Shift-click** the replacement shape in the Shapes library.

The new shape takes over the location, key, group membership, and — where compatible — the size of the original. Existing relationships stay attached. If you're replacing a group with a non-group shape, the group members are detached.

**Replace rules:**

* Only one shape at a time can be replaced.
* The shape must not be locked.
* Frames, table panels, and visualizations cannot be replaced this way.
* Table-bound shapes can only be replaced with shapes whose table binding is compatible.

> **Tip:** Use the toolbar's **Switch type** option as an alternative entry point for replacing shapes.

## Align & Distribute

When two or more shapes are selected, the **Align Shapes** tool appears in the toolbar with these actions:

**Align**

* **Align Left**
* **Align Horizontal Center**
* **Align Right**
* **Align Top**
* **Align Vertical Center**
* **Align Bottom**

**Distribute** (requires 3 or more shapes)

* **Distribute Vertically** — equal vertical spacing
* **Distribute Horizontally** — equal horizontal spacing

## Resizing

1. Select the shape.
2. Hover over an edge or corner until the resize indicator appears.
3. Click and drag to resize — corners resize diagonally, edges resize along one axis.

## Rotating

1. Select the shape.
2. Drag the **Rotation arrow** icon around the shape to set its angle.

## Fill, Border, and Font Color

With a shape selected, the toolbar exposes:

* **Background Options** — fill color picker + opacity slider
* **Border Style, Opacity, and Color** — stroke color, stroke opacity, and **Border Thickness** slider (1–10)
* **Font Color** — color picker for the shape's text

For full text styling (font family, size, alignment, highlight, clipping), see [Text Formatting](/models/work-in-the-app/editor/text-formatting.md).

## Locking

Locking prevents accidental changes to a shape's position or content.

1. Select the shape (or group of shapes).
2. Click **Lock** in the toolbar.

To unlock: select the locked shape and **hold** the **Unlock** button until the toolbar appears.

> **Tip:** Lock controls work on multiple selected shapes at once.

## Stacking Order

* **Bring to Front** — move the selection above all other shapes on the same layer
* **Send to Back** — move it below all other shapes on the same layer

For per-layer control, use the [Layers](/models/work-in-the-app/editor/layers.md) panel.

## Related

* [Text Formatting](/models/work-in-the-app/editor/text-formatting.md) — style the text inside shapes
* [Relationships](/models/work-in-the-app/editor/relationships.md) — connect shapes with dependencies
* [Favorites](/models/work-in-the-app/editor/favorites.md) — save styled shapes for quick reuse
* [Layers](/models/work-in-the-app/editor/layers.md) — organize shapes across layers
* [Grouping](/models/work-in-the-app/editor/grouping.md) — bundle shapes into a boundary
* [Keyboard Shortcuts](/models/reference/keyboard-shortcuts.md) — the full shortcut reference


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ins-pi.com/models/work-in-the-app/editor/shapes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.