# Mermaid Use Case Diagram Cheat Sheet

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

## Actors and use cases

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

```mermaid
usecase-beta
  actor Customer
  actor Support
  Customer --> Checkout
  Support --> Track
```

![Two actors, Customer and Support, pointing at two use cases, Checkout and Track.](/diagrams/usecase/actors.svg)

## The system boundary

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

```mermaid
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.](/diagrams/usecase/boundary.svg)

## Include relations

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

```mermaid
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.](/diagrams/usecase/relations.svg)

## Direction

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

```mermaid
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.](/diagrams/usecase/direction.svg)

## 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.