Can't render mindmap mermaid diagrams #9032
Description
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 clearoryarn clearcommand. - I have tried
rm -rf node_modules yarn.lock package-lock.jsonand 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
It looks like the mindmap Mermaid diagram doesn't work with the current Docusaurus integrations. Other diagrams do work as expected.
Reproducible demo
https://github.com/Quansight-Labs/cf-infra-docs
Steps to reproduce
I followed the instructions for Mermaid diagrams and modified my Docusaurus configuration accordingly (see this PR).
I would have expected the rendering to work out of the box after those changes, but it doesn't.
Expected behavior
Get the same diagram as available in mermaid.live
Actual behavior
You first see this warning:
Clicking on Try Again gets you to a rendered page with a faulty diagram:
Locally, you see this error message:
ERROR
Diagram is a promise. Use renderAsync.
at Object.render (webpack-internal:///./node_modules/mermaid/dist/mermaid-ae477ddf.js:29923:13)
at eval (webpack-internal:///./node_modules/@docusaurus/theme-mermaid/lib/client/index.js:44:58)
at mountMemo (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:15846:19)
at Object.useMemo (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:16219:16)
at useMemo (webpack-internal:///./node_modules/react/cjs/react.development.js:1532:21)
at useMermaidSvg (webpack-internal:///./node_modules/@docusaurus/theme-mermaid/lib/client/index.js:21:168)
at MermaidDiagram (webpack-internal:///./node_modules/@docusaurus/theme-mermaid/lib/theme/Mermaid/index.js:14:139)
at renderWithHooks (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:14985:18)
at mountIndeterminateComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17811:13)
at beginWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19049:16)
ERROR
Diagram mindmap already registered.
at registerDiagram (webpack-internal:///./node_modules/mermaid/dist/mermaid-ae477ddf.js:7474:11)
at eval (webpack-internal:///./node_modules/mermaid/dist/mermaid-ae477ddf.js:29705:7)
It sounds like this discussion, which led to this commit. I assume something similar is needed here? I am not an expert in anything JavaScript, sorry 😬
Your environment
- Public source code: https://github.com/Quansight-Labs/cf-infra-docs
- Public site URL: https://cf-infra-docs.netlify.app/docs/reference/infrastructure/diagrams/
- Docusaurus version used: 2.4.1
- Environment name and version (e.g. Chrome 89, Node.js 16.4): 18.11.0
- Operating system and version (e.g. Ubuntu 20.04.2 LTS): MacOS Ventura 13.3
Self-service
- I'd be willing to fix this bug myself.