Skip to content
Mernyx
Open menu

Mermaid Use Case Diagram Cheat Sheet

Actors, use cases, and the system that owns them.

Every picture on this page was drawn byMernyx, the native Mermaid editor for macOS. Not by a browser running Mermaid.js — the same renderer the app uses for its canvas.

Actors and use cases

An actor is a name, a use case is a name in parentheses. An arrow says the actor takes part.

usecase-beta
  actor Customer
  actor Support
  Customer --> Checkout
  Support --> Track
Two actors, Customer and Support, pointing at two use cases, Checkout and Track.Expand diagram

The system boundary

Everything between systemBoundary and end belongs to the system. The use cases outside it do not.

usecase-beta
  actor Customer
  systemBoundary Storefront
    Browse("Browse catalogue")
    Checkout("Checkout")
  end
  Customer --> Browse
  Customer --> Checkout
A Customer actor pointing at a box called Storefront that holds Browse catalogue and Checkout.Expand diagram

Include relations

A dotted arrow with a word after the colon says one use case uses another.

usecase-beta
  actor Customer
  systemBoundary Storefront
    Browse("Browse catalogue")
    Checkout("Checkout")
  end
  Customer --> Browse
  Customer --> Checkout
  Checkout ..> : include Browse
A Storefront boundary holding Browse catalogue and Checkout, with a dotted line from Checkout labelled include Browse.Expand diagram

Direction

The same keyword as flowcharts: TD, TB, BT, LR and RL.

usecase-beta
  direction LR
  actor Customer
  systemBoundary Storefront
    Checkout("Checkout")
  end
  Customer --> Checkout
A Customer actor on the left pointing at a Storefront boundary that holds Checkout, laid out left to right.Expand diagram

Draw it in Mernyx.

Open a .mmd file, move a node on the canvas, and the source comes with it. Native on macOS, no browser involved.

Buy Mernyx Pro — $19Download free

Diagram preview