Use Case Diagram in Mermaid (The Simple Workaround)
Mermaid has no use case diagram, but a flowchart can stand in for one. Draw actors as boxes outside a system boundary, use cases as rounded shapes inside it, plain lines for who does what and a dotted include arrow, with an online shop example in the free Mermaid live editor.
Step by step
No use case type
- Use cases in Mermaid. Mermaid has no use case diagram type, but a flowchart can stand in for one and still show who does what with a system. The example here is an online shop.
- Diagram type. Clear the editor and type flowchart TB. TB means top to bottom, so the actors sit at the top and the system sits below them.
flowchart TB
Actors
- Actors. Mermaid has no stick figure, so a plain box with a role name stands in for each actor: C[Customer] and A[Shop admin]. Use roles, not people's names. The diagram now shows 2 boxes, one for each role.
C[Customer] A[Shop admin]
The system
- System boundary. A subgraph makes the system boundary: subgraph S[Online shop]. Inside it, square brackets inside round ones, like U1([Place order]), make a rounded shape for each use case. Add U1 Place order and U2 Make payment. Add U3([Update stock]), then type end on its own line. Until you type end, the subgraph is still open and the drawing doesn't update. You now have 3 use cases inside one box labelled Online shop. Name each one with a verb and a noun, as a goal the user wants to reach.
subgraph S[Online shop] U1([Place order]) U2([Make payment])U3([Update stock]) end
Who does what
- Associations. Now join each actor to its use case. Three dashes make a plain line with no arrowhead, like a UML association: C --- U1 and A --- U3. The Customer is now joined to Place order, and the Shop admin to Update stock. Both actors stay outside the box.
C --- U1 A --- U3
Include
- Include. Placing an order always includes making the payment. -.-> makes a dotted arrow. Point it from the base use case to the helper and label it «include»: U1 -.->|«include»| U2. The dotted arrow runs down from Place order to Make payment. No actor is joined to Make payment directly.
U1 -.->|«include»| U2
Read it
- Inside and outside. Everything inside the Online shop box is what the team builds. The actors stay outside it, because they are not part of the system. To add a new goal, add one line inside the subgraph, before end, with a new ID, like U4([Track order]). Mermaid makes room for it.
Recap
- The rules. The rules: boxes for actors, rounded shapes for use cases and a subgraph for the system boundary. Join actors to use cases with plain --- lines, and draw include as a dotted arrow labelled «include» that points to the helper use case.
Common mistakes
- Forgetting end after the subgraph. Every subgraph must close with end on its own line. Until it does, the code is incomplete and the diagram doesn't update.
- Reusing an ID for a new use case. A line that reuses an ID that already exists, like U3([Track order]), does not add a new shape. It renames the existing Update stock shape instead. Give each new use case its own ID, like U4.
- Using --> for actor lines. --> draws an arrowhead, which reads like a flow from one step to the next. A UML association is a plain line, so use --- between an actor and a use case.
- Pointing the include arrow the wrong way. The include arrow goes from the base use case to the one it includes. Write U1 -.->|«include»| U2, not an arrow from Make payment back to Place order.
When a business analyst uses this
In a scoping workshop, a business analyst can type this code live while stakeholders name the roles and their goals. The Online shop box then shows what is in scope and who sits outside it. The code can go into a Markdown page that renders Mermaid, such as on GitHub, for review before sign-off.
Questions people ask
Does Mermaid have a use case diagram?
Not as its own diagram type. A flowchart works as a stand-in, with boxes for actors, rounded shapes for use cases and a subgraph for the system boundary.
How do you show an include relationship in a Mermaid use case diagram?
Use a dotted arrow with a label that points from the base use case to the included one, like U1 -.->|«include»| U2.
Can I draw a use case diagram in the Mermaid live editor online?
Yes. Paste the flowchart code into the free Mermaid live editor, and it draws the diagram as you type.
