Generated SVG has static IDs which cause issues when there are two SVGs

[ittayd]

Describe the bug
In the attached (zipped) html, there are two SVGs generated by mermaid. Loaded in a browser they will render with arrowheads. However, if the first SVG style has 'display:none' then not only does it disappear (as expected), but also the arrow heads in the second SVG. The reason is that they are referenced as #arrowhead and so the browser finds them in the first SVG, which is not displayed, hence they are not displayed.

svgs.zip

Expected behavior
Create unique IDs. E.g. use the id passed to render as prefix.
(Note: there is another generic solution which is to wrap each SVG in an iframe via srcdoc. However, then styling in the outer doc can't be applied to the svg elements which for my context of static HTML files is not good)

Screenshots
When both are visible:

When first one is not displayed:

[dwhelan]

I am working on #1871 and the root cause was non-unique ids for the SVG markers. And the fix for it was exactly what you suggested.

[williamthome]

@dwhelan Maybe it's also related to this? livebook-dev/livebook#1440

[dwhelan]

Yes @williamthome, I believe this is root cause of what you saw with livebook-dev/livebook#1440. I do not have an ETA on getting that merged but will respond here when it is done. Is it urgent for you?

[williamthome]

Ah, sure. It's ok for me. I have no urgency.

[bjarkih]

This is pretty urgent for me - would love to see your fix get merged in as soon as feasible @dwhelan 🙏🏻

[sidharthv96]

Fixed in #4825