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 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.

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

Gateways

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

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

Data Objects and Data Stores

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

Layout Guidelines

Complete Example: Invoice Processing with BPMN 2.0

<mxGraphModel>
  <root>
    <mxCell id="0" />
    <mxCell id="1" parent="0" />

    <!-- Pool: Finance Department -->
    <mxCell id="pool1" value="Finance Department" style="shape=pool;startSize=30;horizontal=1;container=1;collapsible=0;swimlaneLine=1;fillColor=#f5f5f5;strokeColor=#666666;fontStyle=1;" vertex="1" parent="1">
      <mxGeometry x="40" y="40" width="820" height="250" as="geometry" />
    </mxCell>

    <!-- Start Event -->
    <mxCell id="start" value="" style="shape=mxgraph.bpmn.shape;perimeter=ellipsePerimeter;outline=standard;symbol=general;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="pool1">
      <mxGeometry x="30" y="105" width="40" height="40" as="geometry" />
    </mxCell>

    <!-- Task: Receive Invoice -->
    <mxCell id="task1" value="Receive&#xa;Invoice" style="rounded=1;whiteSpace=wrap;html=1;arcSize=20;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="pool1">
      <mxGeometry x="110" y="90" width="120" height="70" as="geometry" />
    </mxCell>

    <!-- Exclusive Gateway: Amount Check -->
    <mxCell id="gw1" value="" style="shape=mxgraph.bpmn.shape;perimeter=rhombusPerimeter;outline=standard;symbol=exclusiveGw;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="pool1">
      <mxGeometry x="275" y="100" width="50" height="50" as="geometry" />
    </mxCell>

    <!-- Task: Auto-Approve -->
    <mxCell id="task2" value="Auto-Approve" style="rounded=1;whiteSpace=wrap;html=1;arcSize=20;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="pool1">
      <mxGeometry x="380" y="30" width="120" height="50" as="geometry" />
    </mxCell>

    <!-- Task: Manual Review -->
    <mxCell id="task3" value="Manual Review" style="rounded=1;whiteSpace=wrap;html=1;arcSize=20;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="pool1">
      <mxGeometry x="380" y="160" width="120" height="50" as="geometry" />
    </mxCell>

    <!-- Parallel Gateway: Merge -->
    <mxCell id="gw2" value="" style="shape=mxgraph.bpmn.shape;perimeter=rhombusPerimeter;outline=standard;symbol=parallelGw;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="pool1">
      <mxGeometry x="545" y="100" width="50" height="50" as="geometry" />
    </mxCell>

    <!-- Task: Process Payment -->
    <mxCell id="task4" value="Process&#xa;Payment" style="rounded=1;whiteSpace=wrap;html=1;arcSize=20;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="pool1">
      <mxGeometry x="640" y="90" width="120" height="70" as="geometry" />
    </mxCell>

    <!-- End Event -->
    <mxCell id="end" value="" style="shape=mxgraph.bpmn.shape;perimeter=ellipsePerimeter;outline=end;symbol=terminate;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="pool1">
      <mxGeometry x="770" y="105" width="40" height="40" as="geometry" />
    </mxCell>

    <!-- Sequence Flows -->
    <mxCell id="f1" style="endArrow=classic;html=1;" edge="1" parent="pool1" source="start" target="task1">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="f2" style="endArrow=classic;html=1;" edge="1" parent="pool1" source="task1" target="gw1">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="f3" value="&lt;= $1000" style="endArrow=classic;html=1;" edge="1" parent="pool1" source="gw1" target="task2">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="f4" value="&gt; $1000" style="endArrow=classic;html=1;" edge="1" parent="pool1" source="gw1" target="task3">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="f5" style="endArrow=classic;html=1;" edge="1" parent="pool1" source="task2" target="gw2">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="f6" style="endArrow=classic;html=1;" edge="1" parent="pool1" source="task3" target="gw2">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="f7" style="endArrow=classic;html=1;" edge="1" parent="pool1" source="gw2" target="task4">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="f8" style="endArrow=classic;html=1;" edge="1" parent="pool1" source="task4" target="end">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
  </root>
</mxGraphModel>

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
• Working Examples
• Anti-Patterns