Sequence diagram
Mermaid can render sequence diagrams. A sequence diagram is a type of interaction diagram that shows how processes operate with one another and in what order.
Copy
Embed
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
A note about nodes: because of the way the Mermaid language is written, the word "end" will break the entire diagram. If you must use "end", you need to wrap the word "end" using parentheses (), double quotes "", braces {}, or square brackets []; that is: (end), [end], {end}.
Syntax
Participant
Participants are displayed in the order in which they appear in the diagram's source text. Sometimes you may want to display participants in an order different from their order of appearance in the first message; you can specify the order in which participants appear using the following method:
Copy
Embed
sequenceDiagram
participant Alice
participant Bob
Bob->>Alice: Hi Alice
Alice->>Bob: Hi Bob
角色
If you want to use an actor symbol instead of a rectangle with text, you can do so using the actor statement, as shown below.
Copy
Embed
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
Alias
You can use as after a participant declaration to define an alias
Copy
Embed
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
Creating and destroying participants
Participants can be created and destroyed via messages. Therefore, add a create or destroy directive before the message.
Copy
Embed
participant B
A --> B: Hello
The create directive supports distinguishing between a participant and an alias. The sender or receiver of a message can be destroyed, but the receiver can only be created.
Copy
Embed
sequenceDiagram
Alice->>Bob: Hello Bob, how are you ?
Bob->>Alice: Fine, thank you. And you?
create participant Carl
Alice->>Carl: Hi Carl!
create actor D as Donald
Carl->>D: Hi!
destroy Carl
Alice-xCarl: We are too many
destroy Bob
Bob->>Alice: I agree
Grouping/box
Participants can be grouped in a vertical box. You can define a color using a symbol (if none is defined, it will be transparent).
Copy
Embed
box Aqua Group Description
... actors ...
end
box Group without description
... actors ...
end
box rgb(33,66,99)
... actors ...
end
box rgba(33,66,99,0.5)
... actors ...
end
If your group name is colored, you can force that color to be transparent:
Copy
Embed
box transparent Aqua
... actors ...
end
Copy
Embed
sequenceDiagram
box Orange Alice & John
participant A
participant J
end
box Another Group
participant B
participant C
end
A->>J: Hello John, how are you?
J->>A: Great!
A->>B: Hello Bob, how is Charley?
B->>C: Hello Charley, how are you?
Message
Messages can be displayed as a solid line or as a dotted line.
Lines can be solid or dotted and can terminate with various types of arrowheads, crosses, or open arrows.
Copy
Embed
[Actor][Arrow][Actor]:Message text
Ten standard arrow types
| Type | Description |
|---|---|
| -> | Solid line without arrow |
| --> | Dotted line without arrow |
| ->> | Solid line with arrowhead |
| -->> | Dotted line with arrowhead |
| <<->> | Solid line with bidirectional arrowheads |
| <<-->> | Dotted line with bidirectional arrowheads |
| -x | Solid line with cross at the end |
| --x | Dotted line with cross at the end |
| -) | Solid line with open arrowhead at the end (async) |
| --) | Dotted line with open arrowhead at the end (async) |
Activation
A participant can be activated and deactivated; deactivation or activation can be a dedicated declaration:
Copy
Embed
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
activate Alice
Bob->>Alice: Hi Alice!
deactivate Alice
There is also a shorthand notation: adding + or - after the message arrow.
Copy
Embed
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
Activation of the same participant can be stacked:
Copy
Embed
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!
Notes
Notes can be added to a sequence diagram. This can be done with the following notation: Note[right of] or [left of] or [over][participant]: the note content
Copy
Embed
sequenceDiagram
participant John
Note right of John: Text in note
You can also create a note that spans two participants:
Copy
Embed
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
Line breaks
Line breaks can be added to notes and messages:
Copy
Embed
sequenceDiagram
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
A line break in a participant name requires defining an alias:
Copy
Embed
sequenceDiagram
participant Alice as Alice<br/>Johnson
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<n/>But now in two lines
Loops
In a sequence diagram, loops can be expressed with the following notation.
Copy
Embed
loop Loop text
... statements ...
end
See the example below:
Copy
Embed
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
Alt
In a sequence diagram, alternative paths can be expressed with the following notation.
Copy
Embed
alt Describing text...
statements
else
statements
end
或者如果存在可选序列：
Copy
Embed
opt Describing text...
statements
end
See the example below:
Copy
Embed
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
Parallel
Actions that occur in parallel can be represented with the following notation.
Copy
Embed
par Action 1
statements
and Action 2
statements
and Action N
statements
end
See the example below:
Copy
Embed
sequenceDiagram
par Alice to Bob
Alice->>Bob: Hello guys!
and Alice to John
Alice->>John: Hello guys!
end
Bob-->>Alice: Hi Alice!
John-->>Alice: Hi Alice!
Parallel blocks can also be nested.
Copy
Embed
sequenceDiagram
par Alice to Bob
Alice->>Bob: Go help John
and Alice to John
Alice->>John: I want this done today
par John to Charlie
John->>Charlie: Can we do this today?
and John to Diana
John->>Diana: Can you help us today?
end
end
Critical region
Actions that must be performed automatically can be shown by conditioning on various situations.
This is done with the following notation:
Copy
Embed
critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end
See the example below:
Copy
Embed
sequenceDiagram
critical Establish a connection to the DB
Service-->DB: connect
option Network timeout
Service-->Service: Log error
option Credentials rejected
Service-->Service: Log different error
end
It is also possible to have no options at all.
Copy
Embed
critical Establish a connection to the DB
Service-->DB: connect
end
This critical block can also be nested, equivalent to the par statement seen above.
Break
A stop of the sequence can be indicated in the flow, usually used to model exceptional situations.
This is done with the following notation:
Copy
Embed
break [something happened]
... statements ...
end
See the example below:
Copy
Embed
sequenceDiagram
Consumer-->API: Book something
API-->BookingService: Start booking process
break when the booking process fails
API-->Consumer: show failure
end
API-->BillingService: Start billing process
Background highlighting
A colored background rectangle can be set to highlight the flow, done with the following notation:
Copy
Embed
rect COLOR
... content ...
end
Colors are defined using rgb and rgba syntax.
Copy
Embed
rect rgb(0, 255, 0)
... content ...
end
Copy
Embed
rect rgba(0, 0, 255, .1)
... content ...
end
See the example below:
Copy
Embed
sequenceDiagram
participant Alice
participant John
rect rgb(191, 178, 255)
note right of Alice: Alice calls John.
Alice->>+John: Hello John, how are you?
rect rgb(142, 182, 89)
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
end
John-->>-Alice: I feel great!
end
Alice ->>+ John: Did you want to go to the game tonight?
John -->>- Alice: Yeah! See you there.
Notes
Comments can be entered in a sequence diagram and will be ignored by the editor. Comments must be on their own line and must begin with a double percent sign %%. Any text from the start of the comment to the next line break will be treated as a comment, including any diagram syntax.
Copy
Embed
sequenceDiagram
Alice->>John: Hello John, how are you?
%% this is a comment
John-->>Alice: Great!
Entity codes for escaping characters
Characters can be escaped using the following syntax.
Copy
Embed
sequenceDiagram
A->>B: I #9829; you!
B->>A: I #9829; you #infin; times more!
The numbers given are decimal, so (#) can be encoded as (#35;). HTML character names are also supported.
Since a semicolon can be used in place of a line break to define markup, when including a semicolon in message text you need to use (#59;).
Numbering
A sequence number can be attached to each arrow in a sequence diagram. As shown below:
Copy
Embed
sequenceDiagram
autonumber
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!
Participant menu
Participants can include a pop-up menu listing personalized links to external pages. For example, if a participant represents a web service, useful links might include a link to the service's health dashboard, a repository containing the service's code, or a link to a wiki page describing the service.
It can be configured by adding one or more link lines in the following format:
Copy
Embed
link <actor>: <link-label> @ <link-url>
Copy
Embed
sequenceDiagram
participant Alice
participant John
link Alice: Dashboard @ https://dashboard.contoso.com/alice
link Alice: Wiki @ https://wiki.contoso.com/alice
link John: Dashboard @ https://dashboard.contoso.com/john
link John: Wiki @ https://wiki.contoso.com/john
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
Advanced menu syntax
There is an advanced syntax that relies on the JSON format. If you are proficient with the JSON format, this can be used as well.
It can be configured by adding link lines in the following format:
Copy
Embed
links <actor>: <json-formatted link-name link-url pairs>
示例如下:
Copy
Embed
sequenceDiagram
participant Alice
participant John
links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}
links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
