# mermaid_render: Fix overlapping text in diagrams with long labels \(\#59140\) · gitcafe/zed

[View on GitCafe](https://git.cafe/gitcafe/zed/commit/49eb6b2de732d460321c189ce4a0e99820fd347e)

Repository: [gitcafe/zed](https://git.cafe/gitcafe/zed)

Visibility: public

Requested revision: 49eb6b2de732d460321c189ce4a0e99820fd347e

Requested commit: 49eb6b2de732d460321c189ce4a0e99820fd347e

Commit: 49eb6b2de732d460321c189ce4a0e99820fd347e

Tree: 439917a1fc738ea99ae5763afe61259ba6ae0cfb

Author: Eric Holk

Committer: GitHub

## Message

```
mermaid_render: Fix overlapping text in diagrams with long labels (#59140)

Mermaid diagrams with long node labels rendered as an unreadable jumble:
each label was painted as one long line over a box sized for wrapped
text, overflowing into neighboring nodes. With this change, labels wrap
to the box width the layout computed.

**Root cause:** mermaid's default `htmlLabels: true` makes merman emit
labels as HTML inside `<foreignObject>`, which resvg cannot rasterize.
merman's resvg-safe pipeline replaces each one with a single-line
`<text>` fallback that only honors explicit `<br>` breaks, so
soft-wrapped labels collapse onto one long line — while the node boxes
were laid out for the wrapped text.

**Fix:** disable HTML labels in the site config (both the top-level key,
which merman reads for node labels, and `flowchart.htmlLabels`, which it
reads for edge labels). merman then emits native SVG `<text>`/`<tspan>`
labels wrapped to the same measured width the layout used, and the
foreignObject fallback never runs for these diagrams.

One behavior preserved deliberately: a literal `\n` in label text used
to become a line break as a side effect of the foreignObject fallback
(`fallback.rs` converts `\n` when flattening HTML labels).
`render_mermaid` now normalizes `\n` to `<br/>` before rendering so the
native path keeps that behavior; the existing
`backslash_n_converted_to_line_break` test covers it.

Side effect: class diagram member text also switches from the lossy
fallback to native SVG text; the accent-class test was updated
accordingly (accent classes now land directly on `text`/`tspan`
elements).

Verified with `cargo nextest run -p mermaid_render`, `-p markdown`,
`script/clippy -p mermaid_render`, and `cargo fmt --check`.

Release Notes:

- Fixed mermaid diagram labels overflowing and overlapping nodes when
long labels wrap

---------

Co-authored-by: cameron <cameron.studdstreet@gmail.com>
```

## Parents

- [34cd17ff5e29b8eef9c48c69c2c56d24a770addc](https://git.cafe/gitcafe/zed/commit/34cd17ff5e29b8eef9c48c69c2c56d24a770addc?format=markdown)

[Source at this commit](https://git.cafe/gitcafe/zed/tree/49eb6b2de732d460321c189ce4a0e99820fd347e?format=markdown)