Diagram - Tree, Mind Map and Radial Layouts

#Usage

This skeleton chooses the organization-tree provider; mind-map and radial providers are alternatives for the forest profiles below. Expose the selected provider on the component, such as readonly treeDiagramLayout = treeDiagramLayout.

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

The three tree providers require a directed forest: each node has at most one incoming parent edge, and there are no cycles. Disconnected trees are supported. A graph with a join belongs in Hierarchical; a general cyclic network belongs in Force.

Import DiagramLayout and the provider for this family from @primeui/vue-diagram/layout. Place the component inside Diagram.Root, bind options with :diagram-layout and the provider with :provider. Use the layout setup for the component composition. The complete examples below supply the model, options and cleanup.

#Organization tree

treeDiagramLayout centers parents over ordered subtrees. Product owns Design and Engineering; their descendants stay in separate subtree envelopes. Research has a rotated body, so its conservative footprint reserves additional space.

Run, Undo, then drag a sibling. Enable Preserve sibling order before the next run to use current cross-axis order. Pin Product to preserve its exact position. Incremental ordering can anchor components and preserve authored order; it does not lock every node or guarantee the fewest moves.

#Mind map

mindMapDiagramLayout assigns root branches to the chosen direction or its opposite. This demo uses branchSides: { Design: 'opposite', Engineering: 'primary' } with Right growth. Each branch's descendants inherit that side.

Keys in branchSides must name immediate children of a forest root. Values are primary or opposite; the option belongs only to this provider. Unassigned branches use the provider's deterministic balancing. Switching Left reverses the visual main-axis growth while preserving the saved hierarchy.

#Radial tree

radialDiagramLayout places generations on concentric rings and allocates subtree sectors. Measured bodies, rotations, labels and ports determine conservative ring spacing. Direction rotates the principal ray, while labels remain upright according to their own saved rendering settings.

This is a rooted radial tree. It does not infer communities in a cyclic network or place every node on one common circle. Large footprints can produce wide ring spacing; use Fit and zoom to inspect the result.

#Shared options and constraints

Conflicting pins, overlapping anchored components or insufficient containment fail without partial positions. Layout does not relax pins to force a fit. Source caps are 10,000 units and 40,000 edges; graph validation and measured packing do not establish a latency guarantee.

Each diagram has its own complete fixture and public provider instance. Nothing runs on mount. Run/Cancel and ordinary progress/error text remain visible, and each committed arrangement is one Undo action. Restart cancels work and creates a fresh store; DiagramLayout owns controller/subscription cleanup on replacement or destruction.

Choose a layout · Execution · Groups and containers

Organization Chart combines the tree provider with live directory metadata, current selection and Undo.

#Related Docs

• Choose a Layout
• Layout Execution
• API