Line & Arrow Connections

Overview

Lines and arrows can store connection endpoints so they stay attached to specific points on other objects. Use startConnection and endConnection to define each endpoint.

API

editor.updateObjectProperty(lineId, 'startConnection', {
  objectId: rect.id,
  point: 'right',
})

editor.updateObjectProperty(lineId, 'endConnection', {
  objectId: circle.id,
  point: 'left',
})

Connection Points

Supported points:

• top, right, bottom, left
• top-left, top-right, bottom-left, bottom-right

Custom Connection Points

You can limit which points are available per object. This affects snapping and the connection mode UI.

// Edges only
editor.setObjectConnectionPoints(rect.id, { preset: 'edges' })

// Corners only
editor.setObjectConnectionPoints(card.id, { preset: 'corners' })

// Custom subset
editor.setObjectConnectionPoints(node.id, { points: ['top', 'bottom'] })

// Clear override
editor.clearObjectConnectionPoints(node.id)

Notes

• Connection endpoints are optional; omit or clear them to keep freeform lines.
• These fields are stored on the line/arrow object as data and can be persisted.
• When per-object connection point configs remove a point, existing connections remap to the nearest allowed point.

Connection Manager Links

The connection mode creates separate connection lines managed by ConnectionManager. These connections can display labels and snap to nearby connection points while you draw.

Label API

const connection = editor.connectionManager.createConnection(
  'conn-1',
  { objectId: rect.id, point: 'right' },
  { objectId: circle.id, point: 'left' },
  { pathStyle: 'curved' },
  'Initial label'
)

editor.connectionManager.updateConnectionLabel(connection.id, 'Updated label')
editor.connectionManager.updateConnectionLabel(connection.id, '') // remove label

Interaction Notes

• While creating a connection, endpoints snap within the configured threshold to the nearest connection point.
• Double-click a connection line to delete it.