Sequence — all advanced features

Box grouping, every actor type, autonumber w/ format, par/and, critical/option, break, activations, bidirectional, central lifeline, links.

MermaidUML & Software Mermaid syntax docs

Template previewMermaid

Rendering…

Make it your own.

sequenceDiagram
    autonumber 10 5
    box rgb(230,240,255) Frontend
      participant U as User
      actor A as Alice
    end
    participant DB@{ "type": "database" }
    participant Q@{ "type": "queue" }

    U->>+A: login (activate)
    A-->>-U: token (deactivate)
    A<<->>DB: bidirectional sync
    A->>()Q: central-lifeline emit

    par Fetch
      A->>DB: SELECT
    and Notify
      A->>Q: enqueue("notify")
    end

    critical Save
      A->>DB: write
    option Retry
      A->>DB: retry
    end

    break network down
      A->>U: error
    end