Skip to content

Mermaid sequence diagrams

A Mermaid sequence diagram is a type of diagram used to visualize interactions between different entities or participants in a chronological order.^[600-developer__tools__obsidian__Johnny-OB-037.md] It is one of the many diagram types supported by the Mermaid syntax, often utilized within Markdown environments like [[Obsidian]].^[600-developer__tools__obsidian__Johnny-OB-037.md]

Syntax and Structure

The diagram is defined within a code block marked with the sequenceDiagram identifier^[600-developer__tools__obsidian__Johnny-OB-037.md]. Interactions between participants are defined using arrows:

  • ->>: Represents a signal or message sent from one participant to another^[600-developer__tools__obsidian__Johnny-OB-037.md].
  • -->>: Represents a return message or response^[600-developer__tools__obsidian__Johnny-OB-037.md].

Activation

To indicate that a participant is active or processing a task, the + symbol can be appended to the arrow syntax (e.g., ->>+)1. Conversely, the - symbol (e.g., -->>-) is used to signify the end of an activation or the return of control1. In the provided example, the syntax Alice->>+John and John-->>-Alice is used to demonstrate the request-response lifecycle1.^[600-developer__tools__obsidian__Johnny-OB-037.md]

Examples

Below is a basic example of a Mermaid sequence diagram illustrating a conversation between two participants, Alice and John^[600-developer__tools__obsidian__Johnny-OB-037.md]:

sequenceDiagram 
    Alice->>+John: Hello John, how are you? 
    Alice->>+John: John, can you hear me? 
    John-->>-Alice: Hi Alice, I can hear you! 
    John-->>-Alice: I feel great!

Advanced features include loops for repetitive interactions and notes for adding annotations. For instance, a loop block can be used to represent a recurring Health Check process, and a Note right of [Participant] directive can add contextual text to the diagram^[600-developer__tools__obsidian__Johnny-OB-037.md]:

sequenceDiagram
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
  • [[Mermaid diagrams]]
  • [[Obsidian]]
  • [[Gantt charts]]

Sources

  • 600-developer__tools__obsidian__Johnny-OB-037.md

  1. This description of activation syntax is inferred from the examples provided in the source text (lines 13–18) which use ->>+ and -->>- to denote the start and end of interactions. ↩↩↩