dataflowchart

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.015px mean node offset over 3 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

flowchart LR
accTitle: A simple linear flowchart.
accDescr: A Database has input to a circle System has output to a square Customer.
DataStore[|borders:tb|Database] -->|input| Process((System)) -->|output| Entity[Customer];

Example 2

match

0.017px mean node offset over 6 nodes0.00% 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

flowchart TD
allSides[ stroke all sides ];
allSides2[|borders:ltrb| stroke all sides ];
rbSides[|borders:rb| stroke right and bottom sides ];
ltSides[|borders:lt| stroke left and top sides ];
lrSides[|borders:lr| stroke left and right sides ];
noSide[|borders:no| stroke no side ];