mindmap

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.50% 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

mindmap
root
    child1((Circle))
        grandchild 1
        grandchild 2
    child2(Round rectangle)
        grandchild 3
        grandchild 4
    child3[Square]
        grandchild 5
        ::icon(mdi mdi-fire)
        gc6((grandchild 6))
        ::icon(mdi mdi-fire)
        gc7((grandgrandchild 8))

Example 2

match

0.12% 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

mindmap
root[A root with a long text that wraps to keep the node size in check]