Sequence diagrams | Mermaid (2023)

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

Mermaid can render sequence diagrams.

Code:

mermaid

sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! Alice-)John: See you later!

null

Note 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:

Code:

mermaid

sequenceDiagram participant Alice participant Bob Alice->>Bob: Hi Bob Bob->>Alice: Hi Alice

null

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.

Code:

mermaid

sequenceDiagram actor Alice actor Bob Alice->>Bob: Hi Bob Bob->>Alice: Hi Alice

null

Aliases #

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

Code:

mermaid

sequenceDiagram participant A as Alice participant J as John A->>J: Hello John, how are you? J->>A: Great!

null

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:

(Video) How to Make a UML Sequence Diagram

Code:

mermaid

sequenceDiagram Alice->>John: Hello John, how are you? activate John John-->>Alice: Great! deactivate John

null

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

Code:

mermaid

sequenceDiagram Alice->>+John: Hello John, how are you? John-->>-Alice: Great!

null

Activations can be stacked for same actor:

Code:

mermaid

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!

null

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:

Code:

mermaid

sequenceDiagram participant John Note right of John: Text in note

null

It is also possible to create notes spanning two participants:

Code:

mermaid

sequenceDiagram Alice->John: Hello John, how are you? Note over Alice,John: A typical interaction

null

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:

Code:

mermaid

(Video) UML Sequence Diagram Tutorial | Easy to Understand with Examples

sequenceDiagram Alice->John: Hello John, how are you? loop Every minute John-->Alice: Great! end

null

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:

Code:

mermaid

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

null

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:

Code:

mermaid

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!

null

It is also possible to nest parallel blocks.

Code:

mermaid

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

null

Critical Region #

It is possible to show actions that must happen automatically with conditional handling of circumstances.

This is done by the notation

critical [Action that must be performed]... statements ...option [Circumstance A]... statements ...option [Circumstance B]... statements ...end

See the example below:

Code:

mermaid

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

null

It is also possible to have no options at all

(Video) UML 2 Sequence Diagrams

Code:

mermaid

sequenceDiagram critical Establish a connection to the DB Service-->DB: connect end

null

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:

Code:

mermaid

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

null

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:

Code:

mermaid

sequenceDiagram participant Alice participant John rect rgb(191, 223, 255) note right of Alice: Alice calls John. Alice->>+John: Hello John, how are you? rect rgb(200, 150, 255) 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.

null

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

Code:

mermaid

sequenceDiagram Alice->>John: Hello John, how are you? %% this is a comment John-->>Alice: Great!

null

Entity codes to escape characters #

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

Code:

mermaid

sequenceDiagram A->>B: I #9829; you! B->>A: I #9829; you #infin; times more!

null

(Video) UML Behavioral Diagrams: Sequence - Georgia Tech - Software Development Process

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 be turned on via the diagram code as in the diagram:

Code:

mermaid

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!

null

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>
Code:

mermaid

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!

null

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:

Code:

mermaid

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!

null

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
actorStyle for the actor box at the top of the diagram.
text.actorStyles for text in the actor box at the top of the diagram.
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.

(Video) Sequence Diagram - Step by Step Guide with Example

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

FAQs

What is a sequence diagram? ›

A sequence diagram is a Unified Modeling Language (UML) diagram that illustrates the sequence of messages between objects in an interaction. A sequence diagram consists of a group of objects that are represented by lifelines, and the messages that they exchange over time during the interaction.

What is sequence diagram with example? ›

A sequence diagram is a type of interaction diagram because it describes how—and in what order—a group of objects works together. These diagrams are used by software developers and business professionals to understand requirements for a new system or to document an existing process.

What is the purpose of a sequence diagram? ›

The sequence diagram is used primarily to show the interactions between objects in the sequential order that those interactions occur. Much like the class diagram, developers typically think sequence diagrams were meant exclusively for them.

What are the 4 types of sequence? ›

There are four main types of different sequences you need to know, they are arithmetic sequences, geometric sequences, quadratic sequences and special sequences.

