<CodeBlock /> with mermaid

[Its-Just-Nans]

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;

Loading

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)

[slorber]

Diagrams can be rendered using Mermaid in a code block.

This is written in the Markdown features section, which implicitly means "markdown code block", not <CodeBlock/>.

<CodeBlock> is a component to render a code block, which Mermaid diagrams are not, because we don't display a syntax highlighted version of the diagram spec, but the actual diagram instead.

The component you are looking for is more likely this one, which takes a diagram spec a children, and renders an actual diagram.

import Mermaid from '@theme/Mermaid';

[Its-Just-Nans]

@slorber More likely from value props : https://github.com/facebook/docusaurus/blob/c1ac06768bd3cb997c11931209a97e8c9574c11d/packages/docusaurus-theme-mermaid/src/theme/Mermaid/index.tsx#L43C10-L43C25

Made a PR for docs : #9816