Connectors represent relationships between nodes on the canvas.

Connectors Header


Connectors are lines that connect nodes, representing relationships and movements between them

Design Resources

Download Sketch Kit


  • Use connectors to connect to nodes horizontally or vertically.
  • Avoid 45° and freeform connectors.
  • Use the badge component to label connectors.

In testing mode, a user can choose a path through a workflow, then see it reflected in color and line-weight changes to the connector path.

A wireframe showing a connector base
Connector base
A wireframe showing a connectors hover state
Connector hover
A wireframe showing a connector focus state
Connector focus
A wireframe showing a connector variant
Connector variant
A wireframe showing connector tracing
Connector tracing
Connector tracing animation

Next: Drag and Drop