← Back to index

sequence

Example 1

SebastianJS (SVG)
../assets/sequence-1.svg
Mermaid (code)
sequenceDiagram
      accTitle: test the accTitle
      accDescr: Test a description

participant Alice
participant Bob
participant John as JohnSecond Line
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
autonumber 10 10
rect rgb(200, 220, 100)
rect rgb(200, 255, 200)

      Alice ->> Bob: Hello Bob, how are you?
      Bob-->>John: How about you John?
      end

      Bob--x Alice: I am good thanks!
      Bob-x John: I am good thanks!
      Note right of John: John thinks a longlong time, so longthat the text doesnot fit on a row.

      Bob-->Alice: Checking with John...
      Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
      Bob-x John: Hey John - we're still waiting to knowhow you're doing
      Note over John:nowrap: John's trying hard not to break his train of thought.
      Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
      Note over John: After a few more moments, Johnfinally snaps out of it.
      end

      autonumber off
      alt either this
      Alice->>+John: Yes
      John-->>-Alice: OK
      else or this
      autonumber
      Alice->>John: No
      else or this will happen
      Alice->John: Maybe
      end
      autonumber 200
      par this happens in parallel
      Alice -->> Bob: Parallel message 1
      and
      Alice -->> John: Parallel message 2
      end

Example 2

SebastianJS (SVG)
../assets/sequence-2.svg
Mermaid (code)
---
title: With forced menus
config:
  sequence:
    forceMenus: true
---
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!

Example 3

SebastianJS (SVG)
../assets/sequence-3.svg
Mermaid (code)
sequenceDiagram
  accTitle: Sequence diagram title is here
  accDescr: Hello friends

participant Alice
participant Bob
participant John as JohnSecond Line
rect rgb(200, 220, 100)
rect rgb(200, 255, 200)
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
end
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: John thinks a longlong time, so longthat the text doesnot fit on a row.
Bob-->Alice: Checking with John...
Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
Bob-x John: Hey John - we're still waiting to knowhow you're doing
Note over John:nowrap: John's trying hard not to break his train of thought.
Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
Note over John: After a few more moments, Johnfinally snaps out of it.
end
alt either this
Alice->>John: Yes
else or this
Alice->>John: No
else or this will happen
Alice->John: Maybe
end
par this happens in parallel
Alice -->> Bob: Parallel message 1
and
Alice -->> John: Parallel message 2
end

Example 4

SebastianJS (SVG)
../assets/sequence-4.svg
Mermaid (code)
sequenceDiagram
participant 1 as multilineusing #lt;br#gt;
participant 2 as multilineusing #lt;br/#gt;
participant 3 as multilineusing #lt;br /#gt;
participant 4 as multilineusing #lt;br /#gt;
1->>2: multilineusing #lt;br#gt;
note right of 2: multilineusing #lt;br#gt;
2->>3: multilineusing #lt;br/#gt;
note right of 3: multilineusing #lt;br/#gt;
3->>4: multilineusing #lt;br /#gt;
note right of 4: multilineusing #lt;br /#gt;
4->>1: multilineusing #lt;br /#gt;
note right of 1: multilineusing #lt;br /#gt;

Example 5

SebastianJS (SVG)
../assets/sequence-5.svg
Mermaid (code)
sequenceDiagram
autonumber
Alice->>John: Hello John,how are you?
autonumber 50 10
Alice->>John: John,can you hear me?
John-->>Alice: Hi Alice,I can hear you!
autonumber off
John-->>Alice: I feel great!

Example 6

SebastianJS (SVG)
Render failed: Option is not defined
Mermaid (code)
sequenceDiagram
box lightgreen Alice & John
participant A
participant J
end
box Another Group very very long description not wrapped
participant B
end
A->>J: Hello John, how are you?
J->>A: Great!
A->>B: Hello Bob, how are you ?

Example 7

SebastianJS (SVG)
../assets/sequence-7.svg
Mermaid (code)
sequenceDiagram
participant Alice
participant Bob
participant John
par_over Section title
  Alice ->> Bob: Message 1Second line
  Bob ->> John: Message 2
end
par_over Two linesection title
  Note over Alice: Alice note
  Note over Bob: Bob noteSecond line
  Note over John: John note
end
par_over Mixed section
  Alice ->> Bob: Message 1
  Note left of Bob: Alice/Bob Note
end

Example 8

SebastianJS (SVG)
../assets/sequence-8.svg
Mermaid (code)
sequenceDiagram
actor Alice
actor John
Alice-xJohn: Hello John, how are you?
John--xAlice: Great!

Example 9

SebastianJS (SVG)
../assets/sequence-9.svg
Mermaid (code)
sequenceDiagram
participant 1 as $$\frac{\lim_{x\rightarrow0}{\frac{1}{x}}}{\frac{-b\pm\sqrt{b^2-4ac}}{2a}}$$
participant 2 as $$\beta$$
participant 3 as $$\delta$$
participant 4 as $$\frac{\frac{\lim_{x\rightarrow0}{\frac{1}{x}}}{\frac{-b\pm\sqrt{b^2-4ac}}{2a}}}{\frac{\text{d}}{\text{d}x}{x^2}}$$
1->>2: $$\sqrt{2}$$
note right of 2: $$\frac{1+\frac{1+\frac{1+\frac{1}{2}}{2}}{2}}{2}+\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$
2->>3: $$\frac{\lim_{x\rightarrow0}{\frac{1}{x}}}{\frac{-b\pm\sqrt{b^2-4ac}}{2a}}$$
note right of 3: $$\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$
3->>4: $$\lim_{x\rightarrow0}{\frac{1}{x}}$$;
note right of 4: multiline
4->>1: multilineusing #lt;br /#gt;
note right of 1: multiline$$\frac{1}{2}$$3rd line

Example 10

SebastianJS (SVG)
Render failed: about:blank:1:22965: undefined entity.
Mermaid (code)
sequenceDiagram
autonumber
participant 1 as $$\alpha$$lex
participant 2 as $$\beta$$ob
participant 3 as $$\theta$$iffany
1->>2: Hello John, does  $$\frac{1}{2}+1=2$$?
loop $$\frac{1}{2}+1=2$$
    2->>2: $$\frac{1}{2}+1=\frac{3}{2}$$
end
Note right of 2: $$x = \begin{cases} 1 &\text{if } \frac{1}{2}+1=2 \\ 0 &\text{if } \frac{1}{2}+1\ne2 \end{cases}$$
2-->>1: $$\frac{1}{2}+1\ne2\implies 1$$
2->>3: $$\frac{\text{d}}{\text{d}x}{3x^2+2x+1}$$
3-->>2: $$6x+2$$

Example 11

SebastianJS (SVG)
../assets/sequence-11.svg
Mermaid (code)
sequenceDiagram
actor Alice
actor John
Alice-xJohn: Hello John, how are you?
John--xAlice: Great!

Example 12

SebastianJS (SVG)
../assets/sequence-12.svg
Mermaid (code)
sequenceDiagram
participant Alice
participant Bob
Alice<<->>Bob: Hello!
Alice<<->>Bob: Wow, we said that at the same time!
Bob<<-->>Alice: Bidirectional Arrows are so cool