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

Hello,

With a normal mermaid config, this code is not rendering the mermaid graph (see repro link below)

import CodeBlock from '@theme/CodeBlock';
<CodeBlock language="mermaid">
{`graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
`}
</CodeBlock>

The actual mermaid graph example:

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

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

Docs says

Diagrams can be rendered using [Mermaid](https://mermaid-js.github.io/mermaid/) in a code block.

but apparently not in :/

Reproducible demo

https://codesandbox.io/p/devbox/divine-framework-99ytrv

Steps to reproduce

copy this in a docusaurus with mermaid

import CodeBlock from '@theme/CodeBlock';

<CodeBlock language="mermaid">
{`graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
`}
</CodeBlock>

Expected behavior

Render the graph using mermaid

Actual behavior

It shows a basic code block like

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Self-service

• I'd be willing to fix this bug myself. (I don't know docusaurus so much)