Groups, Swimlanes & Transparent Bounds — a guide

[alderg]

This is a reference for the group-related features in drawio: how to create groups, how cells inside groups behave, the folding icon, padding, transparent-bounds groups, locking, and the per-cell icon styles.

Creating and ungrouping

• Group selection — select two or more cells, press Ctrl+G (⌘+G on macOS), or Arrange ▸ Group. The new parent cell uses the group style by default.
• Ungroup — select the group, press Ctrl+Shift+U, or Arrange ▸ Ungroup.
• Add a cell to a group — drag the cell over the group. A green outline indicates a valid drop target. The dropped cell becomes a child of the group.
• Remove from group — drag the cell out of the group bounds, or use Arrange ▸ Remove from Group.
• Drop target on/off — a group accepts drops when dropTarget=1 in its style (default). Set dropTarget=0 to block.

Selecting cells inside groups

drawio uses two click patterns depending on the parent type:

• Plain group cell — the first click selects the group; a second click selects the child underneath. The escalation walks up the parent chain so each click "drills down" by one level.
• Swimlane — clicking a child selects it directly; the swimlane itself is selected by clicking its title bar or its background.
• Alt-click — bypasses the group: selects the topmost cell at the click position regardless of parents.
• selectParentFirst=1 (any group or swimlane) — flips the order: clicking a child first selects the parent, then a second click drills down to the child. With a sibling already selected, clicking another sibling switches between them without escalating.

Collapsing and expanding

When a cell is foldable (containers and swimlanes by default; opt in via collapsible=1), drawio draws a −/+ toggle in the top-left corner.

• Click the folding icon — toggle collapsed/expanded. If the parent uses a stack layout, the stack resizes around the change. Cells stored with alternateBounds swap between expanded and collapsed sizes.
• Shift-click the folding icon — same as above, plus sibling cells to the right (or below) shift to make room for the size change.
• Alt-click the folding icon — toggle without resizing the parent stack.
• Keyboard shortcuts — Ctrl+Home collapses, Ctrl+End expands the selection.

groupPadding — CSS-style spacing

groupPadding reserves space between a group's bounds and its children. It accepts CSS-style 1, 2, 3, or 4 space-separated values:

Format	Example	Meaning
1 value	20	all four sides
2 values	10 20	vertical, horizontal
3 values	10 20 30	top, horizontal, bottom
4 values	10 20 30 40	top, right, bottom, left (CSS TRBL order, clockwise)

For non-transparent groups, groupPadding is the buffer used by extendParent / contractParent when resizing to fit children. For transparentBounds=1 cells it's the visible padding around the children union.

transparentBounds=1 — auto-sized group

transparentBounds=1 turns a group or swimlane into an auto-sized container whose bounds are derived from the union of its children's bounds — the cell itself has no fixed size. Use it for "wrapper" groups that should hug their contents.

Behavior:

• No resize handles — the group is never directly resizable; it tracks its children.
• Move handle icon — a 4-arrow icon appears at the top-left. Dragging it moves the entire group (children translate together). Same behavior as grabbing the dashed border directly: live preview, grid snap, dashed preview shape.
• Dashed selection bounds — visible whenever the group or any descendant is selected. The dashed outline is drawn by the editor and does not require setting strokeColor / dashed in the cell style.
• Drop into the group — works normally (subject to dropTarget).
• Drag out of the group — blocked. To remove a child, use Arrange ▸ Remove from Group.
• Empty groups auto-delete — when the last child is removed, the group cell is deleted in the same atomic edit.
• Default groupPadding=0 — set groupPadding per cell via the Group Padding property to add visible padding around the children union.
• Swimlane title bar — for a swimlane with transparentBounds=1, the bounds also reserve space for the title bar based on direction (and horizontal, flipH, flipV) — the title bar lands on the correct edge automatically.

Locking

Two related but distinct mechanisms:

Style key	Effect
locked=1 on a cell	The cell (and its descendants, via inheritance) cannot be selected, resized, edited, or moved. Toggled via Edit ▸ Lock/Unlock (Ctrl+L). The whole subtree is read-only.
lockedGroup=1 on a group	The group's descendants are not selectable — clicks on a child pass through to the group, treating the group as a single visual unit. The group itself remains fully interactive (selectable, movable, resizable, editable).

lockedGroup is the right choice when you want a multi-cell construct to behave like a single shape — the user sees the children but can't accidentally select or rearrange them individually. locked is the heavier hammer that makes the whole subtree read-only.

Per-cell icon styles

Small clickable icons drawio renders next to a selected cell. Each is opt-in per cell via a style key:

• editIcon=1 — pen icon at the bottom-left of the cell. Click to start label editing (same as F2 or double-click).
• lockedGroupIcon=1 — lock/unlock icon at the top-left. Click to toggle lockedGroup for the cell. With lockedGroupIcon=0 the icon is hidden even when lockedGroup is set.
• moveIcon=1 — 4-arrow move handle at the top-left, draggable to move the cell. Defaults to true when transparentBounds=1. Useful on cells whose body is hard to grab (e.g. cells whose interior captures clicks for a link). Drag uses the standard move pipeline including live preview and grid snap.
• connectIcon=1 (or connectIcon=0) — overrides the global Editor.showConnectHandle for this cell. Shows or hides the connect arrow that starts a new edge.

When multiple icons are present at the same corner (lock + move), they stack vertically.

Style cheat sheet

Key	Values	Where to find it
group	(style name)	Default style for groups created via Ctrl+G.
swimlane	(shape name)	Use a swimlane shape from the sidebar.
container	0 / 1	Whether the cell acts as a container for drop / drill-down.
dropTarget	0 / 1	Whether the cell accepts drops.
collapsible	0 / 1	Whether the folding icon appears.
expand / contract	0 / 1	Whether the group auto-extends or auto-shrinks when children change.
groupPadding	T R B L (CSS)	Padding between the group bounds and children.
transparentBounds	0 / 1	Derived-bounds group / swimlane.
selectParentFirst	0 / 1	Click selects the parent first, then drills down.
locked	0 / 1	Locks the cell and its descendants (no selection, move, resize, edit).
lockedGroup	0 / 1	Children are not selectable — clicks select the group as a unit.
lockedGroupIcon	0 / 1	Show / hide the lock-toggle icon.
editIcon	0 / 1	Show the edit pen icon.
moveIcon	0 / 1	Show the move-handle icon.
connectIcon	0 / 1	Override the global connect-handle visibility for this cell.
part	0 / 1	When set on a child, selecting/dragging it acts on the parent.

All keys above are settable via Edit Style… (Ctrl+E) or the Properties section of the Arrange tab on a selected cell.