Mermaid wraps an HTML label only when its measured width equals the
wrapping width exactly. At some browser zoom levels (e.g. 90% and 175% in
Chrome) getBoundingClientRect returns 200.00001 instead of 200, so long
labels stay on one line and are clipped by the foreignObject. Patch Mermaid
to compare the rounded width.
Mermaid's block layout keeps a d3 selection on each block's size and then
JSON.stringifies the blocks for a debug log. The selection references
<html>, which React hydrates with circular fiber properties, so rendering
throws and the block falls back to a plain code block. Patch Mermaid to
drop the unused selection, and version the runtime URL by patch hash so
cached runtimes are not reused.
Peter White