SebastianJS

treemap

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

12

Example 1

close
2.01% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
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

close
2.01% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
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