Diagram - Grid, Timeline, Serpentine and Neural Layouts

#Usage

Initialize options.structured with a kind and complete unit membership from one of the examples below. 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 structuredDiagramLayout = structuredDiagramLayout.

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

Use structuredDiagramLayout with a discriminated structured option. Each mode requires every visible direct scope unit exactly once. Unknown, missing or duplicate IDs fail before any positions are committed. The provider keeps authored edges; it does not generate a chart's business data.

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.

#Grid slots

Supply kind: 'grid', integer rows/columns and slots containing id, zero-based row and column. Intentional holes remain visible; uniform cells use the largest measured extents plus required gaps. Rows follow the main direction and columns the positive cross axis. The demo is a partial illustrative element grid; it does not claim a complete periodic table.

Rows/columns range from 1 to 2,000. Duplicate cells and out-of-range slots fail. Cell spans are unsupported. Layout does not collapse empty internal rows or columns to make the graph look denser.

#Numeric timeline

Supply kind: 'timeline', finite origin, positive scale and events with id, finite numeric time and integer lane. The fictional project uses year values with origin 2018 and 140 pixels per year. The application converts dates, labels and calendars to this numeric input.

Footprint centers lie at (time - origin) * scale in the scope's main axis, negated for Up/Left. Launch and Mobile share 2020; separate tracks preserve that exact coordinate. Toggle the scale and compare track use. Layout does not expand or shift the time axis to avoid a collision.

Within a lane, events sort by time then stable ID and use the first compatible track. Measured intervals plus label/unit clearance determine track reuse. This greedy policy can use more tracks than an optimal partition. Missing internal lanes reserve space. Scale is finite, greater than zero and at most 1,000,000; lanes are integers 0–1,999. rankGap is rejected because scale owns main-axis spacing. Containment must already include the mapped axis.

#Alternating serpentine traversal

Supply kind: 'serpentine', a complete order and integer wrap from 1 to 2,000. Down/Up fill alternating horizontal rows; Right/Left fill alternating vertical columns. Every alternate row/column reverses cross-axis traversal. The partial final row starts at its correct turn side.

The seven saved steps and six connectors are application data. The provider changes their positions only; it does not draw rounded connector turns or create a missing sequence edge. Toggle wrap to compare ordinary option variants within this one topology.

#Explicit neural layers

Supply kind: 'neural', ordered layers of unit IDs and an explicit recurrent policy. Layer membership/order is authoritative. Empty layers reserve space; each ordered layer is centered across the other axis. Multiple inputs and forward skip edges are supported.

The demo includes Output → Hidden A. recurrent: 'allow' preserves this backward edge without using it to rank nodes. Select Reject recurrent edges, then Run: reject diagnoses backward, same-layer and self edges and keeps the existing layout intact. This is visual placement, without weights, training, inference or network execution.

#Shared placement contract

Options from other families are rejected. Grid/timeline/serpentine allow arbitrary saved edge topology; neural follows its recurrent policy. Measured rotated bodies, annotations, ports and connector-label extents reserve conservative space. This does not optimize label routes or recurrent-edge routing.

Conflicting pins and containment fail without changing slots, scale, wrap or layers to force a fit. Dense same-lane timelines can require quadratic track scans. Bounded validation/sorting can still exceed one cooperative callback budget; source caps are not performance guarantees.

All four demos have complete standalone sources, explicit Run, Cancel, one-step Undo and Restart. DiagramLayout disposes its controller on owner replacement and unmount; the application disposes its old store.

Choose a layout · Execution · Routing

#Related Docs

• Choose a Layout
• Layout Execution
• API