Significant layout change between 11.12.0 and 12.0.0

[nielsbasjes]

I have created some tooling that generates mermaid diagrams that are then converted into SVG and put on a website. When trying to update from the older 11.12.0 to the latest 12.0.0 version I ran into serious changes in the visual end result.

My key question: What am I doing wrong and how should I fix it?

My need: I want a simple set of boxes with names in them.

The generated code currently looks like this:

graph TB

subgraph A["Foo"]
  subgraph B["Foo - Foo"]
    subgraph C["Foo & Foo & Foo"]
    end
  end
  subgraph D["Foo - Bar"]
    subgraph E["Foo & Bar & Foo"]
    end
  end
end

In version 11.12.0 the resulting output looks like what I want:

In version 12.0.0 is looks like this:

What am I doing wrong?

[nielsbasjes]

Also:

• The file size went from ~10KB to ~200KB because fonts are included.
• The https://mermaid.ai/live/ and https://mermaid.live/ use different mermaid versions and show this difference very clearly.

[DavidSeptimus]

How are you saving the diagram? I tried the Download SVG action from the actions drawer and it saved as a ~28kb file without the default mermaid.live font included.

As for layout, the default changed in 12.0.0 from dagre to the newly bundled ELK (previously required a plugin.

Change it back with the following frontmatter:

---
config:
  layout: dagre
---

[DavidSeptimus]

To reproduce the exact old output, also change the look and theme:

---
config:
  layout: dagre
  theme: default
  look: classic
---

[nielsbasjes]

Thanks!
So the way I build the SVG files is by using the docker image.

Relevant parts of my script (bash on Linux):

MERMAID_VERSION=latest
# https://github.com/mermaid-js/mermaid-cli
MERMAID_CLI_DOCKER=minlag/mermaid-cli:${MERMAID_VERSION}
...
for MMD in *.mmd;
do
  IMG="${MMD//.mmd/.svg}"
  echo "Converting ${MMD} to ${IMG}"
  docker run --rm -u "$(id -u):$(id -g)" -v ./:/data ${MERMAID_CLI_DOCKER} -i "${MMD}" -o "${IMG}"
done

In the old situation the resulting SVG files were about 5-10KiB and now they are about 200KiB.
Looking in those files I noticed that most likely the size difference is cause by some fonts being included IN the SVG files.

There is a copyright noticed in the SVG SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
And I see 4 times something like this (which takes up about 167KiB in size):

@font-face { font-family: "Recursive Variable"; font-style: normal; font-display: swap; font-weight: 300 1000; 
src: url("data:font/woff2;base64,d09GMgABAAAAAAfcABMAAAAA....4U4AAAA=") format("woff2-variations"); 
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

Any way to avoid these being included?

[nielsbasjes]

I put this up as a separate question https://github.com/orgs/mermaid-js/discussions/8325