What are the 5 types of sequence? ›

Types of Sequence and Series
  • Arithmetic Sequences.
  • Geometric Sequences.
  • Harmonic Sequences.
  • Fibonacci Numbers.

Which is the most important aspect of a sequence diagram? ›

Messages are the most important elements of a sequence diagram. They indicate when one object calls an operation on another object (or itself). They are also used to indicate return values.

What are the key features of sequence diagram? ›

Key elements of sequence diagram

A sequence diagram shows, as parallel vertical lines (lifelines), different processes or objects that live simultaneously, and, as horizontal arrows, the messages exchanged between them, in the order in which they occur.

Why is it important to learn about sequence? ›

Why is sequencing important? We sequence all day long—we divide our time into what we need to do first, second, and last; we understand events in our lives by understanding the order in which they occur. For some children, sequencing can be a hard concept to grasp, especially when they are trying to tell a story.

What are the rules for drawing sequence diagram? ›

A sequence diagram is made up of several of these lifeline notations that should be arranged horizontally across the top of the diagram. No two lifeline notations should overlap each other. They represent the different objects or parts that interact with each other in the system during the sequence.

What tool is used for sequence diagrams? ›

Lucidchart. Lucidchart is one of the highest-rated diagramming tools currently on the market. They offer a wide variety of diagram templates, a full shapes library, and impressive collaboration features.

How do you write code from sequence diagram? ›

To create a Sequence diagram for code (engineering): In the Model Tree, right-click an operation and select Create Sequence diagram for code. You will then be prompted if you want to use the new diagram for forward engineering. The result is a new Sequence Diagram containing the lifeline of that class.

Are sequence diagrams still used? ›

Sequence diagrams describe how and in what order the objects in a system function. These diagrams are widely used by businessmen and software developers to document and understand requirements for new and existing systems.

What is the difference between use case and sequence diagram? ›

Use cases boil the system down to their added values and do not show how these are achieved. Any scenario of a use case is graphically represented in an activity diagram where the single steps occur as actions. A sequence diagram is used to show how objects communicate.

What is the difference between activity and sequence diagrams? ›

The Sequence diagram shows the message flow from one object to another object. The Activity diagram shows the message flow from one activity to another. Sequence diagram is used for the purpose of dynamic modelling. Activity diagram is used for the purpose of functional modelling.

What are the rules of sequence? ›

One player or team must score TWO SEQUENCES before their opponents. A Sequence is a connected series of five of the same color marker chip in a straight line, either up and down, across or diagonally on the playing surface. Choose two colors of chips. Keep the third color away from the game board.

What kind of sequence is 1 1 2 3 5 8? ›

The Fibonacci sequence begins with the following 14 integers: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233 ... Each number, starting with the third, adheres to the prescribed formula.

What is the sequence 1 3 5 7 9? ›

The sequence that is given to us is 1, 3, 5, 7, 9, ... a5 - a4 = 9 - 7 = 2. Hence, from the above simplification we can see that the common difference is 2. Therefore, the general term for the sequence 1, 3, 5, 7, 9, . . . is 2n - 1.

What are the 4 principles of sequencing? ›

The principles of sequencing content described by Print (1993 as cited in Edith Cowan University, 2001) are: Simple to complex, prerequisite learning, whole to part, and chronology. These four principles have become increasingly acceptable as the criteria for sequencing contents.

What is the name of the sequence 1 2 3 4 5 6? ›

Fibonacci Numbers (Sequence):

Each term of the sequence , after the first two, is the sum of the two previous terms. This sequence of numbers was first created by Leonardo Fibonacci in 1202 .

What is the name of the 1 2 3 4 5 sequence? ›

The Fibonacci sequence is a series of numbers where a number is the addition of the last two numbers, starting with 0, and 1. The Fibonacci Sequence: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55…

What should not be included in sequence diagram? ›

