Quick Diagram

Quick Diagram

  • Docs
  • Editor

›Diagrams

Diagrams

  • Examples
  • Flow Chart
  • Sequence Diagram
  • Class Diagram
  • State Diagram
  • Entity Relationship Diagram
  • User Journey Diagram
  • Gantt Diagram
  • Pie Chart

Sequence Diagram

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

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

A note on nodes, the word "end" could potentially break the diagram. 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:

JohnAliceHello John, how are you?Great!JohnAlice
sequenceDiagram
    participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

Aliases

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

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

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 (async)
--xDotted line with a cross at the end (async)

Activations

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

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

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

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

Activations can be stacked for same actor:

AliceJohnHello John, how are you?John, can you hear me?Hi Alice, I can hear you!I feel great!AliceJohn
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

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:

JohnText in noteJohn
sequenceDiagram
    participant John
    Note right of John: Text in note

It is also possible to create notes spanning two participants:

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

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:

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

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:

AliceBobHello Bob, how are you?Not so good :(Feeling fresh like a daisyalt[is sick][is well]Thanks for askingopt[Extra response]AliceBob
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

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:

AliceBobJohnHello guys!Hello guys!par[Alice to Bob][Alice to John]Hi Alice!Hi Alice!AliceBobJohn
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!

It is also possible to nest parallel blocks.

AliceBobJohnCharlieDianaGo help JohnI want this done todayCan we do this today?Can you help us today?par[John to Charlie][John to Diana]par[Alice to Bob][Alice to John]AliceBobJohnCharlieDiana
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

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:

AliceJohnAlice calls John.Hello John, how are you?John, can you hear me?Hi Alice, I can hear you!I feel great!Did you want to go to the game tonight?Yeah! See you there.AliceJohn
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.

Comments

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

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

Sequence Numbers

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

AliceJohnBobHello John, how are you?1Fight against hypochondria2loop[Healthcheck]Rational thoughts!Great!3How about you?4Jolly good!5AliceJohnBob
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!
← Flow ChartClass Diagram →
  • Syntax
    • Participants
    • Aliases
  • Messages
  • Activations
  • Notes
  • Loops
  • Alt
  • Parallel
  • Background Highlighting
  • Comments
  • Sequence Numbers
Facebook Open Source
Copyright © 2021 Quick Diagram