Draw.io Swimlane Implementation

Purpose

This skill enables correct generation of swimlane diagrams, cross-functional flowcharts, and pool/lane layouts in Draw.io mxGraph XML. It enforces the container-relative coordinate system and prevents the most common AI mistake: placing child shapes at absolute page coordinates instead of container-relative coordinates.

Critical Rules (Memorize These)

1. ALWAYS set container=1 in every swimlane and pool style — Without it, child shapes will NOT move with the lane when repositioned.
2. ALWAYS use container-relative coordinates for children — A child at x="40" y="35" is 40px from the lane's left edge and 35px from the lane's top edge (below the header). NEVER use absolute page coordinates.
3. ALWAYS set parent to the container ID for child shapes — A shape inside "lane1" MUST have parent="lane1". NEVER set parent="1" for shapes that belong inside a container.
4. ALWAYS set cross-lane edge parent to the common ancestor — When an edge connects shapes in different lanes, set the edge's parent to the pool (the shared ancestor). NEVER set it to one of the individual lanes.
5. ALWAYS include collapsible=0 on lanes — Without it, users can accidentally collapse lanes in the editor, hiding all contents.
6. NEVER use absolute page coordinates for shapes inside a container — This is the #1 swimlane mistake. Shapes will render at the wrong position and will NOT move with their parent lane.

Container Hierarchy

Swimlane diagrams use a strict parent-child hierarchy: