treemap

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

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

treemap
"Root"
    "Branch 1"
        "Leaf 1.1": 10
        "Leaf 1.2": 15
    "Branch 2"
        "Branch 2.1"
            "Leaf 2.1.1": 20
            "Leaf 2.1.2": 25
        "Leaf 2.2": 25
        "Leaf 2.3": 30

Example 2

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

treemap
"Technology Stack"
    "Frontend"
        "React": 35
        "CSS": 15
        "HTML": 10
    "Backend"
        "Node.js": 25
        "Express": 10
        "MongoDB": 15
    "DevOps"
        "Docker": 10
        "Kubernetes": 15
        "CI/CD": 5