Diagram - Groups and containers

#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 { useDiagramContext } from '@primeui/vue-diagram';

const { session } = useDiagramContext();
const result = session.value.structure.execute({ kind: 'reparent', ids: ['request'], parentId: 'team' });

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

In a child under Diagram.Root, use the current session's structural editor. This action assumes saved node request and container team on the same page:

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

Use a container when records should move as an owned subgraph. Use a visual frame when you only need a border around an area. Spatial overlap alone creates no parent relationship. Start with Selection and Arrange for ordinary selection and alignment.

#Group and transfer without moving world geometry

Choose Group request and review, then Ungroup work set. The cards and internal connector keep their world placement while their saved ownership changes. Transfer Request to Review team, then inspect its world body position. This transfer changes ownership; it does not place the card at the center of the destination.

session.structure.execute(command) uses the existing atomic structural editor. availability(command) reports whether the same command can run now. Grouping requires a complete new node with container: {} and a unique identity. Selected ancestors absorb selected descendants; you do not need to reparent each child.

A destination must be a container with compatible page/layer ownership. Null parentId moves roots to page space; optional pageId and layerId choose the destination explicitly. World body frames, ports and labels are rebased through rotated parents. Free connector endpoints, waypoints, explicit Bézier controls and absolute labels rebase with their owner; path-label offsets remain vectors. Nested children retain their local coordinates.

Try the Review card destination to see an invalid owner. Try Details page with only one linked card: a surviving connector cannot cross independent pages, so the entire relocation rejects. Moving a complete subgraph also moves its internal edges and updates navigation references. Ownership cycles, incompatible layers, missing IDs or locked destinations reject atomically. Ungrouping rejects a container used by an endpoint or navigation reference.

#Compare sizing, clipping, containment and collapse

The request starts partly outside its team. Apply Size to children to derive larger extents, Clip child paint to hide overflow, or Collapse team to hide the subtree. Keep children inside rejects authored overflow. Choose Move child inside before applying that policy. Undo restores the saved operation.

Children sizing can grow left/up while the authored content origin and rotation pivot remain fixed. Measured children may change derived extents without rewriting bounds or adding history. Labels and connector routes do not drive auto-size; containers do not measure their own rendered content. Fixed and collapsed bodies retain authored bounds. Runtime measurement overflow is distinct from a saved edit.

Collapse preserves authored endpoints, ports and manual geometry for expansion. Expand before editing a proxy path. Hidden, fully clipped and collapsed descendants cannot be picked or edited as visible items. A reveal of a collapsed descendant can target its visible ancestor; the copied explorer instead marks that result unavailable. See Search.

#Draw a frame without structural ownership

The cards visually lie inside Review area but still belong to page space. Select the frame border, then try parenting a card or connecting to the frame. Both tasks are invalid for a visual frame.

frame: true is a root visual artifact with border-only picking. It has no structural children, ports, pool or attachment, cannot be a connector endpoint, and does not become a routing obstacle. Use an ordinary container for those ownership tasks; adding a frame does not change the graph beneath it.

#Ownership, permissions and history

Structural editing cancels owned transient edits before one atomic transaction. Foreign previews, current permissions and destination policy can still reject it. Controlled stores wait for a separate host acknowledgement; a direct host Store write has its own authority and must apply application policy. Undo/Redo use current source and destination permissions.

Containers paint before connectors and ordinary children in each layer; clipping and picking share geometry. Use Swimlanes for lane membership and transfer rather than generic reparenting of lane records. Use Controlled State when the host owns acceptance of proposed changes.

#Related Docs

• Architecture
• First Diagram
• API