To keep a draw.io container and its contents together during page-wide automatic layout, use an automatic layout container. draw.io treats it as one shape and leaves its internal arrangement intact. Selection matters: selecting only layout containers changes their internal layouts instead. Advanced layout shapes and layout containers, Apply layouts to rearrange a diagram

This guide covers arranging several small, contained diagrams on a Mac while keeping each diagram together. The examples use neutral labels such as Container A, A1 and A2. The current official desktop release page lists version 32.6.1 with a macOS package; use a current desktop build when following the current documentation’s menus. Release 32.6.1

Which kind of container preserves its internal layout?

First decide what “together” means for your diagram. Keeping children inside a parent, preserving their relative positions, and automatically arranging those children are different requirements.

An ordinary container establishes containment. To add a shape, drag it over the container and release when its outline turns purple. Merely drawing a large rectangle behind several nodes does not establish that relationship. Connectors can cross parent-container boundaries. Enable or disable the collapse/expand feature on container shapes

The general layout documentation says ordinary container contents are arranged within their container when a layout runs. Selecting one container with at least two shapes limits the operation to its contents. Therefore, an ordinary container is useful for containment, but that behavior does not establish that its existing internal arrangement will remain unchanged. Apply layouts to organise diagrams quickly

Automatic layout containers provide the documented boundary needed here: during a diagram-wide layout, their internal shapes and connectors are not rearranged, and each container is treated as a single shape. Advanced layout shapes and layout containers

Your intended result Appropriate starting point Important condition
Keep nodes inside a parent while allowing internal rearrangement Ordinary container Establish actual containment before applying layout.
Rearrange the page while preserving each container’s internal layout Automatic layout container Run a diagram-wide layout.
Continuously arrange nodes inside a visible boundary Automatic layout shape from the Advanced library Its own layout responds to internal edits.
Move an exact manual arrangement together Group the shapes and connectors Group movement is documented; grouping alone is not a promise that every automatic layout preserves internal positions.

The table is a decision aid derived from the documented differences between container shapes, automatic layout containers and groups.

Build a small container that stays together

For a visible enclosure, start with an automatic flow layout shape. This avoids relying on an ordinary rectangle to behave like a layout container.

Create the internal diagram

  1. Open your diagram in draw.io Desktop on your Mac.
  2. Find the Advanced shape library in the left panel. If it is missing, click More Shapes, select the General shape library and click Apply.
  3. Drag a horizontal or vertical flow layout shape onto the canvas.
  4. Use its starter shapes to build a short connected chain, with labels A1, A2 and A3.
  5. To extend the chain, hover over a node and click a directional arrow to clone and connect another node. Double-click its label to rename it.

In flow layout containers, every directional arrow creates a connected shape from the node you hovered over; the layout decides its placement. Tree containers have different sibling and child rules. Automatic layout shapes also adjust their container size to their contents. These steps follow the official automatic layout shapes guide.

Create a second automatic flow layout shape with nodes B1, B2 and B3. These are illustrative labels, not a required naming convention. Two containers make it easier to distinguish movement of a whole container from rearrangement of its children.

Keep at least one element inside each layout container while editing. The documentation warns that deleting the last contained element also deletes the layout container. When rebuilding an existing section, retain a starter element until the replacement content is present. Advanced layout shapes and layout containers

Choose a visible or transparent boundary

The Advanced layout shapes have a surrounding swimlane that supports connections to and from its boundary. Containers created through Arrange > Insert > Layout have a transparent boundary; connectors must attach to their internal shapes instead. Choose based on whether the outer diagram should connect to the container itself or to a particular node. Advanced layout shapes and layout containers

For the transparent alternative, choose Arrange > Insert > Layout and select a layout. Build the internal diagram by dropping shapes onto a node’s directional arrows. The crossed-arrow handle at the upper left moves the layout container. Insert an automated layout

Apply the outer layout without changing the inner layouts

Before running the outer layout, finish each container’s internal arrangement and add the connections that express the relationship between your diagram sections. For example, connect the visible boundary of Container A to the visible boundary of Container B if the relationship belongs to the two sections as wholes.

Then use this sequence:

  1. Click an empty part of the canvas to clear the selection.
  2. Open Arrange > Layout.
  3. Choose a suitable preset, such as Horizontal Flow for a left-to-right relationship.
  4. Review its spacing options and click Apply.
  5. Inspect both the container positions and the nodes inside them.

A horizontal flow arranges shapes along the left-to-right direction indicated by connectors. Its Node Spacing controls separation within a row or column, while Rank Spacing controls separation between successive rows or columns. Increase the relevant spacing if labels or connections need more room. Flow layouts

Clearing the selection is consequential. If only layout containers are selected, Arrange > Layout replaces their live internal layouts rather than rearranging the page. To adjust an existing container’s options deliberately, select it and choose Arrange > Layout > Edit Layout. Apply layouts to rearrange a diagram

Use the synthetic example as an acceptance check: A1, A2 and A3 should retain their internal arrangement through the outer layout, as should the three B nodes. Their parent containers may move. This check follows the documented single-shape treatment of layout containers; it is not a report of a desktop test performed here. Advanced layout shapes and layout containers

Diagnose changes before adjusting more settings

The children rearrange inside the container

Check the container type and your selection first. An ordinary container allows its contents to be laid out. A selected automatic layout container can have its live layout replaced by the layout command. Identify which operation occurred before changing spacing or rebuilding the diagram. Apply layouts to organise diagrams quickly, Apply layouts to rearrange a diagram

The container grows or shrinks

A size change does not necessarily mean containment failed. The general layout documentation states that containers resize to fit their laid-out contents, even when Resize Nodes is disabled. That option controls resizing of individual nodes; it does not promise a fixed container boundary. Apply layouts to organise diagrams quickly

Resizing the boundary stretches the children

For manual group resizing, select the group and disable Resize Children under Style > Properties. The documented style equivalent is recursiveResize=0, applied to the group. This controls proportional resizing; the documentation does not describe it as a switch for preserving positions during automatic layout. Disable resize children to resize grouped shapes individually

You need an exact handmade arrangement

For a section whose hand-placed geometry must stay exact, select its shapes and internal connectors, then use Arrange > Group or Cmd+G. Dragging the resulting group moves its members together. This is a supported manual movement path; the grouping documentation does not establish a universal automatic-layout freeze for arbitrary groups. Group and ungroup shapes and connectors

A layout produces an unsuitable result

Press Cmd+Z to undo it before comparing another preset. The official guide cautions that layouts use the diagram’s current state, so applying several layouts in succession does not consistently reproduce the same structure. Returning to the same starting arrangement makes comparisons more useful. Apply layouts to rearrange a diagram

For this task, make two decisions explicitly: which layout owns the nodes inside each container, and which layout arranges the page. Automatic layout containers provide the documented separation between those operations. Build the internal sections first, clear the selection, apply the outer layout, and inspect the result before continuing.

Sources