Diagram - Editor composition

#Usage

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

<Diagram.Root :store="store" page-id="page">
    <Diagram.Viewport label="Workflow editor" style="height: 24rem" />
    <Diagram.Inspector v-slot="{ selectedIds, commands, execute }">
        <p>{{ selectedIds.length }} selected</p>
        <button v-for="command in commands" :key="command.id" type="button" :disabled="!command.available" :title="command.reason" @click="execute(command.id)">{{ command.label }}</button>
    </Diagram.Inspector>
</Diagram.Root>

The viewport and selection inspector share the root’s model/session context. The application owns the surrounding layout and controls.

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

#UI Composition

import { Diagram } from '@primeui/vue-diagram';
import { DiagramEditorUI, DiagramToolbarUI, DiagramCanvasUI, DiagramInspectorUI } from '@ui/diagram';

<Diagram.Root :store="store" page-id="page">
    <DiagramEditorUI>
        <template #toolbar><DiagramToolbarUI /></template>
        <template #canvas>
            <DiagramCanvasUI><Diagram.Viewport label="Workflow" style="height: 24rem" /></DiagramCanvasUI>
        </template>
        <template #end><DiagramInspectorUI /></template>
    </DiagramEditorUI>
</Diagram.Root>

The shell projects the supplied parts into named regions. It creates no root or workspace provider; import copied UI from your application directory.

The copied editor shell arranges the controls you supply. Choose it when its toolbar, utilities, status, start panel, canvas and end panel match your application.

This composition assumes the store from First Diagram.

#Start with supplied regions

Insert a symbol, select it and change its name or bounds. Toolbar, palette and inspector share the root and history. Pages/Layers request changes to host page and insertion-layer refs. The palette requires its own collection, symbol registry and explicit viewport target from @primeui/vue-diagram/palette.

Use the named slots explicitly. There is no default catch-all region or automatic matching of child component names. DiagramWorkspaceUI supplies workspace context to its children; independently placed workspace parts need Diagram.WorkspaceHost.

DiagramEditorUI is projection-only. It supplies no Diagram, workspace, palette or notation provider. Put it under a root. DiagramWorkspaceUI supplies its own workspace context to its Pages/Layers children; independently placed panels use DiagramWorkspaceHost instead.

There is no catch-all region. A sidebar, status part, command group or arbitrary section needs its matching named slot. Use one intended owner for each region; matching several parts does not create a tab or conditional replacement policy.

Register the collection's symbols in the registry passed to root :symbols. registerDiagramPaletteSymbols(registry, collection.snapshot) returns the owned registration disposer. Call it before disposing the owned collection and registry in onBeforeUnmount; also dispose an application-owned store and subscriptions. A root disposes its own session, not these external owners. The complete demo shows DiagramPaletteCollection, createDiagramLibraryPalette and createDiagramBasicLibrary from @primeui/vue-diagram/palette, with DiagramSymbolRegistry from @primeui/vue-diagram.

#Replace a panel and omit unused regions

The next example replaces the palette with a review-note sidebar and composes only the Name and Transform sections at the end. Hiding the sidebar preserves its mounted local note. The utilities and workspace regions are omitted.

Type a review note, hide its sidebar and reopen it. The mounted local note stays. The end panel composes Name and Transform instead of the complete inspector. Utilities and workspace status are omitted by leaving those slots empty.

DiagramInspectorUI appends default-slot content after its generic controls. For replacement content use your own end slot and chosen sections. The diagram-inspector-body class supplies their content inset and spacing; the shell owns surrounding panel surfaces and dividers. Keep one owner for each inset.

Projection into DiagramInspectorUI appends content after its generic controls. For a replacement inspector, compose your own end region with the sections you need. Wrap the reusable sections in diagram-inspector-body for the same content inset and section spacing as the supplied inspector. The editor's start/end slots own panel surfaces and dividers; the body owns the fields' surrounding space. See Sidebars and Inspector.

#Use controls without the shell

Tools, connection-path choices, command groups, zoom and aids can live directly under the root. This example places editing controls above the canvas and view controls below it. No toolbar or editor shell is required. DiagramAidsUI emits aid changes; bind those options back into both the control and root.

Try the editing controls above the canvas and view controls below it. Tools, path choices, command groups, zoom and aids can be independent descendants of the root. Bind aid changes back to both the control and root. View preferences create no model history. The overview previews nodes and offers zoom/Fit; it is not a draggable minimap.

The same approach works for independently placed Pages/Layers and Graph explorer. The overview is a scene preview with zoom/Fit buttons, not a draggable map.

The shell defaults to density="comfortable" and dir="ltr". Compact changes control/spacing tokens; direction arranges interface regions rather than mirroring world coordinates. See Theming, Locale and RTL and the UI-parts reference for exact boundaries.

See Workflow Editor for a service-review composition with a palette, workspace, inspector and application-owned note.

#Related Docs

• Architecture
• First Diagram
• API
• Sidebars
• Inspector
• Toolbar and actions
• Workflow Editor