Connections
Connections (lines/edges) link nodes together and represent the flow of control or data between steps.
Drawing a connection
- Hover over a node — small dots (handles) appear on its edges.
- Click and drag from a handle.
- Release on a handle of another node to create the connection.
A connection is directional: it goes from the source handle to the target handle.
Opening line settings
Double-click any connection to open the Line appearance panel on the left side of the canvas. Changes apply immediately — you can see them live while the panel is open.
- OK or × — keep changes and close.
- Cancel — revert all changes made in this session and close.
Editing multiple lines at once
Select multiple connections (Shift+click or drag-select), then double-click one. The panel opens for all selected lines. Description and Show description are hidden in multi-line mode — all other settings apply to every selected line simultaneously.
Color
Sets the stroke color of the line and all its markers.
- Click the color swatch to open the color picker.
- Pick any color in HEX, RGB, HSB, or CSS format.
- Click Reset to restore the default theme color.
End styles
Controls the marker shape drawn at the start (source) and end (target) of the connection. Both ends are configured independently.
| Option | Symbol | Description |
|---|---|---|
| None | — | No marker; plain line endpoint |
| Arrow | → | Open arrowhead — two diagonal lines meeting at a point, no fill |
| Triangle | ▶ | Filled equilateral triangle pointing along the line |
| Diamond | ◆ | Filled four-pointed diamond centered on the endpoint |
| Circle | ● | Filled circle centered on the endpoint |
Tip: Use Arrow on the end to show direction of flow. Use Diamond on the start to mark a decision origin. Use Circle for event-based start/end points.
Line styles
Controls the visual pattern of the line stroke.
| Option | Appearance | Best for |
|---|---|---|
| Line | Solid continuous stroke | Standard connections, default |
| Dashed | Evenly spaced dashes (8px on, 8px off) | Optional or conditional paths |
| Dots | Small round dots (1px on, 10px off) | Weak or uncertain links |
| Wave | Smooth sine curve between source and target | Analog signals, data streams |
| Fluctuating | Zigzag line (////) between source and target | Digital signals, pulses, alerts |
Wave and Fluctuating are drawn as straight-line oscillations between the two endpoints. The oscillation amplitude is fixed at 10px; the frequency scales with the line length.
Line type
Controls the routing shape of the connection path.
| Option | Description |
|---|---|
| Soft | Smooth bezier curve — rounds corners, follows a natural arc between handles |
| Step | Orthogonal path with hard 90° corners — routes horizontally and vertically only |
Step lines are ideal for flowcharts and structured diagrams where axis-aligned layout is important.
Note: Wave and Fluctuating styles always use a straight line between endpoints regardless of this setting.
Description
A text label attached to the connection line.
| Property | Value |
|---|---|
| Max length | 50 characters |
| Position | Centered above the line, following its curve |
| Font size | 20px |
| Color | Matches the line color |
If the text is longer than 50 characters it is automatically truncated with ….
Show description
Check Show description to make the label visible on the canvas. When unchecked the text is saved but hidden — useful for adding notes you can toggle later.
Default: description is empty, Show description is unchecked.
Default values for new connections
| Setting | Default |
|---|---|
| Color | Theme default (blue in light mode, lighter blue in dark mode) |
| Start style | None |
| End style | None |
| Line style | Line |
| Line type | Soft |
| Description | (empty) |
| Show description | Off |