Sequence diagrams | Mermaid (2024)

A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.

Mermaid can render sequence diagrams.

INFO

A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted.

If unavoidable, one must use parentheses(), quotation marks "", or brackets {},[], to enclose the word "end". i.e : (end), [end], {end}.

Syntax

Participants

The participants can be defined implicitly as in the first example on this page. The participants or actors are rendered in order of appearance in the diagram source text. Sometimes you might want to show the participants in a different order than how they appear in the first message. It is possible to specify the actor's order of appearance by doing the following:

Actors

If you specifically want to use the actor symbol instead of a rectangle with text you can do so by using actor statements as per below.

Aliases

The actor can have a convenient identifier and a descriptive label.

Actor Creation and Destruction (v10.3.0+)

It is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message.

create participant BA --> B: Hello

Create directives support actor/participant distinction and aliases. The sender or the recipient of a message can be destroyed but only the recipient can be created.

Unfixable actor/participant creation/deletion error

If an error of the following type occurs when creating or deleting an actor/participant:

The destroyed participant participant-name does not have an associated destroying message after its declaration. Please check the sequence diagram.

And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version to (v10.7.0+).

Grouping / Box

The actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation:

box Aqua Group Description... actors ...endbox Group without description... actors ...endbox rgb(33,66,99)... actors ...end

INFO

If your group name is a color you can force the color to be transparent:

box transparent Aqua... actors ...end

Messages

Messages can be of two displayed either solid or with a dotted line.

[Actor][Arrow][Actor]:Message text

There are six types of arrows currently supported:

TypeDescription
->Solid line without arrow
-->Dotted line without arrow
->>Solid line with arrowhead
-->>Dotted line with arrowhead
-xSolid line with a cross at the end
--xDotted line with a cross at the end.
-)Solid line with an open arrow at the end (async)
--)Dotted line with a open arrow at the end (async)

Activations

It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:

There is also a shortcut notation by appending +/- suffix to the message arrow:

Activations can be stacked for same actor:

Notes

It is possible to add notes to a sequence diagram. This is done by the notation Note [ right of | left of | over ] [Actor]: Text in note content

See the example below:

It is also possible to create notes spanning two participants:

It is also possible to add a line break (applies to text input in general):

Loops

It is possible to express loops in a sequence diagram. This is done by the notation

loop Loop text... statements ...end

See the example below:

Alt

It is possible to express alternative paths in a sequence diagram. This is done by the notation

alt Describing text... statements ...else... statements ...end

or if there is sequence that is optional (if without else).

opt Describing text... statements ...end

See the example below:

Parallel

It is possible to show actions that are happening in parallel.

This is done by the notation

par [Action 1]... statements ...and [Action 2]... statements ...and [Action N]... statements ...end

See the example below:

It is also possible to nest parallel blocks.

Critical Region

It is possible to show actions that must happen automatically with conditional handling of circ*mstances.

This is done by the notation

critical [Action that must be performed]... statements ...option [Circ*mstance A]... statements ...option [Circ*mstance B]... statements ...end

See the example below:

It is also possible to have no options at all

This critical block can also be nested, equivalently to the par statement as seen above.

Break

It is possible to indicate a stop of the sequence within the flow (usually used to model exceptions).

This is done by the notation

break [something happened]... statements ...end

See the example below:

Background Highlighting

It is possible to highlight flows by providing colored background rects. This is done by the notation

The colors are defined using rgb and rgba syntax.

rect rgb(0, 255, 0)... content ...end
rect rgba(0, 0, 255, .1)... content ...end

See the examples below:

