Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.encoreos.io/llms.txt

Use this file to discover all available pages before exploring further.

The Edit Diagram page (/platform/workflows/diagrams/:id) is a full-featured visual editor for swim lane process diagrams, supporting real-time collaborative editing with presence indicators, version history, auto-layout, BPMN export, and keyboard shortcuts.

​
Overview

The route requires pf.swim-lane-diagrams.update. It uses ReactFlowProvider and SwimLaneCanvas for the diagram canvas. The page loads the diagram via useSwimLaneDiagram with the :id parameter, and uses useSwimLaneDiagramMutation for save operations. Supporting hooks provide: useCreateDiagramVersion (version history), useDiagramPresence (real-time collaborator presence via Supabase), useDiagramBroadcast (broadcast updates), and useDiagramUndoRedo (undo/redo stack). A validation panel via validateDiagram surfaces diagram errors. The toolbar offers save as template, auto-layout, horizontal/vertical layout modes, fullscreen, and BPMN export actions.

​
Who it’s for

Requires permission pf.swim-lane-diagrams.update.

​
Before you start

  • You must hold pf.swim-lane-diagrams.update.
  • Navigate from the Diagrams list (/platform/workflows/diagrams) by clicking an existing diagram.

​
Steps

1

Open the diagram editor

Navigate to /platform/workflows/diagrams/:id. The canvas loads the saved diagram state.
2

Edit the diagram

Add, move, or remove lanes, nodes, and edges on the SwimLaneCanvas. Changes are tracked in the undo/redo stack.
3

Undo or redo changes

Use keyboard shortcuts or toolbar controls to undo or redo edits via useDiagramUndoRedo.
4

Validate the diagram

Open the validation panel to check for structural errors before saving.
5

Save the diagram

Click Save to persist the current state. Optionally, save as a template using the template action.
6

View version history

Open the version history sidebar to review or restore previous versions via useCreateDiagramVersion.
7

Export as BPMN

Use the BPMN export action to download the diagram in BPMN format.

​
Key concepts

useDiagramPresence tracks which users are currently viewing or editing the diagram and broadcasts their cursor positions or states via Supabase Realtime.
useCreateDiagramVersion saves a snapshot on each explicit save. The version history sidebar allows reviewing and restoring prior versions.
The auto-layout action applies an algorithm to reposition nodes and lanes for readability. Manual layout adjustments are preserved between saves.

Platform Foundation

Platform Foundation overview.

Governance & parity

Documentation coverage and governance.
This page documents shipped product behavior. It is not medical, legal, or billing advice. Verify against your organization’s policies and applicable regulations before using it for clinical, compliance, or billing decisions. Protected health information (PHI) shown in the product is governed by your tenant’s access controls and is never exposed in this documentation.
  • src/routes/platform.tsx
  • src/platform/workflow/pages/SwimLaneDiagramBuilderPage.tsx
  • src/platform/workflow/hooks/useSwimLaneDiagram.ts