mdx-mermaid

Plug and play Mermaid in MDX

Use Mermaid in .md, .mdx, .jsx and .tsx files with ease.

Based off the answer here by unknown.

Quick start with Docusaurus

Install mdx-mermaid and mermaid

mermaid is a peer dependency so you can specify the version to use

yarn add mdx-mermaid mermaid

Update docusaurus.config.js

 presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          remarkPlugins: [require('mdx-mermaid')],

Use code blocks in .md or .mdx files:

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

Use the component in .mdx, .jsx or .tsx files:

import { Mermaid } from 'mdx-mermaid/Mermaid';

<Mermaid chart={`graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
`} />

There are more examples here