Drawio Impl Bpmn

Draw.io BPMN 2.0 Implementation

Purpose

This skill enables correct generation of BPMN 2.0 (Business Process Model and Notation) process diagrams in Draw.io mxGraph XML. It enforces BPMN 2.0 shape semantics and prevents the most common AI mistakes: using generic shapes instead of BPMN-specific shapes, mixing sequence flows with message flows, and omitting mandatory pool containers for inter-organizational processes.

Critical Rules (Memorize These)

1. ALWAYS use shape=mxgraph.bpmn.shape for events and gateways -- NEVER use generic ellipse for events or rhombus for gateways. BPMN shapes carry semantic meaning through outline and symbol properties.
2. ALWAYS use dashed lines for message flows -- Message flows between pools MUST have dashed=1;endArrow=open;endFill=0;startArrow=oval;startFill=0;. NEVER use solid arrows for message flows.
3. ALWAYS use solid arrows for sequence flows -- Sequence flows within a pool MUST have endArrow=classic;html=1;. NEVER use dashed arrows for sequence flows.
4. NEVER connect elements in different pools with sequence flows -- Cross-pool communication ALWAYS uses message flows. Sequence flows are ONLY valid within a single pool.
5. ALWAYS wrap activities in a pool or lane -- Every BPMN diagram with more than one participant MUST use pool containers. NEVER place BPMN elements directly on the canvas without a pool when modelling inter-organizational processes.
6. ALWAYS use the correct gateway symbol -- Exclusive (X) uses symbol=exclusiveGw, Parallel (+) uses symbol=parallelGw, Inclusive (O) uses symbol=inclusiveGw, Event-based uses symbol=eventGw. NEVER use a blank diamond.
7. ALWAYS label gateway outgoing edges -- Every edge leaving a gateway MUST have a value attribute describing the condition (except for parallel gateways where all paths execute).
8. ALWAYS set perimeter=ellipsePerimeter on events and perimeter=rhombusPerimeter on gateways -- This ensures edges connect correctly to the shape boundary.

BPMN Element Categories

Events

Events are circles that represent something that happens during a process. They differ by position (start/intermediate/end) and type (none, message, timer, error, signal, terminate).

| Event | outline | symbol | Visual | strokeWidth | |-------|---------|--------|--------|-------------| | Start (None) | standard | general | Thin circle, empty | 1 (default) | | Start (Message) | standard | message | Thin circle, envelope icon | 1 | | Start (Timer) | standard | timer | Thin circle, clock icon | 1 | | Start (Signal) | standard | signal | Thin circle, triangle icon | 1 | | Intermediate Catch (Message) | catching | message | Double thin circle, envelope | 1 | | Intermediate Catch (Timer) | catching | timer | Double thin circle, clock | 1 | | Intermediate Catch (Signal) | catching | signal | Double thin circle, triangle | 1 | | Intermediate Throw (Message) | throwing | message | Double thin circle, filled envelope | 1 | | Intermediate Throw (Signal) | throwing | signal | Double thin circle, filled triangle | 1 | | End (None) | end | terminate | Thick circle, filled | 3 | | End (Message) | end | message | Thick circle, envelope | 3 | | End (Error) | end | error | Thick circle, lightning bolt | 3 | | End (Terminate) | end | terminate | Thick circle, filled circle | 3 |

Event style template:

shape=mxgraph.bpmn.shape;perimeter=ellipsePerimeter;outline={OUTLINE};symbol={SYMBOL};

Event dimensions: ALWAYS use 40 x 40 for events. This is the BPMN standard circle size.

Activities

Activities represent work performed in the process. BPMN uses rounded rectangles for tasks and double-bordered rounded rectangles for subprocesses.

| Activity | Style | Dimensions | |----------|-------|-----------| | Task | rounded=1;whiteSpace=wrap;html=1;arcSize=20; | 120 x 70 | | Subprocess (collapsed) | rounded=1;whiteSpace=wrap;html=1;arcSize=20;strokeWidth=2; | 120 x 70 | | Subprocess (expanded) | rounded=1;whiteSpace=wrap;html=1;arcSize=10;container=1;collapsible=0;startSize=25;strokeWidth=2; | 300 x 200 |

Task type markers: Add task type icons using additional style properties:

| Task Type | Additional Style | |-----------|-----------------| | User Task | shape=mxgraph.bpmn.task;taskMarker=user; | | Service Task | shape=mxgraph.bpmn.task;taskMarker=service; | | Script Task | shape=mxgraph.bpmn.task;taskMarker=script; | | Send Task | shape=mxgraph.bpmn.task;taskMarker=send; | | Receive Task | shape=mxgraph.bpmn.task;taskMarker=receive; | | Manual Task | shape=mxgraph.bpmn.task;taskMarker=manual; | | Business Rule Task | shape=mxgraph.bpmn.task;taskMarker=businessRule; |

