Mermaid Sequence Diagrams Guide
Write sequence diagrams with Mermaid — actors, lifelines, arrows, and activation boxes explained.
Published:
Tags: Mermaid sequence diagram, sequence diagram Mermaid.js, UML sequence Mermaid
Mermaid Sequence Diagrams Guide Sequence diagrams are defined in the UML 2.5 specification by the Object Management Group (OMG). Mermaid.js sequence diagram syntax implements a subset of UML sequence notation with a text-first approach. Sequence diagrams show how components interact over time — which service calls which, in what order, and what data flows between them. Mermaid's sequence diagram syntax covers simple request-response flows, authentication flows, and complex async patterns. --- What is the Basic syntax? Every sequence diagram starts with . Participants are declared with or discovered automatically from the message lines. What arrow types are available? | Arrow | Syntax | Meaning | |-------|--------|---------| | Solid, open head | | Solid line, no arrowhead | | Solid, filled…
Frequently Asked Questions
How do I write a sequence diagram in Mermaid?
Start with `sequenceDiagram`, declare participants, then write messages as `Sender->>Receiver: message text`. Use `->>` for synchronous calls and `-->>` for responses. Mermaid renders the diagram as an SVG with lifelines and arrows automatically.
What is the Mermaid sequence diagram syntax?
The syntax consists of participant declarations, message arrows (`->`, `->>`, `-->`, `-->>`), activation boxes (`activate`/`deactivate`), notes (`note over`, `note left of`), loops (`loop ... end`), alternatives (`alt/else/end`), and optional sections (`opt ... end`).
How do I add activation boxes?
Use `activate ParticipantName` before the messages that happen while the participant is processing, and `deactivate ParticipantName` after. Alternatively, use `+` and `-` suffixes on arrows: `A->>+B: call` activates B, and `B-->>-A: response` deactivates it.
How do I show optional messages in sequence diagrams?
Wrap optional interactions in `opt [condition] ... end`. For alternatives, use `alt [condition] ... else [condition] ... end`. For repeated sections, use `loop [description] ... end`. All three constructs are rendered as labeled boxes around the enclosed messages.
What is the difference between sequence and flow diagrams?
Sequence diagrams show interactions between participants over time — the vertical axis represents time progression. Flowcharts show decision logic and process steps — nodes represent states or actions, edges represent transitions or decisions. Sequence diagrams suit API and protocol documentation; flowcharts suit process documentation.
All articles · theproductguy.in