4. Connectors and Smart Route
Making a connection#
Hover a shape and its eight ports appear — n ne e se s sw w nw — just outside
the outline (they stay up for a moment after the pointer leaves, so you can
reach them). Drag from one:
- onto another shape → connected shape to shape;
- onto a specific port of another shape → that port is pinned;
- into empty space → a new shape is created at the drop point, connected, and put into text editing.
The C tool does the same thing without needing the ports: drag from anywhere
inside a shape.
A connection whose ends are not pinned lets the router pick the faces; that is almost always what you want, because the faces are then re-chosen as the shapes move.
Routing modes#
Per connector, from the right-click Routing submenu or the Inspector's
Routing field:
| Mode | What it draws |
|---|---|
Smart | Always avoids shapes, whatever the document's Smart Route toggle says |
Orthogonal | Right-angle segments; avoids shapes when Smart Route is on. The default |
Elbow | A single corner between the two ends |
Straight | A direct line between the two ports |
Curved | A smooth curve |
Straight and curved connectors take no crossing hops and are not bundled.
Smart Route#
The Smart Route toggle in the toolbar (R) is what makes connectors go
around shapes instead of through them. With it on:
- No connector cuts through a shape. Containers and backdrops — lanes, planes, groups, frames, lifelines and text — are passed through, not around.
- Several connectors on one side of a box are spread out along that side, in the order of where their other ends sit, instead of stacking on one point. A port you pinned by hand is never moved.
- Parallel runs are kept apart where there is room, so two connectors do not draw on top of each other.
Exports use the same routes. The export dialog's Route connectors around shapes option defaults to on so an export cannot differ from the screen.
Crossovers#
Crossovers (J) draws a small hop where one connector crosses another. The
convention is that horizontal runs jump vertical ones, so a crossing is drawn
exactly once no matter which connector renders first.
Shaping a route by hand#
With a connector selected:
- Waypoint handles — drag the round handles to place explicit points.
Alt-click the line to insert a waypoint where you clicked.- Segment dragging — drag a straight run perpendicular to itself. The point count never changes, so dragging reshapes the route rather than littering it with new points. The first and last segments touch the ports and are not draggable.
- Endpoint dragging — drag either end onto another shape or port to re-wire it, or into space to leave it floating.
- Label dragging — drag the label along the line to move its position.
- Right-click →
Clear waypointsreturns the connector to a fully automatic route.
A connector with waypoints is routed through them with corners inserted so every segment stays axis-aligned; Smart Route leaves its path to you.
Arrow heads#
Right-click → Start/End arrow head, the Inspector, or the palette
(Connector end: …). The set is: none, filled arrow, open arrow, solid
triangle, diamond, circle, bar, the UML heads (generalisation, aggregation,
composition) and the five crow's-foot heads (exactly one, many, zero or one, one
or many, zero or many). All of them are drawn on the canvas and in SVG, PDF
and draw.io exports.
Swap ends reverses a connector, taking the heads with it.
Self-connections#
A connector whose two ends are the same shape is drawn as a small rounded loop off a free face, rather than degenerating to a zero-length path.
Buses#
When three or more connectors run between two containers, they are re-drawn as spur → shared trunk → spur instead of as separate parallel lines, the way a wiring diagram does it. You can also state a bus by hand: put the same name in the Inspector's Bus field on each connector that belongs to it.
Membership is never guessed from bare geometry. Merging connectors onto a trunk loses which spur pairs with which, so it needs the author to say so — either by grouping the endpoints or by naming the bus.
Bundling#
Connectors that share a corridor are re-seated on evenly spaced lanes rather than being left to overlap. Only the interior runs move: ports stay where they are, and a move that would graze a shape or collapse a neighbouring run is rolled back rather than applied.
Labels#
A connector label with no position of its own slides along the route to the
first spot clear of shapes, of that connector's own handles, and of every label
already placed. Drag the label and it is pinned there — pinned labels are placed
first and the automatic ones move out of their way. Clear waypoints does not
unpin a label; drag it back to the middle to re-pin it there.