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:
Type | Description |
---|---|
-> | Solid line without arrow |
--> | Dotted line without arrow |
->> | Solid line with arrowhead |
-->> | Dotted line with arrowhead |
-x | Solid line with a cross at the end |
--x | Dotted 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:
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
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
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
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 #
Class | Description |
---|---|
actor | Style for the actor box at the top of the diagram. |
text.actor | Styles for text in the actor box at the top of the diagram. |
actor-line | The vertical line for an actor. |
messageLine0 | Styles for the solid message line. |
messageLine1 | Styles for the dotted message line. |
messageText | Defines styles for the text on the message arrows. |
labelBox | Defines styles label to left in a loop. |
labelText | Styles for the text in label for loops. |
loopText | Styles for the text in the loop box. |
loopLine | Defines styles for the lines in the loop box. |
note | Styles for the note box. |
noteText | Styles 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: #
Parameter | Description | Default value |
---|---|---|
mirrorActors | Turns on/off the rendering of actors below the diagram as well as above it | false |
bottomMarginAdj | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1 |
actorFontSize | Sets the font size for the actor's description | 14 |
actorFontFamily | Sets the font family for the actor's description | "Open Sans", sans-serif |
actorFontWeight | Sets the font weight for the actor's description | "Open Sans", sans-serif |
noteFontSize | Sets the font size for actor-attached notes | 14 |
noteFontFamily | Sets the font family for actor-attached notes | "trebuchet ms", verdana, arial |
noteFontWeight | Sets the font weight for actor-attached notes | "trebuchet ms", verdana, arial |
noteAlign | Sets the text alignment for text in actor-attached notes | center |
messageFontSize | Sets the font size for actor<->actor messages | 16 |
messageFontFamily | Sets the font family for actor<->actor messages | "trebuchet ms", verdana, arial |
messageFontWeight | Sets 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? ›- Arithmetic Sequences.
- Geometric Sequences.
- Harmonic Sequences.
- Fibonacci Numbers.
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 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 .
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? ›
- 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.
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.
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? ›- 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.
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? ›- 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.
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.
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.
- System flowchart.
- General flowchart.
- Detailed flowchart.
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.
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.