Process model layout
The process model editor is organized into several distinct areas. Each area provides a specific set of controls for working with your diagram.
Header bar
The header bar runs across the top of the editor. It contains:
- The Edit toggle that switches between view and edit modes.
- The document title.
- The list of current collaborators.
- The Save button (creates a snapshot — see Create snapshots).
- The Publish button.
Element toolbar
The element toolbar provides dropdowns for adding BPMN elements to the canvas, grouped by type:
- A rectangle dropdown for activities (User Task, Subprocess, Transaction, Event Subprocess, Call Activity, Global Task).
- A diamond dropdown for gateways (Exclusive, Parallel, Inclusive).
- A circle dropdown for events (Start, End, Intermediate).
- A lane icon for pools and lanes.
Canvas
The canvas is the main work area where you build the diagram. You add elements here, connect them with sequence flows, and arrange the layout.
Workflow panel
The Workflow panel sits on the left side of the editor. It shows:
- The process overview.
- The start and end points of the process.
- Attachments associated with the process.
Properties panel
The Properties panel sits on the right side of the editor. When you select an element on the canvas, the panel shows that element’s properties and lets you edit them. With nothing selected, the panel shows properties for the overall process.
For task elements, you can add and edit task instructions from the Properties panel.
Context Menu
When you select a shape on the canvas, the Context Menu appears around it as a set of floating controls. The available controls depend on the shape type. For most flow elements (activities, gateways, events) it provides:
- Settings — a dropdown of options specific to the element, including Replace (swap the element for another in the same family — for example, change an Exclusive Gateway to a Parallel Gateway), activity characteristics such as the multi-instance marker, and Boundary Events where they apply.
- Set as Default Flow — mark an outgoing flow as the default path, on gateways and activities that support one.
- Unlink — detach a linked global task or call activity from the document it points to.
Connecting elements and adding the next element are handled by connection points on each element, not by the Context Menu.
Pools, lanes, and groups show their own tooling in the Context Menu instead — Lane Above, Lane Below, Split Lane, Add Phase, and the multi-instance toggle where applicable.
Connection points
You build the flow by connecting elements and adding new ones from connection points — small dots that appear on an element’s edges when you hover over it. You don’t need to select the element first.
- Connect to an existing element — drag from a connection point to another element to draw a sequence flow.
- Add the next element — click a connection point to add the default next element (usually a user task), already connected and placed in that direction. A faded preview shows what will be added before you click.
- Add a different element — hovering a connection point also reveals quick-add shortcuts for an Exclusive Gateway and an Intermediate Timer Catch Event, where those are valid for the element.
Connection points and the Context Menu are mutually exclusive: the Context Menu owns the selected element, so connection points appear on the elements you hover over, not on the one currently selected.
A few shape-specific notes:
- Text annotations, data objects, data stores, and event subprocesses are connect-only — their connection points draw a flow to an existing element but don’t add a new one. They keep their connection points even while selected.
- Exclusive Event Based Gateway and Parallel Event Based Gateway can be placed only at the process root, not inside a subprocess, transaction, or event subprocess.
- Blackbox Pools connect through a single flow control in their Context Menu rather than connection points. Process Pools don’t connect directly — you build the flow inside their lanes.
Footer toolbars
The editor has two footer toolbars, one at each bottom corner of the canvas.
Editing toolbar (bottom left)
Provides editing actions and cursor modes:
- Undo and Redo to reverse or repeat recent changes.
- Align elements to align selected elements.
- Copy / Paste to duplicate elements.
- Remove Selected Elements to delete the selection.
- Cursor modes — pointer, marquee selection, grab (pan), and space tool.
View toolbar (bottom right)
Provides view and zoom controls:
- Download SVG to export the diagram as an image.
- Zoom Out, the current zoom level, and Zoom In.
- Reset to return zoom and position to default.
- Fit To Screen to scale the diagram to fit the canvas.
- Fullscreen toggle.
- Diagram navigator (minimap) to navigate large diagrams.