Comments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with %% (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax

Entity codes to escape characters

It is possible to escape characters using the syntax exemplified here.

Numbers given are base 10, so # can be encoded as #35;. It is also supported to use HTML character names.

Because semicolons can be used instead of line breaks to define the markup, you need to use #59; to include a semicolon in message text.

sequenceNumbers

It is possible to get a sequence number attached to each arrow in a sequence diagram. This can be configured when adding mermaid to the website as shown below:

html

<script> mermaid.initialize({ sequence: { showSequenceNumbers: true } });</script>

It can also be turned on via the diagram code as in the diagram:

Actor Menus

Actors can have popup-menus containing individualized links to external pages. For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service.

This can be configured by adding one or more link lines with the format:

link <actor>: <link-label> @ <link-url>

Advanced Menu Syntax

There is an advanced syntax that relies on JSON formatting. If you are comfortable with JSON format, then this exists as well.

This can be configured by adding the links lines with the format:

links <actor>: <json-formatted link-name link-url pairs>

An example is below:

Styling

Styling of a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/sequence.scss

Classes used

ClassDescription
actorStyles for the actor box.
actor-topStyles for the actor figure/ box at the top of the diagram.
actor-bottomStyles for the actor figure/ box at the bottom of the diagram.
text.actorStyles for text in the actor box.
actor-lineThe vertical line for an actor.
messageLine0Styles for the solid message line.
messageLine1Styles for the dotted message line.
messageTextDefines styles for the text on the message arrows.
labelBoxDefines styles label to left in a loop.
labelTextStyles for the text in label for loops.
loopTextStyles for the text in the loop box.
loopLineDefines styles for the lines in the loop box.
noteStyles for the note box.
noteTextStyles for the text on in the note boxes.

Sample stylesheet

css

body { background: white;}.actor { stroke: #ccccff; fill: #ececff;}text.actor { fill: black; stroke: none; font-family: Helvetica;}.actor-line { stroke: grey;}.messageLine0 { stroke-width: 1.5; stroke-dasharray: '2 2'; marker-end: 'url(#arrowhead)'; stroke: black;}.messageLine1 { stroke-width: 1.5; stroke-dasharray: '2 2'; stroke: black;}#arrowhead { fill: black;}.messageText { fill: black; stroke: none; font-family: 'trebuchet ms', verdana, arial; font-size: 14px;}.labelBox { stroke: #ccccff; fill: #ececff;}.labelText { fill: black; stroke: none; font-family: 'trebuchet ms', verdana, arial;}.loopText { fill: black; stroke: none; font-family: 'trebuchet ms', verdana, arial;}.loopLine { stroke-width: 2; stroke-dasharray: '2 2'; marker-end: 'url(#arrowhead)'; stroke: #ccccff;}.note { stroke: #decc93; fill: #fff5ad;}.noteText { fill: black; stroke: none; font-family: 'trebuchet ms', verdana, arial; font-size: 14px;}

Configuration

It is possible to adjust the margins for rendering the sequence diagram.

This is done by defining mermaid.sequenceConfig or by the CLI to use a json file with the configuration. How to use the CLI is described in the mermaidCLI page. mermaid.sequenceConfig can be set to a JSON string with config parameters or the corresponding object.

javascript

mermaid.sequenceConfig = { diagramMarginX: 50, diagramMarginY: 10, boxTextMargin: 5, noteMargin: 10, messageMargin: 35, mirrorActors: true,};

Possible configuration parameters:

ParameterDescriptionDefault value
mirrorActorsTurns on/off the rendering of actors below the diagram as well as above itfalse
bottomMarginAdjAdjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists.1
actorFontSizeSets the font size for the actor's description14
actorFontFamilySets the font family for the actor's description"Open Sans", sans-serif
actorFontWeightSets the font weight for the actor's description"Open Sans", sans-serif
noteFontSizeSets the font size for actor-attached notes14
noteFontFamilySets the font family for actor-attached notes"trebuchet ms", verdana, arial
noteFontWeightSets the font weight for actor-attached notes"trebuchet ms", verdana, arial
noteAlignSets the text alignment for text in actor-attached notescenter
messageFontSizeSets the font size for actor<->actor messages16
messageFontFamilySets the font family for actor<->actor messages"trebuchet ms", verdana, arial
messageFontWeightSets the font weight for actor<->actor messages"trebuchet ms", verdana, arial
Sequence diagrams | Mermaid (2024)
Top Articles
Latest Posts
Article information

Author: Geoffrey Lueilwitz

Last Updated:

Views: 6239

Rating: 5 / 5 (60 voted)

Reviews: 91% of readers found this page helpful

Author information

Name: Geoffrey Lueilwitz

Birthday: 1997-03-23

Address: 74183 Thomas Course, Port Micheal, OK 55446-1529

Phone: +13408645881558

Job: Global Representative

Hobby: Sailing, Vehicle restoration, Rowing, Ghost hunting, Scrapbooking, Rugby, Board sports

Introduction: My name is Geoffrey Lueilwitz, I am a zealous, encouraging, sparkling, enchanting, graceful, faithful, nice person who loves writing and wants to share my knowledge and understanding with you.