Diagram - Choose a Layout

Choose a layout from the relationships your diagram actually contains. A directed process with joins needs different placement from a rooted tree or an explicitly dated timeline. Start with a small valid graph, run deliberately, and inspect the result before applying the same options to a larger model.

#Choose by graph and use case

There is no separate PERT provider or scheduling engine. Counts, dates, winner choices and family semantics remain application data. Venn circle areas do not represent quantities. A provider's capabilities describe its supported profile; they do not infer missing data or guarantee that every constraint combination fits.

#Add the optional layout component

Import DiagramLayout and a provider from @primeui/vue-diagram/layout. Render the component beneath Diagram.Root. diagramLayout receives options and provider receives the actual provider instance.

This component accepts a valid initial model and page ID. Follow First Diagram for the application setup and basic model.

<script setup lang="ts">
import { shallowRef } from 'vue';
import { Diagram, type DiagramModel, type DiagramLayoutOptions } from '@primeui/vue-diagram';
import { DiagramLayout, layeredDiagramLayout } from '@primeui/vue-diagram/layout';

const props = defineProps<{ model: DiagramModel; pageId: string }>();
const options = shallowRef<DiagramLayoutOptions>({ direction: 'right', rankGap: 64, nodeGap: 32 });
const layout = shallowRef<InstanceType<typeof DiagramLayout> | null>(null);
</script>

<template>
    <Diagram.Root :value="props.model" :page-id="pageId">
        <DiagramLayout ref="layout" :diagram-layout="options" :provider="layeredDiagramLayout" />
        <button type="button" @click="layout?.run()">Run layout</button>
        <button type="button" @click="layout?.cancel()">Cancel</button>
        <Diagram.Viewport label="Layout example" auto-fit style="height: 28rem" />
    </Diagram.Root>
</template>

Run is explicit. Mounting DiagramLayout does not arrange the graph or create a worker. The default provider is layeredDiagramLayout, the default options are {}, and the default executor is cooperative main-thread execution. Execution shows the readonly state, cancellation and a consumer-owned worker asset.

Replace options.value when settings change. The component cancels stale work when its options or provider changes, and replaces its controller when the store, session or executor changes. Unmounting releases its controller. If you supply a store instead of value, the application still owns that store's disposal.

The hierarchical example includes the optional copied DiagramLayoutSettingsUI. Complete sources include the fixture, Vue controls, worker helpers where needed and cleanup.

#Separate placement, arrangement and routing

Layout changes saved node positions in one transaction. It preserves node sizes, ports, annotations and saved connector direction, path type and waypoints. Rendered endpoints follow moved nodes; container-local geometry follows its owner. Layout does not replace saved paths with new automatic routes. Cycle handling may reverse an edge internally for ranking; it does not reverse that saved connector. An accepted managed-store layout is one Undo action.

Use Arrange to align or distribute chosen records manually. Use Routing for obstacle detours after placement. Layout reserves measured body/port/label space; it does not optimize connector routes or guarantee crossing-free edges.

#Understand scope and constraints

Layout acts on the visible direct units of the active page, or the expanded container named by parentId. Selection does not automatically restrict the scope. A compound is one rigid unit: descendants keep their local positions, ports and authored paths. To arrange its children, run separately inside that container. Pool/lane contents belong to Swimlanes; generic layout can move the pool as a rigid page unit.

Measured rotated bodies, annotations and ports contribute conservative footprints. Pins preserve exact current positions. Locked or otherwise unavailable units can also become fixed. Contradictory pins, crowded regions, unsupported topology or insufficient fixed containment produce diagnostics and leave the graph unchanged. Some solvers use conservative packing; failure does not prove no arrangement exists.

#Compare capabilities and resource caps

All built-ins use rigid scoped compounds and measured footprints. Venn has the stricter plain-leaf profile described on its guide. All support pins; the input and exact-pin rules vary by family.

These are validation caps, not recommended interactive sizes or latency promises. Resource caps do not establish measured production latency. A worker moves provider computation off the main thread, but preparation, transport, result validation and the commit still cost time. Use small focused fixtures first; see Execution before choosing application limits.

#Related Docs

• Layout Execution
• API