Diagram - Connector paths

#Usage

import { Diagram } from '@primeui/vue-diagram';

<Diagram.Root :store="store" page-id="page" connection-type="orthogonal">
    <Diagram.Viewport label="Workflow editor" style="height: 24rem" />
</Diagram.Root>

connectionType chooses the path for newly created connections. Change an existing connector through a path command, as shown below.

This skeleton assumes an initialized store with page page. Use First Diagram for model creation, style imports and store disposal.

A connector stores its endpoints and authored geometry. Its path type controls how that geometry becomes a visible route. Start with Create connections for pointer and keyboard creation; this guide compares saved paths.

#Straight: join two endpoints

A straight connector draws one line between its resolved endpoints. It does not render intermediate waypoints. Select the connector to inspect its endpoint handles; reconnecting changes attachment, rather than adding a bend.

#Polyline: author each bend

A polyline joins the source, each waypoint and the target with straight legs. The example stores two waypoints. Squares move existing bends; secondary plus handles insert one new bend under the pointer. Click-only inserts nothing. Tab to a plus and press Enter/Space to insert an intentional midpoint, then use arrows to move that same point or Delete/Backspace to remove it. Undo restores the saved points.

Waypoints are intermediate anchors, not independent nodes or junctions. A label belongs to the connector even when its route changes; see Labels.

#Orthogonal: follow world axes

An orthogonal path uses horizontal and vertical legs through its authored anchors. These legs follow the world's axes, including when its owner is rotated. Arrow handles move a segment perpendicular to its axis, adjusting its neighboring corners while retaining endpoint attachment and port exit direction. Repeated movement reuses those corners instead of appending redundant doglegs.

Orthogonal geometry alone does not avoid unrelated nodes. Enable obstacle routing when a derived detour is needed.

#Bézier: shape one cubic span

This curve has waypoints: [] and two explicit controls. Select it to see the controls and tangent guides. The start control determines the source tangent; the end control determines the target tangent. Control handles are not endpoints.

import type { DiagramConnectionCommand } from '@primeui/vue-diagram';

const curve: DiagramConnectionCommand = {
    kind: 'path',
    id: 'link',
    type: 'bezier',
    waypoints: [],
    controls: { control1: { x: 230, y: 50 }, control2: { x: 430, y: 220 } }
};

Explicit controls require a single Bézier span with no waypoints. Without explicit controls, Bézier geometry derives controls for each source/waypoint/target span. Adding waypoints is therefore a different representation, not a way to add more explicit cubic controls to the same span.

#Compare and convert a saved path

Select the connector, then change Path type in the copied properties section. Polyline → Orthogonal retains both saved bends. Straight or Bézier clears those bends and incompatible explicit controls. Undo restores the previous record.

DiagramConnectorPropertiesUI comes from your local copied Diagram UI path and requires an ancestor root. Reset manual path clears saved bends and curve controls, retaining endpoints and the current path type/routing policy. Undo restores them. Its path choice uses the root selection inspector and current connection editor. A rejected or pending choice displays the committed path type. Its marker and reconnection controls are explained in Decorators and Edit connectors.

The low-level connections.execute({ kind: 'path', ... }) command applies the fields you supply. It does not implement the copied inspector's conversion rule for you. Supply compatible waypoints and controls: null when clearing explicit controls; omitted fields retain their current values. An external route or path kind can reject manual path changes.

#Use the correct coordinate space

Saved waypoints, Bézier controls and free-point endpoints use the connector parent's local coordinates. Without parentId, those coordinates are page world coordinates, as in these examples. Node and port endpoints reference identities; the scene resolves their transformed locations. Body endpoints dock on the node boundary; named ports stay at their resolved port anchors.

Connection handles expose world points. connections.handleCommand(id, handle, worldPoint, zoom?, snap?) converts a world edit into saved local geometry. Keep screen coordinates separate: viewport input is measured in viewport-local CSS pixels. beginHandleEdit/updateHandleEdit retain the active logical handle through a preview; executeHandle and removeHandle provide keyboard/custom-control edits through the same connection gateway. Handle IDs are transient logical identities, not waypoint indices. Read index and kind from the current descriptor. Moving a node or reconnecting an endpoint retains authored manual geometry and labels. It does not discard bends to make a new automatic path.

Root connectionType defaults to 'polyline' and chooses the next created path; changing it leaves saved connectors unchanged. Use the conversion controls to change an existing record. Reset restores each example's original model, history, view and local controls.

#Related Docs

• Create connections
• Ports
• Edit connectors
• Routing