Arrange shapes and connectors

The Arrange tab in the format panel on the right of the draw.io editor allows you to precisely arrange and orient shapes on the drawing canvas.

Select a shape, then use the tools in the Arrange tab to rotate, reposition or resize it

The options that are available on this tab will change depending on what you have selected. For example, connectors can only be moved to the front or back or reversed, they can’t be rotated, repositioned or resized from the Arrange tab.

Click on a link below to see how to use the particular feature on the Arrange tab.

Move shapes forwards and backwards

When shapes and connectors overlap, you can choose which shapes are displayed towards the front, and which at the back.

Send shapes to the front or the back

  1. Select one or more shapes and connectors that you want move forwards or backwards.
  2. In the Arrange tab, click To Front to bring the shape to the front, or To Back to send it to the back of the pile of shapes.
    Bring overlapping shapes to the front or send them to the back via the Arrange tab

Send shapes backwards or bring them forwards, one step at a time

  1. Select one shape, connector or group.
  2. In the Arrange tab, click Bring Forward or Send Backward
    Bring overlapping shapes to the front or send them to the back via the Arrange tab

Group multiple shapes

  1. Select the shapes you want to group.
  2. Click Group Shapes in the Arrange tab, near the bottom.
    Select a shape, then enter a new size in the text fields to precisely resize it

Resize a shape

Select a shape, then enter a new exact size in the Width and Height fields.

Select a shape, then enter a new size in the text fields to precisely resize it

Tip: Select the Constrain proportions checkbox first if you want to maintain the shape’s proportions when you enter a new height or width.

Autosize a shape to fit its text: Select the shape, then click Autosize (an outline containing a shape and two arrows). Alternatively, press Ctrl+Shift+Y on Windows, or Cmd+Shift+Y on macOS.

Click Autosize on the _Arrange_ tab to resize a shape to automatically fit its text label

Copy and paste shape sizes: Select the shape that is the size you want to copy, click Copy Size in the Arrange tab, select the shapes that you want to be the same size, and click Paste Size.

Copy and paste a selected shape's size to quickly resize other shapes

The height and width of the selected shapes will now match the one you copied, even if they are different shapes.

Reposition a shape

Enter a new Position for a selected shape or group of shapes by changing the Left and Top values.
Select a shape, then enter a new exact position to move it on the drawing canvas
Note: The exact position is an offset value from the top left of the first printable page in your diagram. These may be quite large if your diagram spans more than one printed page.

Reposition multiple shapes

When you have selected multiple shapes, you can arrange them with respect to each other.

  • Use the Align tools to reposition the selected shapes to a common alignment.
  • Click Horizontal or Vertical to redistribute the shapes with an alternative spacing.

Use the Align and Distribute tools on the Arrange tab to reposition multiple selected shapes with respect to each other

Rotate a shape

Instead of using the rotate grab handle and dragging to rotate a selected shape, you can use the tools in the Arrange tab.

  • Click on Rotate shape only by 90° to rotate only the shape and not its label text.
  • Enter a new precise Angle in the text field to rotate the shape as well as its label.
    Rotate a shape with or without its label text

Flip a shape: Click Horizontal or Vertical on the _Arrange tab to flip a shape without also flipping the label text. If the shape is symmetrical, there will be no obvious change, unless there is a is a gradient colour in the fill.
Flip a non-symmetrical shape keeping its label text in place

You can also flip a connector horizontally and vertically, and reverse the source and target ends of a connector along with their labels.

Reset connector waypoints

You can revert one or more connectors’ complex routes back to the most direct routes automatically.

  1. Select the connector or connectors you want to reset. Alternatively, select the shape that has the complex connectors going to or from it.
  2. Click Clear Waypoints in the Arrange tab.
    Click Clear Waypoints in the Arrange tab to reset one or more selected connectors back to their most direct routes

Learn more about working with waypoints on connectors

Edit data: Select a shape or connector, then click Edit Data in the Arrange tab to add new and change its existing properties, for example, to use placeholders in label text.

Edit link: If a shape links to a web page or another page in a multi-page diagram, click on Edit Link in the Arrange tab to change it.

Arrange shapes automatically: Automated layout shapes and shapes with swimlanes automatically position and realign the shapes you place in them.