Mermaid diagrams do not render text nodes (empty foreignObject)

[pwizla]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

Docusaurus 3.5.2 (but in my testings it's reproducible with many other, if not all, 3.x.x versions)

Mermaid diagrams are rendered with empty text nodes. foreignObject DOM nodes are empty.

Reproducible on new.docusaurus.io: https://codesandbox.io/p/devbox/dawn-darkness-docusaurus?privacy=public

I'm in the process of upgrading to Docusaurus 3. Mermaid diagrams were working perfectly with Docusaurus v3.5.1 a few weeks ago. Today, they don't seem to work as expected with 3.5.x, and, weirdly enough, I can't have them work in any other 3.x.x version either, including versions that were previously rendering diagrams perfectly 🤔

Reproducible demo

https://codesandbox.io/p/devbox/dawn-darkness-docusaurus?privacy=public

Steps to reproduce

1. Create new project

2. Ensure mermaid theme is in the dependencies ("@docusaurus/theme-mermaid": "3.5.2",), and Mermaid is properly configured in docusaurus.config.js:

    markdown: {
      mermaid:  true,
    },
   
    themes: ['@docusaurus/theme-mermaid'],
   

3. Insert a basic Mermaid diagram in a Markdown file, for instance at the top of the "Congratulations!" page in CodeSandbox. For instance like in the following excerpt:

   # Congratulations!
   
   You have just learned the **basics of Docusaurus** and made some changes to the **initial template**.
   
    ```mermaid
    graph TD
      A --> B
    ```
   

4. Notice how the page renders the diagram but without any text, and inspect the DOM to notice that foreignObject nodes are empty, while they should contain text elements in a diagram properly rendered.

Expected behavior

Properly rendered diagram with text nodes
It shouldn't be a Mermaid syntax issue because our original diagram, working on Docusaurus 2.xx and on our live website, is also working on mermaid.live.

Actual behavior

Empty text nodes:

No error in the console (DevTools or server) 🤷

Your environment

• Public source code: github.com/strapi/documentation/ Go to the repo/docu3upgrade branch to see a non-working version of Mermaid, and to the main branch or on our live website (Docusaurus 2.x) to see it work 😄
• Public site URL: see this page for instance: https://documentation-git-repo-docu3upgrade-strapijs.vercel.app/dev-docs/api/content-api where empty text nodes are rendered
• Docusaurus version used: 3.5.2
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Usually Firefox 130.x but the bug is reproducible on Chrome and Safari as well
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS Sonoma 14.5 for me, but colleagues with different OSes reproduced the issue

Self-service

• I'd be willing to fix this bug myself. (if I find a way to fix it 😄 , but for now I feel stuck 😅)

[tramoni-vl]

I'm having the same issue and it was even working yesterday 🤷🏻‍♂️
So maybe a dependency somewhere is causing the havoc

[slorber]

Note: your codesandbox is not a repro and doesn't contain any Mermaid-related code.

But I can reproduce on Stackblitz v3.5.2 with mermaid@10.9.1 dependency (latest 10.x)

It worked on our website under 10.4.0 and now that we upgraded to 11.2.1 (Docusaurus v3.6 soon) it keeps working so it is very likely a dependency that broke this but maybe not mermaid directly.

https://docusaurus.io/docs/markdown-features/diagrams#usage

[tramoni-vl]

Note: your codesandbox is not a repro and doesn't contain any Mermaid-related code.

But I can reproduce on Stackblitz v3.5.2 with mermaid@10.9.1 dependency (latest 10.x)

It worked on our website under 10.4.0 and now that we upgraded to 11.2.1 (Docusaurus v3.6 soon) it keeps working so it is very likely a dependency that broke this but maybe not mermaid directly.

https://docusaurus.io/docs/markdown-features/diagrams#usage

Yhea i suppose that if you try to rebuild your current working website at this date, the diagrams will do not show any texts

[slorber]

Indeed it's a bug in a transitive dependency that was released 1d ago.

DOMPurify v3.1.7 breaks Mermaid.

You can fix it by downgrading to v3.1.6 with package manager features, for example Yarn resolutions:

  "resolutions": {
    "dompurify": "3.1.6"
  },

I created issues here:

• DOMPurify: DOMPurify 3.1.7 breaks Mermaid diagrams using foreignObject cure53/DOMPurify#1002
• Mermaid: Mermaid diagrams broken due to DOMPurify release v3.1.7 (empty <foreignObject) mermaid-js/mermaid#5904

[pwizla]

Thank you very much, @slorber! Pinning dompurify to 3.1.6 worked for me 🥳
Would you like me to close this issue now, or shall we keep it open for reference and/or until DOMPurify 3.1.8 is released with the new option?

[slorber]

Np

We can keep it open until we are able to make it work by default for all newly initialized sites. We are waiting for Mermaid's position to figure out what to do.

Using yarn resolution works but we don't want to keep it this way forever, it's not good DX to have to ask users to do this.

[slorber]

Mermaid pinned the deps in https://github.com/mermaid-js/mermaid/releases/tag/v10.9.2

And a v11 release with this pinning is also planned (but Docusaurus only upgrades to v11 in the upcoming minor so we have time to wait).

The problem should be fixed for all Docusaurus sites <= v3.5 as long as they regenerate their lockfile or upgrade mermaid v10.x to latest.

Let me know if that works for you and if we can close

[pwizla]

Yay, this works! 🥳 Thank you and thanks Mermaid team! 🤗
I'm closing the issue now ✅