BA Prince the B.A. Subscribe

Home / Mermaid for Business Analysts

BPMN-Style Process Map in Mermaid

BPMN-Style Process Map in Mermaid

Watch on YouTube Subscribe

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. Stakeholders who know BPMN expect circles for events, rounded boxes for tasks and diamonds for gateways. Mermaid can draw that look from plain text. Here's what we'll build, a leave request process.
Diagram type. Clear the editor and type flowchart TD, for top down. The process will flow from top to bottom.
```
flowchart TD
```

Shapes

Start event and task. Double round brackets make a circle. That's the start event, request sent. Single round brackets make a box with rounded corners. That's a BPMN task, check balance. There's the circle, then the rounded task. Already it looks more like BPMN than a plain flowchart.
```
    S((Request sent)) --> A(Check balance)
```
Gateway. Curly brackets make the diamond, our gateway. Ask a short question, enough days? Then label both exits between pipe characters. Yes approves the leave. No rejects the request.
```
    A --> G{Enough days?}
    G -->|Yes| B(Approve leave)
    G -->|No| C(Reject request)
```
End events. Every path needs an end. End events are circles too, so use double round brackets again, booked and rejected. Soon we make their border thick. A double ring means something else in BPMN. One start, three tasks, one gateway with labelled exits, and two end events. The shapes are right. Now let's colour them.
```
    B --> E1((Booked))
    C --> E2((Rejected))
```

Classes

classDef. Type class def, a name, then the style. Fill sets the colour, written as a hex code. Stroke width sets the border. One pixel keeps the start event thin. The class line puts the style on shape S. In BPMN the end event has a thick border, so give it four pixels and a light red fill. Separate shape I Ds with a comma to style both end events at once. Now the start is green and thin, and both ends are red and thick. Anyone can see where the process begins and stops.
```
    classDef start fill:#d5f5d5,stroke-width:1px
    class S start
```
```
    classDef done fill:#ffd6d6,stroke-width:4px
    class E1,E2 done
```
Three colons. Add a blue class for tasks and a yellow one for gateways. Class A, B, C styles all three tasks. For one shape there's a shortcut. The ID, three colons, then the class name. And here's the finished map. Every kind of shape has its own colour, so the legend is the shape itself.
```
    classDef task fill:#e3efff
    classDef gate fill:#fff3c4
    class A,B,C task
    G:::gate
```
Gateway. The yellow diamond is the decision. Both exits are labelled, so nobody guesses which way is yes.
End events. And this thick circle is an end event. A good map has one start and an end on every path.

Recap

The rules. So, double round brackets for events, single round brackets for tasks, curly brackets for gateways. A thin border starts, a thick border ends. Colour each kind with class def.

More in Mermaid for Business Analysts

Mermaid Flowchart Tutorial: Your First Process Map

Mermaid Sequence Diagram for a Login Flow

Mermaid ER Diagram: Customers, Orders and Products

Mermaid State Diagram: Order Status Lifecycle