Diagram - Sidebars and independent panels

#Usage

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

<Diagram.Root :store="store" page-id="page">
    <Diagram.Viewport label="Workflow editor" style="height: 24rem" />
</Diagram.Root>

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

#UI Composition

Use DiagramSidebarUI for a titled panel with heading actions and optional collapse. Put it in the editor's start or end slot. A standalone sidebar needs application-owned placement and sizing. This fragment assumes the store from First Diagram.

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

const collapsed = shallowRef(false);
const note = shallowRef('');

<Diagram.Root :store="store" page-id="page">
    <DiagramEditorUI>
        <template #start>
            <DiagramSidebarUI title="Review notes" collapsible v-model:collapsed="collapsed">
                <template #actions><button type="button" @click="note = ''">Clear note</button></template>
                <label>Local note <textarea v-model="note" /></label>
            </DiagramSidebarUI>
        </template>
        <template #canvas>
            <DiagramCanvasUI><Diagram.Viewport label="Workflow" style="height: 24rem" /></DiagramCanvasUI>
        </template>
    </DiagramEditorUI>
</Diagram.Root>

Place a replacement panel in the editor’s start or end named slot. The shell has no catch-all projection region.

A sidebar gives your panel a title, an actions region and optional collapse. It owns that layout state; the content inside still uses its original Diagram model. Use it for a palette, review notes or a chosen inspector composition.

#Replace the start panel

Type a local note, collapse the panel with its chevron, then reopen it from the canvas edge. Collapsible panels overlay the canvas at every width, so opening or closing them preserves the drawing area and camera. Only the icon remains when collapsed. Non-collapsible panels retain the docked responsive layout. Both panels in this example can collapse. The Clear review note icon is projected into the heading's actions region.

Type a note, collapse the panel and reopen it from the canvas edge. Collapsible panels overlay the canvas at every width, preserving its area and camera. Non-collapsible panels use the docked responsive layout. Start/end placement follows interface direction.

title is required; collapsible defaults false. collapsed is a boolean named model, initially false. Collapse hides content with hidden, retaining its components, local state and subscriptions. Use v-if when you intend to unmount that content and release resources instead. The actions slot goes in the header; default-slot content goes in the body.

The toggle has a name, native title, aria-expanded and aria-controls. Enter or Space toggles it. It stays mounted and retains focus. If the host collapses a panel while one of its fields/actions has focus, focus returns to the toggle. Open headers stay visible as their bodies scroll. Keep canvas overlays clear of the collapsed controls at the logical corners.

DiagramSidebarUI comes from the copied base entry. title is required; collapsible defaults false and collapsed is a two-way model, initially false. Bind [(collapsed)] when the host also needs that local state. Collapse hides content with hidden; it does not destroy components or cancel their owned work. Use a structural condition if you intend to unmount the panel instead.

Collapsed controls sit at the logical start/end corners of the canvas, including in RTL and at narrower widths. The shared canvas hint reserves space for them. Position your own canvas overlays clear of these corners. Open panels keep their header visible while their body scrolls.

#Place shared parts independently

The shell is optional. Use these compositions for different jobs:

Moving a toolbar or inspector outside its root loses its context. Moving Pages outside workspace context loses its authority. Hiding a sidebar is not a store-disposal policy; resources remain active until their owner ends. Keep required application actions reachable when their panel is collapsed.

Keep each part within its required context. Moving Pages outside WorkspaceUI without supplying a WorkspaceHost loses its authority. Moving a toolbar or inspector outside the root loses the shared Diagram context.

The copied shell uses logical start/end placement and responsive panel sizing. A hidden sidebar retains subscriptions until actual destruction; hiding a panel is not a store-disposal policy. See Editor composition and Locale and RTL.

#Related Docs

• Architecture
• First Diagram
• API
• Editor composition
• Pages and layers
• Graph explorer
• Locale and RTL