SebastianJS

styled-flowchart

1 sample 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
SebastianJS pane shows

Example 1

match
0.004px mean node offset over 4 nodes0.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 
%%{init: {'theme':'base', 'themeVariables': { 'primaryColor':'#0000ff','primaryTextColor':'#ff0000'}}}%%
flowchart LR
    A[myClass1]:::myClass1 --> B[default]
    A --> C[default]
    B --> D[myClass2]:::myClass2
    C --> D
    
    classDef default stroke-width:2px,fill:none,stroke:silver
    classDef myClass1 color:#0000ff
    classDef myClass2 stroke:#0000ff,fill:#ccccff