Diagram - Shapes

#Usage

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

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

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

const node: DiagramNodeRecord = {
    id: 'decision',
    type: 'diamond',
    pageId: 'page',
    layerId: 'layer',
    bounds: { x: 0, y: 0, width: 160, height: 120 },
    rotation: 0,
    ports: [],
    labels: []
};

Include node in the model passed to createDiagramStore. Its type and bounds choose the shape and size. The viewport renders the saved geometry; optional symbol artwork uses a registry or an embedded definition.

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

Add this complete record to the model's nodes array before creating the store:

Use a rectangle, ellipse or diamond for a basic node. Use a symbol when the node needs a flowchart drawing or reusable artwork. The visible drawing and the boundary used for picking and docking are separate choices.

#Basic geometry

This example compares the three DiagramShape variants. Choose Grow shapes 10% to change their authored dimensions, or Rotate diamond 15° to rotate the diamond and its content together. Undo restores the previous edit.

A node's bounds describe its position and dimensions in its parent's local coordinate space. Without parentId, they use page world coordinates. rotation is a local angle in degrees. In the default scene, type: 'ellipse' and type: 'diamond' select those boundaries; other node types use a rectangle unless a supplied shape or resolved symbol overrides it.

Include the node in a DiagramModel whose pages and layers contain the referenced IDs; the demo's code tab includes that complete setup and the copied node content part.

Positive dimensions determine the shape's proportions: equal ellipse dimensions produce a circle; unequal dimensions produce an oval. For resize handles, numeric dimensions, limits and rotated anchors, continue with Resize.

#Geometry and flowchart artwork

The first node below uses diamond geometry. The next two use the flowchart Decision symbol, with the same displayed dimensions. The second follows the theme; the third has explicit authored paints.

createDiagramFlowchartLibrary() comes from @primeui/vue-diagram/palette. Find the definition you need, register it in a DiagramSymbolRegistry, pass that registry to the root's symbols input, and create the node with createDiagramSymbolNode().

A symbol has an intrinsic drawing viewport (width and height) and a boundary. The drawing scales into the node's effective dimensions and is clipped to its intrinsic viewport. Picking and body docking use the declared rectangle, ellipse or diamond boundary. A path with notches or curves does not create an exact outline for picking: choose a conservative boundary and use ports for precise attachments.

The libraries contain original illustrative drawings. A flowchart or electrical symbol does not install domain rules. See Symbols for the catalog, registration lifetime and an original reusable drawing.

#Theme defaults and authored paints

Ordinary shapes use the Diagram theme's node fill and stroke. Built-in symbol graphics use nodeFill and currentColor to follow those paints. Keep these values when the artwork should adapt to the active light or dark theme.

A symbol node's config.fill and config.stroke can override graphic paints; explicit hexadecimal colors keep their authored value when the theme changes. The authored example also sets its label's font.color so its text remains readable against the chosen fill. Choose related fill, stroke and label colors together. The basic geometry example leaves all three to the theme.

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

const node = createDiagramSymbolNode(definition, {
    id: 'authored-decision',
    pageId: 'page',
    layerId: 'layer',
    bounds: { x: 0, y: 0, width: 160, height: 120 },
    config: { fill: '#dbeafe', stroke: '#1e40af' }
});

This helper creates a record; it does not insert it into an existing editor. The complete examples initialize a store with the records. For later insertion, use the editor's connection gateway as described in Symbols.

#Related Docs

• Symbols
• Ports
• Resize
• First Diagram