Mermaid sequence diagram quick reference

The handful of arrows and blocks I keep looking up.

SNP 116 #4B1 Filed mermaid markdown 

sequenceDiagram
    autonumber
    actor User
    participant Browser
    participant API
    User->>Browser: Click "Save"
    Browser->>+API: POST /posts
    Note right of API: validate, store
    API-->>-Browser: 201 Created
    alt saved
        Browser->>User: Show "Saved"
    else error
        Browser->>User: Show error
    end
  • ->> solid arrow, -->> dashed (replies), -x for a lost message, -) async
  • + and - on the arrows open and close an activation bar
  • Note right of X: text, also left of and over A,B
  • alt/else/end for branches, loop/end to repeat, opt/end for optional bits
  • autonumber numbers the messages

The source goes in a ```mermaid fence and the browser draws it, which is how the one above is rendered right here.