Guidelines

Intro

Diagram connectors show a relationship or association between nodes in a diagram.

https://www.figma.com/design/3pnSbYmau9yyEpKr63q5cb/DNA-Web-UI-Kit?node-id=50730-25569&t=KqCDpDR01DMkgw5a-11

When to Use

Use the component:

To show a relationship or association between nodes in a diagram

Don't

Don’t use the component:

As a standalone element without nodes
To connect two elements that are not nodes

Top Tips

Include an icon on the connector or on the corresponding node if using a semantic or color distinction is being used.

Anatomy

Connector Line
Mid-Point (optional): For example, an icon, text, or context toolbar
Arrowhead (optional): Illustrates a directional relationship

A diagram connector with three numbered callouts: (1) a pink circle pointing to the left connector line, (2) a pink circle pointing to the mid-point with a gray icon, and (3) a pink circle at the right arrowhead indicating direction.

Connector anatomy

Types

Connector Shapes and Styles

The connectors comes in three different shapes: straight, bent and rounded. Dashed connectors are used in some diagrams to illustrate objects that are hidden or that need to communicate a another meaning.

Six connector variants arranged in two rows of three. Top row (solid line): a straight connector, a bent (S-curved) connector, and a loop connector. Bottom row (dashed line): the same three shapes — straight, bent, and loop — rendered with a dashed stroke.

Connector shapes and styles

End-Points

Arrowheads can be added to the end-point of a connector to indicate a directional relationship.  Note: The implemented control will have larger arrowheads to ensure visibility. Changing the size of the arrowhead is not possible in Figma.

Three columns comparing end-point behavior across connector types. Non-Directional column: a plain line, an S-curve without arrowheads, and a loop without arrowheads. Directional (Figma) column: a straight arrow, an S-curved arrow, and a loop arrow. Directional (Implementation) column: the same three shapes with arrowheads, showing the expected rendered output.

End-points

Mid-Points

A mid-point can be added to the connector to display additional information or actions.

Four connector mid-point variants shown as horizontal arrows with a centered marker: Icon (a diagonal arrow icon), Text (a "Diagram" label), Context Toolbar (a rounded square button with a right arrow icon), and SAC Tracepoint (a solid dark circle).

Connectors with a mid-point

Colors

To ensure accessibility, an icon must to be placed on the connector (mid-point) or inside the node.

Six connector color variants shown as horizontal arrows with labels: Default (grey), Purple (purple with a mid-point icon), Error (red), Warning (orange), Success (green), and Information (blue).

Colors

Behavior and Interaction

Interaction States

Four horizontal arrow connectors stacked vertically, each labeled with an interaction state: Default (thin dark line), Hover (thin blue line, slightly brighter), Selected (medium-weight blue line), and Hover and Selected (bold blue line with a larger arrowhead).