Mermaid diagram shift page when opening a link with anchor

[AKiedis]

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

When opening the provided link in the step to reproduce, which points to a page containing a Mermaid diagram, the page shifts or scrolls due to the presence of the graphic, causing it not to land precisely at the anchor specified in the URL.
Every page with a mermaid diagram in my personal project suffer from the same issue.

Reproducible demo

No response

Steps to reproduce

1. Open the following URL: https://docusaurus.io/fr/docs/next/markdown-features/diagrams#configuration
2. Observe the page behavior as it loads.

Expected behavior

The page should load and position itself precisely at the anchor specified in the URL, allowing users to land directly at the intended section.

Actual behavior

Upon opening the URL, the page shifts or scrolls due to the presence of the Mermaid diagram, causing it to miss the anchor and land at an incorrect position.

The length of the shift depends on the length of the graphic.

Your environment

• Public source code:
• Public site URL:
• Docusaurus version used:
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome and Firefox
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 11

Self-service

• I'd be willing to fix this bug myself.

[slorber]

Yes, Mermaid diagrams do not support server rendering in Node.js and produce layout shifts after React hydration. That is tracked in #8299

The only way we could fix this is to spawn a real browser at build time (like what https://github.com/remcohaszing/rehype-mermaid does) but I doubt it would be a good idea, and I'd prefer Mermaid to fix their actual server support instead.

I don't want to introduce official support for a thing we'll have to remove once Mermaid supports server-side-rendering. We provide a way to pass remark/rehype plugins, and a plugin API, so if you are really motivated to fix this issue, the problem can be worked around in userland.

We might explore adding support for D2 in the future, which looks like a modern alternative to Mermaid, supporting server-side-rendering (see discussions #9608)