Diagram - Connector decorators

#Usage

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

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

This action targets an existing connector named link. Inspect the returned result before reporting an applied edit.

Create SetTargetArrow.vue and mount it under the root as above. The handler reads the current session when activated, including after a page or source change.

<script setup lang="ts">
import { shallowRef } from 'vue';
import { useDiagramContext } from '@primeui/vue-diagram';

const { session } = useDiagramContext();
const feedback = shallowRef('');

function run() {
    const result = session.value.connections.execute({ kind: 'decorate', id: 'link', end: 'target', decorator: { kind: 'open-arrow', size: 16 } });
    feedback.value = result.status;
}
</script>

<template>
    <button type="button" @click="run">Set target arrow</button>
    <output aria-live="polite">{{ feedback }}</output>
</template>

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

Decorators draw at a connector's start or end. A dash pattern belongs to the path; a midpoint adornment is a small inert graphic along it. These saved graphics carry no business or notation meaning by themselves.

#Set a start or end marker

Choose an endpoint, marker and size, then Apply marker. Undo restores the previous decorator. Try an open arrow or hollow diamond to compare line-only and surface-filled graphics using the current theme.

The following action reads the current session in a child component rendered inside Diagram.Root. In setup, context refs require .value.

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

const { session } = useDiagramContext();

session.value.connections.execute({
    kind: 'decorate',
    id: 'link',
    end: 'target',
    decorator: { kind: 'open-arrow', size: 16 }
});

Use decorator: null to remove that endpoint's marker. Size is a positive finite scene-unit value, at least 0.01; it scales with zoom. The example bounds its field to 4–32 for convenient viewing. The model does not impose that example maximum. Markers orient to endpoint tangents and contribute to geometry bounds/picking. A degenerate tangent uses another nonzero path direction or a stable fallback.

Only crow-foot accepts cardinality; attaching it to another kind is invalid. Its maximum cardinality sits nearest the attached entity. Use the ER relationship workflow when cardinality has semantic meaning. Likewise, use UML, BPMN, Activity or Sequence authoring for those relationships. A marker change alone does not install or validate a notation.

The copied DiagramConnectorPropertiesUI offers None, Arrow, Open arrow, Diamond and Circle. It retains an unsupported current marker as a disabled current-value choice rather than pretending to edit its semantics. The focused example above uses the public connection editor for the additional generic kinds.

#Store a dash and add a midpoint graphic

Choose Dashed, Dotted or Solid, then Apply host dash. This explicitly named host action replaces the saved connector through the public store. It preserves endpoints, labels, controls and markers. Toggle midpoint uses the connection editor's adorn command to add/remove the small centered graphic. Undo restores each accepted saved change.

strokeDash is an optional saved array of 1–8 scene-unit lengths. Each length must be finite and between 0 and 64, with at least one positive length. Omit the field for a solid path. lineCap accepts 'butt', 'round' or 'square'; omitting it keeps the flat 'butt' default, including existing custom patterns such as [2, 4].

The example saves dotted connectors as strokeDash: [0, 6] with lineCap: 'round'. Zero-length painted dashes become round dots with a diameter of two scene units, spaced six scene units apart. Dashed connectors use [8, 4] with flat caps. The pattern continues through connected bends and Bézier segments; an intentional gap starts a separate subpath and restarts the pattern.

Select the connector and move a bend to inspect its saved appearance. Selection and keyboard focus change its color while retaining stroke width, dash pattern and caps. During an edit, the preview retains endpoint markers, midpoint artwork and connected node shapes. Stroke widths and graphics scale with the same scene transform at every zoom. Cancel restores the original path; pending approval shows the saved path until the edit is accepted.

Dash patterns and caps survive native save/load and follow the shared connector geometry in palette thumbnails, SVG export, print, PNG and JPEG.

There is no generic dash-only connection command; a direct host transaction has the host's authority and does not request connection-editor approval. Do not use that path to imitate an end-user editor action subject to application approval.

midpointAdornment has an outline, open strokes, and a fill of 'surface' or 'muted'. Outline points are offsets from the route's arc-length midpoint; the graphic remains upright in world axes and scales with the scene. It is not a projected Vue component or a connector label.

The renderer uses a two-scene-unit stroke for this graphic. Its transformed outline/strokes contribute to bounds. Use adornment: null to remove it. For text, placement, inline editing and ports on visible content, use Labels and Content.

#Theme paint and authored appearance

Endpoint decorators use the current connector color; hollow markers and midpoint fills use the Diagram surface/muted tokens. The saved generic decorator has no arbitrary fill/stroke paint member. The example's Blue paint override sets --p-diagram-connector on its viewport. That CSS preference is local, survives neither Reset nor serialization, and is separate from the saved dash/cap/graphic. Use deliberate colors that remain legible on your application surfaces.

Node/symbol artwork and labels have their own authored appearance contracts; see Shapes and Labels. Avoid adding unsupported connector paint fields to a model. A custom rendering adapter must also make its export behavior explicit; rendering one HTML view does not automatically customize every export format.

#Related Docs

• Connector paths
• Edit connectors
• Labels
• SVG export