BPMN 2.0 Shapes

Available BPMN Shapes (15)

Events

Gateways

Activities

Artifacts & Swimlanes

Event Type Icons (11 types)

Events can be further classified by the icon displayed inside the circle. Select an event shape and use the Event Type dropdown in the property panel.

Non-Interrupting Events

Start and Intermediate events support a Non-Interrupting mode (toggle in property panel). When enabled, the event border becomes dashed, indicating the event doesn't stop the enclosing activity.

Common use: boundary events on sub-processes that trigger parallel paths without interrupting the main flow.

Task Type Markers (8 types)

Tasks display a small icon in the upper-left corner to indicate how the work is performed. Select a task and use the Task Type dropdown.

Loop/Multi-Instance Markers (5 types)

Activities can display a bottom-center marker to indicate repetition or parallel execution. Select an activity and use the Loop / Multi-Instance dropdown.

Icon Customization

All BPMN markers and icons can be fine-tuned via the property panel:

Pool Lanes

Pools support up to 6 horizontal lanes via the Lane Count slider in the property panel. Each lane represents a role or department within a participant. The left panel displays the pool label (rotated text).

Sequence Flows

BPMN uses different connection types to represent various relationships between elements. Use arrows and connectors with different styles:

Common BPMN Patterns

Simple Sequential Process

(Start) --> [Task A] --> [Task B] --> [Task C] --> (End)

Exclusive Decision

                      --> [Approve] -->
(Start) --> <XOR> --+                    +--> (End)
                      --> [Reject]  -->

Parallel Split and Join

                      --> [Task A] -->
(Start) --> <AND> --+                    +-- <AND> --> (End)
                      --> [Task B] -->

Error Boundary Event

(Start) --> [ Service Task ] --> (End)
                  |
            (Error Event) --> [Handle Error] --> (Error End)

Timer-based Escalation

(Start) --> [ Review Task ] --> (End)
                  |
            (Timer, non-interrupting) --> [Send Reminder]

Best Practices

• Name activities with verb-noun - "Review Order", "Send Invoice"
• Label all gateway branches - Indicate the condition for each path
• Use pools and lanes - Clearly separate responsibilities by role
• Match gateway pairs - Every split gateway should have a corresponding join
• Keep processes on one level - Use sub-processes to hide complexity
• Flow left to right - Maintain consistent direction for readability
• Use event-based gateways - When routing depends on external events, not data
• Group related elements - Use the Group shape to visually organize related tasks

Quick Access

Scripting (API)

Every BPMN shape can be created from the browser console (or a script) via the global window.Yappy object. Use the dedicated createBpmnShape helper (it applies a sensible default size per shape) or the generic createElement.

// Build a tiny process: Start -> Task -> End
const start = Yappy.createBpmnShape('bpmnStartEvent', 100, 200);
const task  = Yappy.createBpmnShape('bpmnTask', 200, 190, 120, 80, { containerText: 'Review Order' });
const end   = Yappy.createBpmnShape('bpmnEndEvent', 380, 200);

// Connect them with sequence-flow arrows
Yappy.createArrow(150, 225, 200, 230);
Yappy.createArrow(320, 230, 380, 225);

Shape type strings: bpmnStartEvent, bpmnEndEvent, bpmnIntermediateEvent, bpmnExclusiveGateway, bpmnParallelGateway, bpmnInclusiveGateway, bpmnEventGateway, bpmnTask, bpmnSubProcess, bpmnCallActivity, bpmnDataObject, bpmnDataStore, bpmnAnnotation, bpmnGroup, bpmnPool.

Setting event / task / loop markers

The property-panel dropdowns map to element attributes you can set with updateElement:

// A timer intermediate event + a user task with a parallel multi-instance marker
const timer = Yappy.createBpmnShape('bpmnIntermediateEvent', 200, 300);
Yappy.updateElement(timer, { bpmnEventType: 'timer' });

const t = Yappy.createBpmnShape('bpmnTask', 300, 290, 120, 80);
Yappy.updateElement(t, { bpmnTaskType: 'user', bpmnLoopType: 'parallel' });