Diagram - PERT, Bracket and Family Layouts

#Usage

This skeleton chooses bracket placement. PERT uses layeredDiagramLayout; family placement uses familyDiagramLayout with authored union junctions. The option IDs above match the first runnable example below; supply matching saved records or replace them with your graph’s IDs. Expose the selected provider on the component, such as readonly bracketDiagramLayout = bracketDiagramLayout.

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

These examples have different input contracts. PERT uses application schedule arithmetic with the layered provider. Bracket and family use dedicated built-in providers with explicit advancement and relationship rules.

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.

#PERT dependencies

This activity-on-node graph uses layeredDiagramLayout. Discover precedes Design and Procure; Build waits for both. Launch is a zero-duration milestone. The application calculates earliest starts from predecessor finishes; its small finish-to-start example assumes zero lags and a common numeric day unit. Toggle Build's duration, then Run to arrange the same dependencies.

There is no pertDiagramLayout provider. Layout reads the graph's geometry and edges, not task durations. Duration labels and schedule arithmetic belong to the example. The calculation excludes calendars, resource leveling, probabilistic estimates and an execution engine. Any critical-path highlighting or schedule validation in your application must use your own domain calculation.

#Tournament bracket

Use bracketDiagramLayout. Falcons and Otters enter later rounds as byes; Owls and Foxes feed Quarterfinal. Every participant/match advances to at most one next match, and a match has one or two inputs. Cycles, split advancement and extra inputs fail.

The demo supplies bracket.leafOrder for all four source entrants in seed-slot order. Each match subtree must occupy contiguous seed slots. An interleaved order fails; explicit seed order cannot be combined with incremental: true. Without seed order, deterministic graph/port ordering is used. Winner choices and downstream contestant names remain application data: layout only places the advancement graph and reserves subtree space.

#Family relationships

Use familyDiagramLayout with family.unions. Each union supplies a saved junctionId, one/two partnerIds and its childIds. Directed connectors must exactly match partner → junction and junction → child. People and junction IDs must all exist as prepared scope units.

The example has Alex/Riley → union-1 → Sam and Riley/Casey → union-2 → Taylor. Riley is explicitly in two unions; Morgan is disconnected. Partner generations align and junctions sit between partner centers. Names, parent containers and visual proximity do not imply a relationship.

The supported profile permits at most two unions per person and one parent union per child. Contradictory ancestry, partner cycles, multiple parent unions and mismatched edges are diagnosed. It is a bounded explicit family model, not an arbitrary genealogical inference engine.

#Options, pins and limits

Conflicting pins, overlapping anchored envelopes or insufficient containment fail atomically. Fixed containment can reject this packing even when another arrangement could fit. Neither provider optimizes connector paths.

Bracket/family resource caps are 2,000 nodes and 10,000 edges. PERT retains the layered cap. These caps limit accepted input; they do not promise a response time. Each demo runs only on request, keeps the store stable for Run/Undo, and cancels/disposes old owners when Restart is selected.

Choose a layout · Hierarchical · Execution

#Related Docs

• Choose a Layout
• Layout Execution
• API