Worked example — Mermaid flowchart with subgraph blocks.
To draw bounded contexts in Mermaid you wrap each context's nodes inside a subgraph NAME ... end block, and you connect nodes across subgraphs with arrows:
flowchart LR
subgraph Sales
S_Customer[Customer]
S_Order[Order]
end
subgraph Support
Sp_Customer[Customer]
Sp_Ticket[Ticket]
end
S_Customer -. ACL .-> Sp_Customer
Reading it:
- Two
subgraph ... end blocks — one per bounded context.
- Inside, each node has a unique id (
S_Customer) and a display label in [...].
- The
-. label .-> dashed arrow is the anti-corruption layer translating between the two definitions of Customer.
In the playground below, start from this skeleton and add a third subgraph (e.g. Billing) with at least one node, then connect it to Sales.