10 common mistakes to avoid in sequence diagrams
  • Get rid of unnecessary detail. ...
  • Messages should (more often than not) run from left to right. ...
  • Sequence diagrams that are obsolete and out of date. ...
  • Avoid sequence diagrams if you are dealing with simple logic.
Jan 5, 2023

What are the limitations of sequence diagram? ›

Drawbacks of a sequence diagram

Sequence diagrams can become complex when too many lifelines are involved in the system. If the order of message sequence is changed, then incorrect results are produced. Each sequence needs to be represented using different message notation, which can be a little complex.

Is sequence diagram high level design? ›

High-level sequence diagrams give a good overview of the interactions between customers, partners, and the business system. They serve as the basis for the electronic data transfer between the business system and customers, business partners, and suppliers (see Modeling for System Integration).

What are the different types of sequence diagrams? ›

Basic Sequence Diagram Notations
  • Class Roles or Participants. Class roles describe the way an object will behave in context. ...
  • Activation or Execution Occurrence. ...
  • Messages. ...
  • Lifelines. ...
  • Synchronous Message. ...
  • Asynchronous Message. ...
  • Reply or Return Message. ...
  • Self Message.

How many types of sequence structures are there? ›

There are two types of sequence structures—the Flat Sequence structure and the Stacked Sequence structure. Use sequence structures sparingly because they hide code. Rely on data flow rather than sequence structures to control the order of execution.

What is the difference between class and sequence diagram? ›

A class diagram shows a set of classes, interfaces and their relationships and illustrates the static design view of a system, while a sequence diagram shows the sequence of actions that occurs in a system and illustrates the dynamic view of a system.

What is the real life application of sequence? ›

Many real-life situations can be modelled using sequences and series, including but not limited to: patterns made when tiling floors; seating people around a table; the rate of change of a population; the spread of a virus and many more.

How does sequence help in real life? ›

- It's always better to know how knowledge helps us in real life. A sequence helps you design pyramid-like structures where the building components change in a constant manner. This is such a simple and fun-filled application that you can try it yourself using Legos.

Is sequencing a math skill? ›

Ordering, sequencing, and patterning are important foundational skills for mathematics. Child care providers can build young children's early math skills by help them learn sequencing, seriation, and patterning. Sequencing is the ability to create and identify patterns.

What are the 4 types of diagram? ›

Of the diagram types this post covered, mind maps, flowcharts, fishbone diagrams, hierarchy/organizational charts, and SWOT analysis diagrams are the most common diagram types.

Can a sequence diagram have 2 actors? ›

Note that a sequence diagram can have multiple actors. Lifeline – this is a vertical parallel dashed line showing the object's existence in time. Multiple lifelines can never overlap.

Where can I make a sequence diagram for free? ›

Lucidchart makes creating these diagrams simple with the shapes, interface, and collaborative setting you need. Sign up free and create your UML diagrams today!

How do you create an object in a sequence diagram? ›

Object. In the UML, an object in a sequence diagram is drawn as a rectangle containing the name of the object, underlined. An object can be named in one of three ways: the object name, the object name and its class, or just the class name (anonymous object). The three ways of naming an object are shown in Figure below.

What is the best tool to draw UML sequence diagrams? ›

What is the best software for UML diagrams?
  • Lucidchart. Many developer's go-to diagramming tool, Lucidchart provides a suite of simple tools. ...
  • Gleek.io. Gleek.io creates several types of UML diagrams: sequence diagrams, class diagrams, and object diagrams. ...
  • Diagrams.net. ...
  • Cacoo. ...
  • Gliffy. ...
  • EdrawMax. ...
  • Microsoft Visio Pro.
Dec 17, 2020

How do you create a sequence example? ›

Example 1:

CREATE SEQUENCE sequence_1 start with 1 increment by 1 minvalue 0 maxvalue 100 cycle; Above query will create a sequence named sequence_1. Sequence will start from 1 and will be incremented by 1 having maximum value 100. Sequence will repeat itself from start value after exceeding 100.

What is an example of sequencing in coding? ›

