SebastianJS

dataflowchart

2 samples from the mermaid demo corpus, rendered both ways.

12

Example 1

match
0.015px mean node offset over 3 nodes0.01% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
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
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
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 ];