Edges & Connections
Learn how to define relationships and route connection lines between elements on your canvas.
Connection Syntax
To connect two elements, use the arrow symbol -> between their quoted labels:
dsl
1"Client" -> "Server"Chained Connections
You can chain multiple connections in a single line. The compiler will automatically break this down into separate binary edges:
dsl
1"Client" -> "Load Balancer" -> "Web Server" -> "Database"Shorthand Arguments
You can specify a quick edge style by adding a colon : and a shorthand keyword immediately after the target node:
- `arrow`: Standard directed connection (default arrow end, no arrow start).
- `line`: A plain line with no arrowheads.
- `doublearrow`: Arrowheads on both ends.
- `dashed`: A dashed line.
dsl
12"User" -> "Router": line"Router" -> "Server": dashedEdge Attributes
For full control over connection styling, labels, routing, and arrow caps, add an attribute block [ ]:
dsl
1"Web Server" -> "Cache": arrow [label: "Read Cache"]| Attribute | Type | Default | Description |
|---|---|---|---|
| routing | "bezier" | "straight" | "step" | "straight" (or canvas default) | Path calculation mode: curved ("bezier"), direct line ("straight"), or orthogonal elbows ("step"). |
| label | string | undefined | Text label displayed along the connection line. |
| t | number (0.0 to 1.0) | 0.5 | Position of the label along the path. 0.5 is exactly in the middle. |
| stroke | string (Hex/RGBA) | theme default | Color of the connection line. |
| strokeWidth | number | 1.5 | Thickness of the connection line in pixels. |
| dash | string | "solid" | Line style: "solid", "dashed", "dotted", or "longdash". |
| arrowStart | ArrowCapType | "none" | Cap style at the start of the line. See below for options. |
| arrowEnd | ArrowCapType | "arrow" (for arrows) | Cap style at the end of the line. |
| waypoints | string[] | string | [] | Explicit coordinates the line must pass through. Formatted as an array of coordinate strings ["x,y", "x,y"] or a single semicolon-separated string: "x1,y1; x2,y2". |
| autoRoute | boolean | true | If true, automatically routes around nodes to prevent overlap. |
Arrow Cap Options
Spayse supports 10 distinct arrowhead styles for `arrowStart` and `arrowEnd`:
| Attribute | Type | Default | Description |
|---|---|---|---|
| none | - | Plain line end. | |
| arrow | - | Standard filled arrowhead. | |
| open-arrow | - | V-shaped open arrowhead. | |
| half-arrow | - | Single-sided arrowhead. | |
| circle | - | Filled circle. | |
| hollow-circle | - | Outline circle. | |
| diamond | - | Filled diamond. | |
| hollow-diamond | - | Outline diamond. | |
| bar | - | Flat perpendicular bar. | |
| square | - | Filled square. |
Routing Modes
The three routing algorithms render paths differently:
Loading preview...
Bezier (curved), Straight (direct), and Step (orthogonal) routing modes