Sequence is the default control structure; instructions are executed one after another. They might, for example, carry out a series of arithmetic operations, assigning results to variables, to find the roots of a quadratic equation ax2 + bx + c = 0.

What is a sequence diagram quizlet? ›

Sequence Diagram. a dynamic model that show the objects that participate in a use case and the explicit sequence of messages that are passed between those objects over time for one use case in a defined interaction.

What is the purpose of a sequence diagram Cisco? ›

Sequence diagram is a type of diagram that illustrates the interactions between software objects. Sequence diagram is a great way to illustrate the order of operations, as well as the messages being exchanged in the API calls.

What is the advantage of using a sequence diagram? ›

The Sequence Diagram is one of the most interesting and useful diagrams in the Unified Modeling Language (UML). It helps you document and understand the dynamic aspects of your software system - specifically the sequence of messages that are sent and received between objects.

What is a diagram short answer? ›

A diagram is a simple drawing which consists mainly of lines and is used, for example, to explain how a machine works. ...

What is critical sequence diagram? ›

Critical region: the fragment can have only one thread executing it at once. Negative: the fragment shows an invalid interaction. Reference: refers to an interaction defined on another diagram. The frame is drawn to cover the lifelines involved in the interaction.

What are the three 3 types of schematic diagram? ›

Types of Electrical Diagrams or Schematics

They are wiring, schematic, and pictorial diagrams.

What are the 3 types of process flow diagram? ›

In 1987, Andrew Veronis published a book called Microprocessors: Design and Application that described the following three types of flowcharts:
  • System flowchart.
  • General flowchart.
  • Detailed flowchart.
Jan 7, 2023

What are the disadvantages of sequence diagram? ›

The drawback of a Sequence Diagram

In the case of too many lifelines, the sequence diagram can get more complex. The incorrect result may be produced, if the order of the flow of messages changes. Since each sequence needs distinct notations for its representation, it may make the diagram more complex.

What are the 4 main components of a use case diagram? ›

UCDs have only 4 major elements: The actors that the system you are describing interacts with, the system itself, the use cases, or services, that the system knows how to perform, and the lines that represent relationships between these elements.

What is the difference between sequence diagram and timing diagram? ›

A timing diagram is a special form of a sequence diagram. The differences between timing diagram and sequence diagram are the axes are reversed so that the time increases from left to right and the lifelines are shown in separate compartments arranged vertically.

Can sequence diagram have multiple use cases? ›

The various scenarios of a business use case can be depicted in a sequence diagram. The representation is restricted to the message exchange within each business use case.

Videos

1. Prep Tips For Class 10 CBSE Science Exam | CBSE 10th Science Exam
(The Indian Express)
2. How to make Sequence diagram with example
(Karan Jetli Live)
3. UML Use-Case and Sequence Diagrams Made Simple | Step by Step Guide | UML Diagrams | Geekific
(Geekific)
4. Sequence Diagram Part-1 Explained in Hindi l UML Diagram l Software Modeling and Designing Course
(5 Minutes Engineering)
5. UML Sequence Diagram for beginner with Solved Example in Hindi | SOOAD Series
(Last moment tuitions)
6. UML Diagrams Full Course (Unified Modeling Language)
(freeCodeCamp.org)
Top Articles
Latest Posts
Article information

Author: Merrill Bechtelar CPA

Last Updated: 04/26/2023

Views: 5773

Rating: 5 / 5 (70 voted)

Reviews: 93% of readers found this page helpful

Author information

Name: Merrill Bechtelar CPA

Birthday: 1996-05-19

Address: Apt. 114 873 White Lodge, Libbyfurt, CA 93006

Phone: +5983010455207

Job: Legacy Representative

Hobby: Blacksmithing, Urban exploration, Sudoku, Slacklining, Creative writing, Community, Letterboxing

Introduction: My name is Merrill Bechtelar CPA, I am a clean, agreeable, glorious, magnificent, witty, enchanting, comfortable person who loves writing and wants to share my knowledge and understanding with you.