Connections

A connection links two block endpoints and is drawn as an SVG path between their resolved ports.

Describing a connection

ConnectionDescriptor

id

string

Unique connection id.

from

ConnectionEndpoint

The connection's start endpoint — see "Connection endpoints" below.

to

ConnectionEndpoint

The connection's end endpoint — see "Connection endpoints" below.

style

ConnectionStyle · default: — (unset, uses instance-wide defaults)

Per-connection curve/color/marker overrides — see Connection Styling.

hoverable

boolean · default: follows interaction.hover

Turns the hover state and the pointer cursor on or off for this connection only; the local value wins over the global one. See Visual States.

ariaLabel

string · default: "Connection: {from block id} → {to block id}"

The accessible name of the line — an aria-label on it. See Selection & Accessibility.

labels

ConnectionLabel[] · default: — (unset, one #connection-label slot at the midpoint in Vue)

Labels placed along the line — any number, anywhere on it. A label with text is drawn by the library; one without is a position for your own content. See Connection Labels.

Example — every field at once:

linker.setConnections([
  {
    id: 'task1-task2', // unique id
    from: { blockId: 'task-1', portId: 'output' }, // starts at block "task-1"'s "output" port
    to: { blockId: 'task-2' }, // ends on block "task-2"'s own border — no portId, so side: 'auto'
    style: { curve: 'smoothstep', color: '#6366f1' }, // optional — see Connection Styling
    ariaLabel: 'Task 1 feeds task 2', // optional — the line's accessible name
    labels: [{ id: 'kind', position: 'middle', text: 'feeds' }], // optional — any number of labels along the line
  },
])

Connection endpoints

ConnectionEndpoint

blockId

string

Must match a registered block's id.

portId

string · default: — (unset, the block's own border with side: 'auto')

Must match one of that block's ports[].id — see Blocks & Ports.

Example:

{
  from: { blockId: 'a', portId: 'output' }, // leaves block "a" from its "output" port specifically
  to: { blockId: 'b' }, // arrives on block "b"'s own border — b has no ports array, so this is the only option anyway
}

Curve types

Set for every connection with lines.curve in the configuration, or per connection via style.curve (wins when set):

• bezier (default) — a smooth cubic curve, with curvature/curveMinReach/curveMaxReach controlling how far it bows out and curveAngleBlend/curveAngleMaxOffset controlling how much the exit/entry angle leans toward the other endpoint instead of staying perpendicular to the block's border.
• smoothstep — orthogonal routing (strictly horizontal/vertical segments with rounded corners), aware of sibling connections that share the same port and side: they fan out from a common rounded branch point instead of overlapping. cornerRadius controls the bend radius, maxTrunkReach caps how far the shared trunk extends before splitting.
• straight — a plain straight line between the two resolved points, no curve geometry at all.

linker.setConnections([
  { id: 'c1', from: { blockId: 'a' }, to: { blockId: 'b' } }, // bezier — the default, no style needed
  { id: 'c2', from: { blockId: 'a' }, to: { blockId: 'c' }, style: { curve: 'smoothstep' } }, // orthogonal routing
  { id: 'c3', from: { blockId: 'a' }, to: { blockId: 'd' }, style: { curve: 'straight' } }, // plain straight line
])

All the curve-geometry fields mentioned above live on ConnectionStyle — see Connection Styling.