State diagram (Mermaid)

Anything with a status field deserves one of these. The value is in making the illegal transitions obvious, and in forcing you to answer what happens after cancellation.

#What this example shows

• Transitions labelled with the event that causes them, not the resulting state.

• A note anchored to a state, for the rules that do not fit on an arrow.

• Terminal states, drawn explicitly, so no state is a dead end by accident.

#A worked example

Open it, edit it, or copy the source below.

The source, which you can paste into a new diagram and edit:

stateDiagram-v2
  [*] --> Trialling
  Trialling --> Active: payment succeeds
  Trialling --> Expired: trial ends unpaid
  Active --> PastDue: payment fails
  PastDue --> Active: retry succeeds
  PastDue --> Cancelled: 3 failed retries
  Active --> Cancelled: customer cancels
  Cancelled --> Active: reactivated within 30 days
  Cancelled --> [*]: after 30 days
  Expired --> [*]

  note right of PastDue
    Retries on days 1, 3 and 7.
    Access continues throughout.
  end note

#Making it your own

• Add composite states with state Name { ... } when a state has its own internal machine.

• Use direction LR at the top if the diagram reads better sideways.

• Every state needs a way out. A state with no outgoing transition is usually a bug.

#Related

Copy it. Change one line. See what happens.