Connection Labels

A connection can carry any number of labels, anywhere along the line. A label with text is drawn by the library itself; one without is just a position, for content you render yourself.

linker.setConnections([
  {
    id: 'a-b',
    from: { blockId: 'a' },
    to: { blockId: 'b' },
    labels: [
      { id: 'method', position: 'start', text: 'POST' },
      { id: 'name', position: 0.5, text: 'follows the line', rotate: true, offset: -14 },
      { id: 'custom', position: 'end' }, // no text: only a position, for your own content
    ],
  },
])

A library-drawn label is an SVG pill — a rounded rectangle sized to the text, with the text on top. Without labels at all, the Vue #connection-label slot keeps working as before: one label at the line's midpoint.

Describing a label

ConnectionLabel

id

string

Unique within the connection.

position

'start' | 'middle' | 'end' | number

Where along the line. 'start' and 'end' sit a short distance (24px, at most half the line) in from that endpoint, clear of its marker. 'middle' is halfway. A number is a fraction of the line's length, 0..1.

offset

number · default: 0

Distance from the line, in px, along its normal. Positive is to the right of the direction of travel — below a line that runs left to right.

text

string · default: — (unset, you render the label yourself)

The text of a library-drawn label.

className

string · default: — (unset)

A CSS class added to a library-drawn label's <g>.

rotate

boolean · default: false

Turns the label to follow the line. It is kept upright — never upside down.

Positions on the line

The point is found by length along the actual path: along the curve for bezier, along the route for smoothstep (measured to the corners, before rounding). Every label's resolved position arrives in ConnectionLayout.labels of the layout event, one LabelLayout per label:

• id — the label's id.
• point — where to center it, with offset already applied.
• angle — the direction of travel along the line there, in degrees.
• rotation — the angle to rotate the label by: the upright version of angle with rotate, otherwise 0.
• text, className — copied from the label.

The library does not keep labels from overlapping each other; labels placed close together are yours to space out.

Styling a library-drawn label

Set the look of every library-drawn label in the labels group of the configuration: background, border, color, fontSize, paddingX, paddingY and opacity, each also available in the highlight, hover, selected and focus states of the label's connection. The colors default to the theme's labelBackground, labelBorder and labelText (--vl-label-bg, --vl-label-border, --vl-label-color).

For anything more, give the label a className and style the parts: .vl-label-bg for the pill and .vl-label-text for the text. All labels of an instance are kept in one group that is always drawn last, so a label is never covered by a line.

Labels in Vue

#connection-label is called once per label without text, with { connection, label, point, angle, rotation, from, to }; labels with text are drawn by the engine. For a connection without labels the slot is called once, at the midpoint, as before. See VisualLinker Component.

<VisualLinker :connections="connections">
  <template #connection-label="{ label }">
    <span class="badge">{{ label?.id }}</span>
  </template>
</VisualLinker>