Gateways

Gateways are diamond shapes that control the flow branching and merging. ALWAYS use 50 x 50 dimensions.

| Gateway | symbol | Marker | Purpose | |---------|--------|--------|---------| | Exclusive (XOR) | exclusiveGw | X inside diamond | Exactly one outgoing path based on condition | | Parallel (AND) | parallelGw | + inside diamond | ALL outgoing paths execute simultaneously | | Inclusive (OR) | inclusiveGw | O inside diamond | One or more outgoing paths based on conditions | | Event-based | eventGw | Pentagon inside diamond | Path determined by which event occurs first |

Gateway style template:

shape=mxgraph.bpmn.shape;perimeter=rhombusPerimeter;outline=standard;symbol={SYMBOL};

Pools and Lanes

Pools represent participants (organizations, departments, systems). Lanes subdivide a pool into roles or responsibilities.

Pool style:

shape=pool;startSize=30;horizontal=1;container=1;collapsible=0;swimlaneLine=1;fillColor=#f5f5f5;strokeColor=#666666;fontStyle=1;

Lane style:

swimlane;startSize=30;container=1;collapsible=0;horizontal=1;fillColor=#f5f5f5;strokeColor=#666666;fontStyle=1;

Pool and lane rules follow the same container hierarchy as drawio-impl-swimlanes. ALWAYS set container=1 and collapsible=0. ALWAYS use container-relative coordinates for children.

Sequence Flows vs Message Flows

| Flow Type | Usage | Style | |-----------|-------|-------| | Sequence Flow | Between elements in the SAME pool | endArrow=classic;html=1; | | Conditional Sequence Flow | Sequence flow with condition | endArrow=classic;html=1;startArrow=diamond;startFill=0;startSize=14; | | Default Sequence Flow | Default path from gateway | endArrow=classic;html=1; + tick marker on source end | | Message Flow | Between elements in DIFFERENT pools | endArrow=open;endFill=0;startArrow=oval;startFill=0;dashed=1;strokeColor=#666666; | | Association | Link to data objects/annotations | endArrow=none;dashed=1;strokeColor=#999999; |

Data Objects and Data Stores

| Element | Style | Dimensions | |---------|-------|-----------| | Data Object | shape=mxgraph.bpmn.data;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top; | 35 x 50 | | Data Store | shape=datastore;whiteSpace=wrap;html=1; | 60 x 60 |

Data objects and data stores connect to activities using association flows (dashed, no arrowhead).

Layout Guidelines

| Element | Spacing | Notes | |---------|---------|-------| | Events | 40 x 40 | Standard BPMN circle size | | Activities | 120 x 70 | Rounded rectangles with arcSize=20 | | Gateways | 50 x 50 | Diamond shapes | | Horizontal gap | 40-60 px | Between consecutive elements | | Vertical gap | 60-80 px | Between parallel branches | | Pool width | 700-900 px | Wide enough for all elements | | Pool height | 200-400 px | Tall enough for branches |

Complete Example: Invoice Processing with BPMN 2.0

Checklist: Before Outputting a BPMN Diagram

1. Every event uses shape=mxgraph.bpmn.shape with correct outline and symbol -- NOT generic ellipse.
2. Every gateway uses shape=mxgraph.bpmn.shape with correct symbol -- NOT generic rhombus.
3. Every event has perimeter=ellipsePerimeter and every gateway has perimeter=rhombusPerimeter.
4. Events are 40 x 40. Gateways are 50 x 50. Activities are 120 x 70.
5. Sequence flows use solid arrows (endArrow=classic). Message flows use dashed open arrows (dashed=1;endArrow=open;endFill=0;startArrow=oval;startFill=0;).
6. Cross-pool communication uses message flows ONLY -- NEVER sequence flows.
7. Every exclusive/inclusive gateway outgoing edge has a condition label.
8. All elements within a pool use container-relative coordinates.
9. Every pool and lane has container=1 and collapsible=0.
10. Both structural cells (id="0" and id="1") are present.
11. All cell IDs are unique and all edges have valid source and target.

Cross-References

• Swimlane containers: See drawio-impl-swimlanes for pool/lane container hierarchy and coordinate rules.
• XML fundamentals: See drawio-core-xml-format for file structure and structural cells.
• Style syntax: See drawio-syntax-styles for the complete style property reference.
• Connection details: See drawio-syntax-connections for edge routing and waypoints.
• Geometry: See drawio-core-geometry for coordinate system and positioning.

Reference Links

• [Complete Reference](references/methods.md)
• [Working Examples](references/examples.md)
• [Anti-Patterns](references/anti-patterns.md)

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Impertio-Studio
• Source: Impertio-Studio/Draw.io-Claude-Skill-Package
• License: MIT

Install and usage instructions live in the source repository linked above.