# Mermaid Sequence Diagram Cheat Sheet

Messages between participants, in order, over time.

## Participants

Declare them to control the order. Use actor for the stick figure.

```mermaid
sequenceDiagram
  participant Alice
  actor Bob
  Bob->>Alice: Hi Alice
  Alice->>Bob: Hi Bob
```

![A sequence diagram with a participant box for Alice and a stick figure for Bob, exchanging two messages.](/diagrams/sequence/participants.svg)

## Message arrows

A filled arrowhead is a call, an open one is a reply, a line with no head is just a note.

```mermaid
sequenceDiagram
  Alice->>John: Hello John
  John-->>Alice: Hi Alice
  John-)Alice: A one-way note
```

![Three messages between two lifelines: a solid arrow from Alice to John, a dashed arrow back, and a third line with no arrowhead.](/diagrams/sequence/messages.svg)

## Activations

A plus opens a bar on the lifeline, a minus closes it. The bar shows how long the call took.

```mermaid
sequenceDiagram
  Alice->>+John: Hello
  John-->>-Alice: Hi
```

![Two messages between Alice and John, with a thin vertical activation bar on John's lifeline between them.](/diagrams/sequence/activations.svg)

## Notes

Notes attach to a participant, or float over a range of them.

```mermaid
sequenceDiagram
  Alice->>John: Hello
  Note right of John: He answers later
  Note over Alice,John: A shared note
```

![A sequence diagram with two note boxes, one to the right of John's lifeline and one spanning both lifelines.](/diagrams/sequence/notes.svg)

## Loops

A labelled block that repeats. Anything inside runs once per iteration.

```mermaid
sequenceDiagram
  Alice->>John: Hello
  loop Every minute
    John->>Alice: Still there?
  end
```

![A message from Alice to John, then a box labelled Every minute containing a message from John back to Alice.](/diagrams/sequence/loop.svg)

## Alternatives

alt and else are the if/else of a sequence diagram.

```mermaid
sequenceDiagram
  Alice->>John: Hello
  alt John is a robot
    John-->>Alice: Beep
  else John is a human
    John-->>Alice: Hello there
  end
```

![A message from Alice to John, then an alt block with two branches, one for a robot and one for a human.](/diagrams/sequence/alt.svg)

## Numbering the steps

autonumber puts a number on every message, in order.

```mermaid
sequenceDiagram
  autonumber
  Alice->>John: Hello
  John-->>Alice: Hi
  Alice->>John: Still there?
```

![A sequence diagram of three messages, each carrying a small numbered badge on its arrow.](/diagrams/sequence/autonumber.svg)

## Optional steps

opt marks a block that may or may not happen.

```mermaid
sequenceDiagram
  Alice->>John: Hello
  opt If he feels like it
    John-->>Alice: Hi
  end
```

![A message from Alice to John, then an optional block containing a reply from John.](/diagrams/sequence/opt.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.
