Diagram - Hierarchical Layout

#Usage

Choose direction and spacing for a saved directed graph. Layout placement and connector routing are separate work. Expose the selected provider on the component, such as readonly layeredDiagramLayout = layeredDiagramLayout.

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

Use layeredDiagramLayout for directed graphs with branches, joins, multiple roots or cycles. It ranks the graph, orders nodes within ranks and assigns positions. It keeps saved connector direction, path type and waypoints. Rendered endpoints follow moved nodes, and container-local geometry follows its owner; layout does not replace saved paths with new automatic routes.

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.

#Arrange a directed graph

Select Run layout, then Undo once. Design and Build both feed Review; Audit is disconnected. The rotated Build card, Design's fixed port and Ready annotation contribute to measured clearance. Open Copied layout settings to change direction, rank gap, order or the Intake pin, then run again.

The complete source imports DiagramLayout and layeredDiagramLayout from the optional layout entry. The copied DiagramLayoutSettingsUI comes from the local @ui/diagram/layout entry. Bind its layout prop to the component handle, pass options, and replace the options ref on optionsChange. delegateRun emits runRequested so the application can Fit after a committed or unchanged result.

#Set direction, gaps and order

Gap values must be finite and between 0 and 100,000. Default gaps are not fixed pixel distances between every pair of bodies. Port order contributes ordering information and labels reserve space; routing is still separate.

Use Add return edge, then Run. Cycle removal is internal to ranking. The saved Launch → Intake edge remains directed that way. A result's reversedEdges is metadata about ranking, not a set of connector edits.

Use Pin coincident Intake / Audit, then Run. This deliberately creates two overlapping fixed bodies in an application transaction. Layout cannot move either pin; its diagnostic leaves those authored positions intact. Undo the fixture edit or Restart, remove the conflicting pins, and run again. Ordinary single pins can anchor a component; they do not promise every other pin is compatible.

#Arrange one expanded container

Delivery scope arranges Intake → Review → Done in the container's local frame. Outside remains unchanged; its crossing edge does not become a child in that scope. Use page scope instead treats Delivery as one rigid unit and keeps all its child coordinates. A later child-scope run is a separate Undo unit.

parentId requires a visible expanded container on the active page. Fixed inside containment subtracts container padding and validates the final footprints. To return to page scope, omit the optional parentId key; the complete demo removes it instead of capturing an explicit undefined value. Collapsed or missing containers fail. Pool and lane child scopes fail because swimlane layout owns those positions. Layout does not recursively reflow all containers, resize them to fit, or arrange an arbitrary selected subset.

#Read outcomes and preserve the graph

DiagramLayout publishes state, progress and diagnostics. A valid managed result commits all position updates together; an unchanged result is noop. A controlled store produces a pending proposal for the host to decide. A failed or cancelled job applies no layout positions. Options/provider changes and model/geometry changes invalidate a running calculation; already-submitted controlled proposals remain host-owned.

The controller captures conservative measured footprints, validates results and checks current policy before submitting. Dense geometry, fixed overlaps or insufficient containment can fail even when a different manual arrangement fits. Layered resource caps are 10,000 units and 40,000 edges; they are not browser latency guarantees.

Restart example cancels the owned job, disposes the old store and restores the fixture/options. DiagramLayout releases its controller on replacement or unmount; Diagram.Root releases its session. Ordinary Run, option edits and Undo keep the same store and session.

Choose a layout · Trees · Execution · Routing

#Related Docs

• Choose a Layout
• Layout Execution
• API