Diagram - Workflow Editor

Compose a service-review drawing with a palette, toolbar, workspace and inspector.

#Review and change the workflow

Loading Demo...
  1. Choose Focus review to select the review step and open its inspector. Fit workflow shows the complete drawing.
  2. Change its label, then leave the field to commit it. Change its bounds or drag the step, then use Undo to restore the edit.
  3. Open Shapes, insert a shape from the palette and name it in the inspector. In Select, drag a visible output/both-direction port to an existing step or compatible port to create a link. Connect also starts links from a step body.
  4. Open Connections, canvas aids & workspace for the connection path, duplicate/delete commands, canvas aids, pages and layers.
  5. Turn on Read only to inspect the same model with editing disabled.

The searchable step field reads the current page's saved nodes, including inserted shapes. A selected connector can be edited through the inspector even though the step field lists nodes only. Fit selected works for the current selection.

The six initial steps use native ellipses, rectangles and a decision diamond. Owner captions identify the people responsible for the work, while Ready, More detail and Resubmit label the decision and return paths. Each step has four authored, both-direction ports whose positions follow its bounds. Ports appear when hovered, selected or focused; palette shapes supply their own ports. Ordinary move, resize, rotate and port-to-port editing stay in Select. Select a link to edit its path: a plus inserts one bend and becomes that bend; subsequent drags or arrow keys move the existing bend. Escape discards an unfinished gesture, while Undo/Redo applies to completed model edits. The review-note field retains its own text editing and does not participate in model history.

Shapes and Inspector start collapsed. Selecting an item opens its inspector; the sidebar chevron closes a panel without discarding its search, selection or local note. The canvas-edge icon reopens it. At frame widths of 700px or less, open Controls for secondary commands; the step picker, zoom and history stay visible.

Use Expand workspace for more room. Escape closes the expanded workspace and returns focus to its expansion button; Tab stays within its visible controls. Framing on initial mount and entering or leaving the expanded workspace keeps a fitted selection or initial drawing at 90% zoom or higher. If fitting would shrink it further, it uses 100% zoom and centers the selected step or Review scope. The Fit commands remain available for a complete or selected overview.

#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>

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

The application composes its workflow controls around one store and root.

#UI Composition

import { DiagramEditorUI, DiagramToolsUI, DiagramZoomControlsUI, DiagramCommandGroupUI, DiagramCanvasUI, DiagramSidebarUI } from './components/primeui/diagram';
<Diagram.Root :store="store" page-id="page">
    <DiagramEditorUI>
        <template #toolbar>
            <DiagramToolsUI />
            <DiagramZoomControlsUI />
            <DiagramCommandGroupUI label="Edit history" :command-ids="['undo', 'redo']" />
        </template>
        <template #start>
            <DiagramSidebarUI title="Shapes" collapsible />
        </template>
        <template #canvas>
            <DiagramCanvasUI>
                <Diagram.Viewport label="Workflow editor" style="height: 24rem" />
            </DiagramCanvasUI>
        </template>
        <template #end>
            <DiagramSidebarUI title="Inspector" collapsible />
        </template>
    </DiagramEditorUI>
</Diagram.Root>

The toolbar composes individual copied parts in the editor's toolbar region. Add the workspace disclosure, palette and application note as shown in the complete source. All controls share one Store and mounted root.

This example puts the copied editor parts around a service-review drawing. A request is reviewed, approved or returned for more details, then handed over. The drawing is editable; it does not execute the process or track live request state.

#Compose around one owner

The host creates and disposes the Store. Diagram.Root owns the Session, selection and editing policy around it. The copied DiagramEditorUI places the supplied toolbar, workspace, palette, canvas and inspector into their matching regions. It creates no additional model or history. View controls emit aid options, which the host binds back into the root.

The workspace changes the active page and insertion layer. The host resolves its requested IDs against the current snapshot so an Undo or removal cannot leave an absent page/layer selected. The palette has its own collection and symbol registry; DiagramPaletteTarget ties insertion to the current viewport and layer.

Saved step labels use layout: 'centered-inside', so resizing keeps their text centred and clipped to the native shape. The node template adds an owner caption beneath the label, except on the decision diamond. Authored port endpoints and orthogonal routes preserve the branch and return path when steps move.

Each side uses DiagramSidebarUI; its content stays mounted while hidden. The palette composes filters, items, paging and feedback under one DiagramPaletteRoot. The inspector composes the copied label, transform, connector and arrangement sections around the root's existing selection model. Its multiline review note is ordinary component state; it does not become a node property or participate in model Undo.

#Adapt the example

Replace the initial model with your authored workflow. Keep the Store and Session as the single editing authority and let the copied commands and forms use their normal availability checks. Dispose the commit subscription, Store, palette registration, collection and registry when their owner is destroyed. This example has no persistence callback; edits and the note disappear when it is recreated.

Copy WorkflowEditorDemo.vue, WorkflowWorkspace.vue, WorkflowInspectorPanel.vue and WorkflowStatus.vue with their local editor-frame dependencies. The workspace and readout children use useDiagramContext() beneath the existing root. Copy the UI files referenced by their imports into the application. The frame handles expansion, responsive controls and framing without creating another store, session or history.

Read Editor composition, Palette, Pages and layers, Create connections and Inspector for each part in isolation. Use BPMN basics when you need its supported semantic notation, and Save and Load when the application needs persistence. The UI-parts reference lists copied imports, providers and regions.

Opening or closing a sidebar overlays the drawing without resizing or recentering it. Direct canvas selection and container resizing preserve your pan and zoom; use Fit explicitly when you want to frame the drawing again.