Mermaid v10.2.0 changed some behavior for htmlLabels with embedded SVG images. The width=100% is now set in the node CSS, which normally scales the images to the width of the text, but for this SVG, it seems to crop it. See https://github.com/mermaid-js/mermaid/issues/4455.
Setting a well-defined viewBox attribute to our SVG fixes this.
:bookmark_tabs: Summary
Mermaid v10.2.0 changed some behavior for
htmlLabels
with embedded SVG images. Thewidth=100%
is now set in the node CSS, which normally scales the images to the width of the text, but for this SVG, it seems to crop it. See https://github.com/mermaid-js/mermaid/issues/4455.Setting a well-defined
viewBox
attribute to our SVG fixes this.Resolves the visual regression discussed in https://github.com/mermaid-js/mermaid-cli/pull/541#issuecomment-1575789802
:straight_ruler: Design Decisions
Thanks to @Valentine14th for finding and recommending this fix! I've credited them as a co-author.
:clipboard: Tasks
Make sure you
master
branch