example

2 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.

1 2

SebastianJS pane shows SVGSVG, text tracedPNG

Example 1

match

0.008px mean node offset over 4 nodes0.01% width difference

SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry

mermaid-cliheadless Chrome

Mermaid source

graph TB
a --> b
a --> c
b --> d
c --> d

Example 2

not measurable

No comparable nodes — compare visually

SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry

mermaid-cliheadless Chrome

Mermaid source

info