Diagram - Copied UI parts

Use these live previews to explore the editor shell, saved-label controls and output controls. Each preview includes its runnable source. The reference tables below describe how to place the same parts in your application.

#Usage

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

<Diagram.Root :store="store" page-id="page">
    <Diagram.Viewport label="Review workflow" 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

PrimeOne and Tailwind parts are editable application source, separate from runtime components. Both presets retain the same public component names. PrimeOne uses PrimeVue controls; Tailwind uses its own controls without a PrimeVue dependency.

This excerpt assumes the setup copy directory, an @/ alias for src/, and an existing model:

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

<Diagram.Root :value="model" page-id="page">
    <DiagramEditorUI>
        <template #toolbar><DiagramToolbarUI /></template>
        <template #canvas>
            <DiagramCanvasUI>
                <Diagram.Viewport label="Workflow editor" auto-fit style="height: 32rem" />
            </DiagramCanvasUI>
        </template>
        <template #end><DiagramInspectorUI /></template>
    </DiagramEditorUI>
</Diagram.Root>

DiagramEditorUI places toolbar, utilities, status, start, canvas, and end slots. Its density defaults to 'comfortable'; dir defaults to 'ltr'. It does not create a root, store, or viewport. DiagramCanvasUI wraps the viewport and optional hint.

Copied UI is application source. Runtime parts provide the shared model/session and authoring models; copied parts present them. The tables below describe both PrimeOne and Tailwind. Import paths beginning @ui/diagram mean your configured local copied-source path, not a published runtime package.

#Try the copied editor

Insert a shape from the palette, select it, then change its name or position in the inspector. Undo restores the edit. The toolbar, palette, canvas, inspector and page/layer controls all share one Diagram root and model history.

This preview uses the PrimeOne copied parts. The Tailwind preset exposes the same parts and bindings with HTML-based controls. See Editor composition to replace a panel or omit regions, and Theming to adapt their appearance.

#Imports and required context

The Diagram namespace and flat parts export the base runtime root, viewport, node/connector rendering, node definitions, field/port adapters, commands and overlays. Palette, layout, output and semantic notation parts use their optional public entries. Diagram.WorkspaceHost is a separate part in the base runtime.

The local base barrel exports the copied widgets below, including palette, workspace, inspector sections and persistence controls. Output, layout, swimlane and notation widgets use separate local entries.

PrimeOne imports PrimeVue and @primeicons/vue; Tailwind uses themed HTML and its local select helper. Both need the shared Diagram structure/theme CSS. Pass an empty hint to DiagramCanvasUI to omit its caption when guidance already appears outside the drawing.

#Base copied families

These components come from the local base barrel. Root services must be available above consumers.

#Independently placed controls

The complete toolbar, view controls, palette and persistence panel compose individual parts from the same local base entry. Use them independently to choose placement without copying command or persistence logic.

DiagramWorkspaceUI creates its workspace host from activeLayerId and emits pageChange and layerChange. The application adopts the selected page/layer. For independently placed page/layer controls, supply one Diagram.WorkspaceHost above them.

DiagramPersistenceUI creates its host from store, controller, loader, saver, and optional read-only/dirty inputs. The application owns the controller. Split persistence controls belong under one Diagram.PersistenceHost.

DiagramPaletteUI takes collection, registry, and a placement target and creates its palette root. Split filters, items, pager, and feedback belong under a shared DiagramPaletteRoot from /palette. A destination target does not create workspace state. See Palette.

Individual widgets use their host’s surrounding panel spacing. Fixture switches, reset buttons and approval simulations belong to the example or application; they are not copied product parts.

#Projection and readable state

Workspace/Pages/Layers and Explorer keep management dialogs, query/paging and drafts in their copied part and shared model. They do not expose universal field-replacement slots. PrimeOne uses PrimeVue Dialog; Tailwind uses native dialogs. Dismissal returns focus to the invoking Manage button. Saved actions still use workspace authority and Undo history.

Script-setup locals are implementation details, not exposed instance members. Custom children read the documented service accessors and invoke their bound actions. Keep feedback, pending reconciliation and command results separate from saved node data.

#Optional copied families

Paths are local examples, not package imports. Keep supporting helper files when extracting a component. Optional semantic inspectors need their matching notation provider and store module, independently of their visual symbols.

DiagramLayoutSettingsUI's optional pinId names a saved pin target. Its directions accept { label, value: DiagramLayoutDirection } choices; scopes accept { label, value: string }. Bind optionsChange back to the options owner. With delegateRun=true, Run emits runRequested; otherwise it calls the supplied layout handle's run(). Scope and Run disabled flags are independent. Run also disables while running; Cancel calls that handle's cancel().

DiagramSwimlanePropertiesUI owns no pool. The host binds lane choices, selected lane, draft size, min/max and current Apply availability/reason. On applySize, execute the public lane-update command. Both presets emit sizeChange after their numeric input accepts a finite in-range value; keep the draft reconciled with saved size after canvas edits and history. Lane search is available in both presets. This form does not bypass swimlane ownership or permissions.

Notation forms retain typed fields, drafts, supported-operation checks and their semantic root's feedback. Bind a supported saved ID explicitly. Vue normalizes omitted/null entityId to null: BPMN can resolve the current selected entity and also offers page catalogs; the other forms require an explicit target. Null is not a universal current-selection form. Semantic roots default showDefaultStatus=true; set it false only when your composition presents the status/warnings itself. Use the public inspector hosts with the copied sections for replacement forms. The matching optional runtime entry exports the semantic root and inspector host.

#Compose notation sections

