sequence

12 samples from the mermaid demo corpus, rendered both ways. The three SebastianJS forms come off one layout, so the measurements below hold for all of them.

SebastianJS pane shows

Example 1

match
0.14% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
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

match
0.20% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
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

match
0.14% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
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

match
0.00% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
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

match
0.00% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
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

match
0.10% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
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

match
0.00% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
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

match
0.20% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
sequenceDiagram
actor Alice
actor John
Alice-xJohn: Hello John, how are you?
John--xAlice: Great!

Example 9

differs
9.61% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
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

differs
13.33% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
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

match
0.20% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
sequenceDiagram
actor Alice
actor John
Alice-xJohn: Hello John, how are you?
John--xAlice: Great!

Example 12

match
0.00% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
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