Diagram - Virtualization

#Usage

import { Diagram } from '@primeui/vue-diagram';

<Diagram.Root :store="store" page-id="page">
    <Diagram.Viewport :virtualization="{ maxNodes: 160, maxConnectors: 300 }" label="Workflow editor" style="height: 24rem" />
</Diagram.Root>

Fit a large graph into the viewport, zoom in for rich node content, and reveal offscreen records without removing them from the model.

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

Virtualization controls mounted rich node and connector components; it does not remove records from the model. Other queried geometry is drawn in aggregate SVG runs. Use the ordinary viewport's virtualization input with a stable options object.

#Navigate a 1,000-node graph

This fixture has 1,000 simple nodes and 1,935 local horizontal and vertical connectors. Its graph-building loop is shown in the source; it does not run a benchmark.

1. Choose Fit all to see the whole graph as aggregate geometry.
2. Zoom in over the canvas to inspect rich node content.
3. Choose Select remote Request 976, then Reveal Request 976 to bring the selected node into view at detail zoom.
4. Choose Return to Request 1 to return to the first node.

The rich caps are 80 nodes and 120 connector parts. Overview zoom is below 0.35; the root permits zoom down to 0.01 so Fit can show this larger graph. Caps bound rich components, not the saved graph size or aggregate path data. Bulk selection does not pin every selected entity. Aggregate geometry keeps shape silhouettes, routes and selection outlines, without rich templates and labels.

This aggregate overview rendering is different from copied DiagramOverviewUI, the node-map/view-control widget in Pan and Zoom. Neither turns the complete model into rich DOM.

#Limit rich views

Set maxNodes and maxConnectors to cap mounted rich components while other queried geometry remains visible as aggregate SVG runs.

import type { DiagramVirtualizationOptions } from '@primeui/vue-diagram';

const virtualization: DiagramVirtualizationOptions = {
    maxNodes: 80,
    maxConnectors: 120
};

#Options, focus and measurement

The resolver uses defaults for nonfinite numeric options. These budgets are implementation bounds, not a guarantee of frame rate or constant work. Aggregate path data still grows with queried geometry. A visible parent/hub does not force all children/neighbors to mount.

Focus, a native editor and the active gesture can pin up to three entities within the budgets. Offscreen focus can retain a rich view, while bulk selection alone does not. session.focus(id) and session.reveal(id) are distinct: reveal changes the view, then viewport.focus() supplies native canvas focus. Hidden/collapsed records still follow visibility/ownership rules; pinning does not expose an otherwise hidden record.

A saved title edited through Diagram.Field persists in the model and normal history, while a local draft can disappear when its rich view unmounts; see Content.

Measurement changes effective geometry, visibility and routes without replacing the authored model bounds. Explicit supplied measurements take precedence. Recent metadata is capped at 2,048 entries; compact last-known measured geometry can remain for every measured model node until deletion, reset or disposal. That retained geometry grows with the measured model, so rich budgets are not a total-memory cap. Use root measurements.invalidate(ids?) for changed external content/font/theme and session geometry.invalidate(ids) for geometry refresh.

Reset disposes the owned store and remounts the viewport, clearing its resolver, history, focus/selection and relevant options. Input devices, assistive technology and server rendering require qualification for your application and supported platform.

#Choose budgets for your application

Test your node templates, connector routes and editing workflows on the browsers and devices your application supports. Model size alone does not predict navigation speed, and rich-view caps do not limit all geometry work or memory. See Performance for the large-graph demo and measurement guidance.

#Connector order across detail levels

The viewport's edgeLayer policy applies to rich parts, mixed rich/aggregate content and overview geometry. 'below' is endpoint-relative order. 'above' paints strokes above node bodies within each model layer and keeps connector model order. The viewport rebuilds aggregate runs when the policy changes, even if the geometry and visible membership stay the same.

The policy does not change virtualization budgets, routes or port hit radius. Offscreen endpoints still contribute their owner order in 'below'. See connector creation for the input and picking behavior.

#Related Docs

• Pan and Zoom
• Selection
• Content
• Geometry and measurement