Mermaid rendering problem / SVG foreignObject


I was playing with the chrome inspector to style mermaid diagrams and I’ve found a bug, likely in your current Electron version : SVG node foreignObject does not render its content when using attribute position="fixed"

Steps to reproduce

Try to render a user journey diagram from the mermaid docs

    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

Expected result

The rendered diagram with text nodes. Colors problems are fine, I can deal with them using CSS.

Actual result

The diagram is rendered but without text nodes. This isn’t a color problem but likely a bug with the SVG rendering engine (see screenshots)

Chromium 88.0.4324.96 display this correctly.


  • Operating system: Linux
  • Obsidian version: 0.11.0

Additional information

1 Like

Not sure which installer build do you have it installed. We are using electron 11.2. in 0.11. Anyway, if this fixed has been fixed in chrome 88, we will get it once electron 12 is rolled out.

I’m running ArchLinux and Obsidian is installed via AUR, relevant package came from


Understood for the Electron update, any ETA for this to happen ?

when electron 12 will be officially released, we will update within 3 weeks.

Ok, wait & see :wink: In the meantime I played a bit with VSCode and a mermaid extension, everything is working as intended. Is there a way to check the Electron version from the inspector ?
The rendering seems to be handled differently though, I can’t navigate to the SVG nodes in the inspector.

Will be fixed in 0.12.5

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.