BPMN-Style Process Map in Mermaid
Give a Mermaid flowchart the BPMN look: circles for start and end events, rounded tasks, a diamond gateway, and classDef colours. A leave request process, built in the free Mermaid live editor.
Step by step
The BPMN look
- BPMN-style map. People who know BPMN expect circles for events, rounded boxes for tasks and diamonds for gateways. Mermaid can draw that look from plain text. The example is a leave request process.
- Diagram type. Clear the editor and type flowchart TD. TD means top down, so the process flows from top to bottom.
flowchart TD
Shapes
- Start event and task. Double round brackets make a circle, so S((Request sent)) is the start event. Single round brackets make a box with rounded corners, so A(Check balance) is a BPMN task. The arrow --> joins them. Render it and you get a circle, then the rounded task. It already looks more like BPMN than a plain flowchart.
S((Request sent)) --> A(Check balance) - Gateway. Curly brackets make a diamond, the gateway: G{Enough days?}. Put each exit's label between pipe characters. |Yes| leads to Approve leave and |No| leads to Reject request.
A --> G{Enough days?} G -->|Yes| B(Approve leave) G -->|No| C(Reject request) - End events. End events are circles too, so use double round brackets again: E1((Booked)) and E2((Rejected)). Don't use triple brackets. They draw a double ring, which means a different kind of event in BPMN. The map now has 1 start, 3 tasks, 1 gateway with labelled exits and 2 end events. The shapes are right, so the next job is colour.
B --> E1((Booked)) C --> E2((Rejected))
Classes
- classDef. Type classDef, a class name, then the style. fill sets the colour as a hex code, and stroke-width sets the border. 1px keeps the start event thin. The line class S start puts this style on shape S. In BPMN an end event has a thick border, so the done class uses 4px and a light red fill. Separate shape IDs with a comma, as in class E1,E2 done, to style both end events at once. Render again. The start is green with a thin border, and both ends are red with a thick border, so anyone can see where the process begins and stops.
classDef start fill:#d5f5d5,stroke-width:1px class S startclassDef done fill:#ffd6d6,stroke-width:4px class E1,E2 done - Three colons. Add a blue task class and a yellow gate class. class A,B,C task styles all 3 tasks. For a single shape there is a shortcut: the ID, 3 colons, then the class name, as in G:::gate. That's the finished map. Each kind of shape has its own colour, so the shapes work as their own legend.
classDef task fill:#e3efff classDef gate fill:#fff3c4 class A,B,C task G:::gate - Gateway. In the finished map the yellow diamond is the decision. Both exits are labelled, so nobody has to guess which way means yes.
- End events. The thick red circle is an end event. A good map has 1 start and an end on every path.
Recap
- The rules. The rules: double round brackets for events, single round brackets for tasks, curly brackets for gateways. A thin border marks the start and a thick border marks the end. Colour each kind with classDef.
Common mistakes
- Using triple brackets for end events. Booked in triple round brackets draws a double ring, which BPMN readers take as a different kind of event. Use double round brackets and give the end class a thick border, like stroke-width:4px.
- Styling by the label instead of the ID. The class line needs the shape's ID, so write class S start, not class Request sent start. The same goes for G:::gate.
- Leaving gateway exits unlabelled. Without labels, readers have to guess which arrow means yes. Put the answer between pipes on each arrow, as in G -->|Yes| B(Approve leave).
- Typing end in lowercase as a node. The lowercase word end can break a Mermaid flowchart. Write End, or pick another word, like done, which this lesson uses as the class name for end events.
When a business analyst uses this
In a process discovery workshop, a business analyst can type an approval process like this leave request while stakeholders talk, and the map redraws as each step is agreed. Because the map is plain text, it can sit next to the requirements, and changes are easy to compare before sign-off.
Questions people ask
Can Mermaid make BPMN diagrams?
This lesson uses a Mermaid flowchart styled to look like BPMN, with circles, rounded tasks and a diamond. It is not a real BPMN model file, so other BPMN tools can't import it as one.
How do you make a circle in a Mermaid flowchart?
Put the text in double round brackets, like S((Request sent)). Single round brackets give a box with rounded corners, and curly brackets give a diamond.
How do you change the colour of a node in Mermaid?
Define a style with classDef, like classDef gate fill:#fff3c4, then apply it with class G gate or the shortcut G:::gate. To style several nodes at once, separate their IDs with commas, as in class A,B,C task.