The complete Diagram{Notation}InspectorUI remains available and supplies its inspector host. To choose sections independently, mount the matching runtime inspector host under its notation root, then compose the copied sections and status below it.

Bind supported record IDs explicitly for custom inspectors. The semantic store module validates edits; a visual symbol registry does not install notation semantics. Generic selection forms cannot infer domain fields. Keep status and completeness warnings visible when replacing default presentation.

#Optional import panels

BPMN XML review/import/export controls live in the local bpmn-xml entry and use @primeui/vue-diagram/bpmn-xml. The application supplies the store/session and owns any approval workflow. Parse into a detached preview, inspect diagnostics, then explicitly accept or reject the import. A preview alone does not mutate the saved graph.

The matching runtime transport owns operation state and cancellation. Keep copied controls under that authority rather than constructing another editable graph. See BPMN XML.

#Inherited model state and actions

All snapshots are readonly. Read refs with .value in setup and destructure top-level refs for template unwrapping. Use flat setter actions instead of assigning to model refs. Local UI named models do not make the root’s value a two-way binding. Pending/rejected edits retain canonical saved state.

The following inventories name the public accessor members available to custom children. State refs use .value in setup; choice arrays and other plain values are read directly. Callable members keep parentheses. Use the existing setters for presentation choices and the returned canonical results for saved edits.

#Tailwind select and helpers

Tailwind’s copied DiagramSelectUI accepts options, value, label, optional disabled and searchable, and emits valueChange. It owns accessible keyboard/typeahead, popover placement and dismissal. Keep the select and supporting files referenced by extracted controls. PrimeOne uses PrimeVue controls with their normal dependency setup.

DiagramSelectUI is a direct Tailwind helper at select/DiagramSelectUI.vue; the Vue base barrel does not export it. Import that local file directly. Required label, value and options: readonly { label, value, disabled? }[] describe the control; disabled=false and searchable=false. Set searchable=true for its filter input. Open/query/active state is internal setup state. The helper uses Vue useId() for list IDs, so it needs no Diagram root or ID provider. Keep its keyboard/typeahead, list focus, Escape and outside dismissal behavior when extracting it. PrimeOne's select helper wraps PrimeVue instead.

#Exact member contracts

Use the Vue API for runtime props, emits, slots, handles, context keys and public service types. The copied .vue file declares its own props, named models and slots. Read those declarations when replacing a widget; internal setup refs are not a public component handle.

The compound namespace and flat runtime parts share context identity. Optional components come from their capability entry rather than being added to Diagram.*. The Imports page maps those entries.

#Compose output and saved-label controls

Import saved-label controls from the local base entry and output controls from the local output entry. Saved-label controls share the root’s selection inspector. Output controls share an output host and its current root/source.

DiagramOutputUI is the complete local starter and creates its own output host. For independent placement, put the following local parts under one DiagramOutputHost from @primeui/vue-diagram/export.

The host accepts filename, baseOptions, and optional source. Its accessor exposes readonly output snapshots and actions. Preserve visible accessible status when replacing a supplied part. A rooted host selects its unique directly owned viewport unless an explicit source is supplied.

Output starts with format SVG, page scope, scale 1, unset background, Follow app color scheme and A4 portrait. format supports SVG/PNG/JPEG/Print and scope supports page/selection/all; all pages is for SVG/print, not one raster download. State is readonly through useDiagramOutput(); use setFormat, setScope, setScale, setBackground, setColorScheme, setPaper and setOrientation. colorScheme initializes from and follows later baseOptions.colorScheme updates/removal. Follow app removes the effective key, including an earlier base value. Canvas default preserves an explicit base background or uses the themed canvas; a user background overrides it. Color-scheme changes invalidate prepared output. Creation/preparation is separate from SVG download and the browser print action. Preserve diagnostics and cancellation. Browser printing supplies no direct PDF-file engine.

#Try the label controls

DiagramLabelListUI selects an existing saved label. DiagramLabelPropertiesUI edits its text, alignment, rotation, and node-local or connector-path placement. They share the selection inspector and do not create new labels.

Select the second label on a shape, edit its text, and commit it. The node title remains separate. Selecting a connector label exposes path placement. Undo reverses an accepted change.

The selection accessor exposes readonly labelOwner, labelOptions, selectedLabel, chosenLabelId and labelBusy, with selectLabel(id) and canSelectedLabel(). Custom fields call setSelectedLabelProperty(ownerId, labelId, property, value): it returns the canonical string/number, or null for a stale target. Pending, rejected or unavailable edits return the prior canonical value. Reconcile the field from that result; do not assign to saved records or readonly refs. Use public content actions for additional label creation/removal. See Inspector composition and Output composition.

#Try the output controls

Select a node, choose selection output, and create SVG. Print has separate preparation and browser print actions. Vue export captures eligible mounted content and rejects required offscreen framework content.

#Runtime slots and contexts

Public accessors expose readonly snapshots and bound actions. In setup, read refs with .value; templates unwrap top-level refs. Use the documented flat setter actions to change presentation choices. Do not assign to readonly snapshot refs or reach into private component state.

The runtime still owns graph geometry, policy checks, focus, gestures, and transaction reconciliation. Slots and contexts describes the host-prop getters and context scopes for custom content. API lists the public root and viewport contracts.

Root showDefaultDiagnostics changes default diagnostics presentation independently of licensing. A custom diagnostics slot retains one root-owned alert. Menu and tooltip defaultPresentation changes chrome while the runtime retains placement, dismissal, focus and ARIA ownership.

#Related Docs

• Architecture
• Imports
• API