Canvas

The Canvas is the central workspace of the modeler, powered by React Flow. It is where you visually build and arrange your workflow.

Navigation

Panning

Click and drag on the empty canvas background to pan (scroll) around the workspace. The canvas is infinite in all directions.

Zooming

• Mouse wheel: Scroll up to zoom in, scroll down to zoom out.
• Zoom controls: Use the + and - buttons in the toolbar.
• Fit to screen: Click the fit-to-screen button in the toolbar to automatically zoom and pan so that all nodes are visible.

Vertical and horizontal scrolling

• Ctrl + Mouse wheel: Pan vertically.
• Ctrl + Alt + Mouse wheel: Pan horizontally.

Selecting elements

Single selection

Click on a node or edge to select it. The Property Panel will open automatically on the right.

Multi-selection

• Shift + Click: Add or remove individual elements from the selection.
• Shift + Drag: Draw a selection rectangle to select multiple elements at once.

When multiple elements are selected, the Property Panel shows a Multi-Selection Panel with bulk operations (lock/unlock all, delete all).

Deselecting

Click on an empty area of the canvas to deselect all elements.

Adding elements

There are two ways to add elements to the canvas:

Quick-add buttons

Hover over a node to reveal a + button. Clicking it opens a popup where you can choose a successor component. The new node is automatically positioned and connected.

Similarly, hover over an edge to reveal a + button for adding a condition.

Event button

Click the + Event button in the toolbar to add a new event (start) node.

Connecting elements

To create an edge (connection) between two nodes:

1. Hover over the source node to reveal its output port (a small circle on the bottom or right of the node).
2. Click the output port and drag to the input port of the target node.
3. Release to create the connection.

Node types

The canvas displays four visual node types:

Node Type	Shape	Description
Event (start)	Rounded	Triggers that start a workflow (e.g., "Entity insert").
Element (action)	Rectangle	Actions that perform work (e.g., "Send email").
Gateway	Diamond	Decision points that control flow branching.
Subprocess	Double-bordered rectangle	References to other workflow models.

Edge types

Edges can be:

• Simple connections: A direct link from one node to another.
• Conditional edges: Edges with a condition attached, shown with a label.
• Annotated edges: Edges with an annotation note.

Snap to grid

All nodes snap to a 20px grid for consistent alignment. This keeps workflows looking clean and professional.

Smart node positioning

When you add a node using quick-add, the modeler automatically finds a free position that:

• Does not overlap with existing nodes.
• Stays within the boundaries of the current workflow flow.
• Shifts neighboring flows if needed to make room.

This means you rarely need to manually reposition nodes.