Work with layers in draw.io

Layers add structure and organisation to your diagrams. When you interact with a complex diagram, to display or hide its various layers, you can understand them more easily.

Note: Each shape or connector (or group) can only be placed on one layer - it can’t belong to multiple layers.

Using layers in diagrams

The sections below explain how to work with layers in draw.io.

Open the Layers dialog

Select View > Layers or press Ctrl+Shift+L / Cmd+Shift+L to display or hide the Layers dialog.

Select View > Layers to open the Layers dialog

By default, a new diagram has a single Background layer, to which all shapes, connectors and text are added.

From the Layers dialog, you can add new layers and rename them, select which layer to add new shapes to, remove existing layers, and move selected shapes to a layer.

You can also display and hide layers, which will display or hide all of the shapes, connectors and text that are on those layers.

Finally, locking a layer makes sure you can’t make any inadvertent changes.

Add a new layer

At the bottom of the Layers dialog, click on Add Layer (+).

Your new layer will be automatically selected (with a blue background), and any new shapes you add to the drawing canvas will be placed on your new layer.

Click on Add Layer (+) in the Layers dialog to add a new layer

Duplicate a layer: Select the layer you want to duplicate, then click on Duplicate in the Layers dialog (a + in a box with a shadow).

Select a layer then click on Duplicate (+ in a box) in the Layers dialog to duplicate it

Back to top

Rename a layer

When you add a new layer, it will be given a default name. Double click on the layer, enter its new name, then click Rename to name it something more meaningful.

Double click on a layer, enter a new name, then click Rename

Rename a layer via its metadata

Layers have metadata, just like shapes have metadata. This metadata allowed advanced functionality within your You can also change a layer’s name via the Edit Data dialog.

See how to use metadata and placeholders in labels and tooltips

  1. Select a layer, then click on the Edit Data in the Layers dialog (three vertical dots).
    Select a layer in the Layers dialog, then click on Edit Data
  2. Change the text in the Label field and click Apply to change the layer’s name.
    In the Edit Data dialog for that layer, change the label text and click Apply to rename it

Back to top

Remove a layer

Remove a layer will delete all of the shapes and connectors that are on it as well as the layer itself. Click on a layer to select it, then click on Remove in the bottom left of the Layers dialog (rubbish bin) to remove the layer and its shapes.

Select a layer, then click on the rubbish bin icon to remove it and all of the shapes/connectors it contains

Note: Your diagram must have at least one layer for shapes and connectors to be placed. If there is only one layer in your diagram, you can not delete it.

Back to top

Work with shapes on layers

Shapes are arranged in the order you added them to the drawing canvas, within the layer you added them.

Layers are arranged from front to back as they are ordered in the Layers dialog. Shapes and connectors placed on a higher layer can not go back behind shapes on a lower layer - they can only be arranged from front to back within their layer.

Add shapes to a layer

  1. Make sure your layer is unlocked before you make changes (click on the lock/unlock icon to the left of the layer name). Layers are unlocked by default.
  2. Select the layer you want to add the shapes to in the Layers dialog, then add the shapes to the drawing canvas.

Select the layer you want to add a shape or connector to first, then add the shape or connector

Back to top

Move shapes to another layer

  1. Select the shapes, connectors and text you want to move to another layer.
  2. In the layers dialog, click on the Move selection to icon (a box with an arrow going into it vertically), then select the layer you want to move it to.

Move the selected shapes to another layer via the Layers dialog

Back to top

See which layer a shape belongs to

  1. Select one shape or a single group of shapes - this does not work when you select multiple shapes, as they may be on multiple layers.
  2. Click on Move selection to in the Layers dialog. The layer with the check mark next to it is the layer that the shape is on.

Select a shape, then click on Move selection to in the Layers dialog to find out which layer a shape is on

Back to top

Rearrange layers to move shapes forward or backward

To move one layer’s shapes in front of another, you need to change the order of the layers in the Layers dialog. Layers are arranged from top to bottom (front to back on the drawing canvas).

Learn how the z-order of shapes positions them in front of or behind other shapes

Click and drag a layer in the Layers dialog to place its shapes in front of or behind another layer.

In the Layers dialog, drag a layer higher or lower to move its contents above or below shapes and connectors on the other layers

Note: When you move shapes to a layer, they are placed in front of any existing shapes on that layer, just like when you add new shapes to a layer.

Back to top

Hide or display layers

To understand complex diagrams that use layers, you can display and hide layers.

In the Layers dialog, a check mark next to the layer’s name indicates it is visible. Click on this checkbox to hide the layer, or display it if it was previously hidden.

Select a shape then click on Move selection to in the Layers dialog to find out which layer a shape is on

Hide or display layers in the diagram viewer: Click on the Layers tool at the bottom of the diagram viewer, then click on the checkboxes next to the layer names to hide or display the layers. This tool is not available if the diagram only has one layer.

Click on the checkboxes next to layer names in the Layers dialog to hide or display them

Tip: Use custom links to make your diagram interactive and toggle layers on and off when you click on a shape within the diagram.

Back to top

Lock layers to prevent changes

Locking a layer means you cannot make any changes to it - you can’t add, move, edit, stye or delete the shapes and connectors placed on that layer.

In the Layers dialog, click on the padlock icon to the left of the layer’s name that you want to lock.

Click on the padlock next to a layer's name in the Layers dialog to lock or unlock the layer

Back to top

Diagrams that work well with layers