Mermaid gitgraph generates style without IDs

[kloud]

Steps to reproduce

1. Paste an svg into a note as text (not as attachment)
2. Create a mermaid gitgraph diagram
3. Watch svg being destroyed

Expected result

Svg looks normal

Actual result

Svg colors change, breaking it

Environment

SYSTEM INFO:
Obsidian version: v1.1.16
Installer version: v1.1.16
Operating system: #1 SMP PREEMPT_DYNAMIC Sat, 01 Apr 2023 22:56:52 +0000 6.2.9-arch1-1.1
Login status: not logged in
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: none
Snippets enabled: 0
Restricted mode: off
Plugins installed: 0
Plugins enabled: 0

RECOMMENDATIONS:
none

---

Additional information

Here is a note to reproduce the bug:

Test.zip (1.2 KB)

[WhiteNoise]

This is not a bug. See if you can figure out why it happens and how to avoid it (hint: it’s the css classes).

[kloud]

The only way i can avoid it is by either deleting the gitgraph diagram or by deleting this selector:

And this selector

Which come from this <style> tag from mermaid (why is it even applying outside of mermaid div block?)

I could also strip all the classes from the svg but this will stop me from applying dynamic theming to those svgs in the future.

I think mermaid styles should not be applied outside of the graph scope (the svg of the graph has an id)

Most styles are properly prepended with the id of the graph

But some are not, which breaks stuff

[kloud]

edit: stripping all the classes still results in broken svgs

Some selectors from mermaid like this one:

g>g>circle, g>g>path {
    stroke: var(--background-accent)
}

Break stuff regardless of the classes

[kloud]

@WhiteNoise Why was this moved to Help? I clearly explained why this is a bug, mermaid is provided by obsidian itself, and removing classes didn’t help, this can only be fixed from your side. Css selectors from mermaid should not leak to parent elements

[WhiteNoise]

@kloud

Most styles are properly prepended with the id of the graph

This is an upstream problem of the mermaid style generator

[kloud]

Should I report it to here: Issues · mermaid-js/mermaid · GitHub then?

[WhiteNoise]

we did it already

[kloud]

Great

[WhiteNoise]

will be fixed v1.4