Draw.io Syntax: Connections

Purpose

This skill teaches how to connect shapes with edges in Draw.io mxGraph XML. It covers connection types, edge routing algorithms, waypoints, self-loops, custom connection points, and edge label positioning.

Critical Rules (Memorize These)

1. ALWAYS set edge="1" on every connector cell.
2. ALWAYS set source and target to valid vertex IDs. NEVER create edges without both attributes.
3. ALWAYS use relative="1" on edge <mxGeometry>.
4. NEVER hardcode waypoints when an edgeStyle can auto-route the path.
5. NEVER set both vertex="1" and edge="1" on the same cell.
6. ALWAYS use html=1 in the edge style when labels contain HTML.

Connection Types

Decision Tree: Which Connection Type?