Plug and play Mermaid in MDX

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

Based off the answer here by unknown.

More documentation available here

Use version ^1.3.0 for @mdxjs/mdx v1 and Docusaurus.

Use version ^2.0.0 for @mdxjs/mdx v2.

Install mdx-mermaid and mermaid

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

yarn add mdx-mermaid@^v1.3.0 mermaid

Update docusaurus.config.js

async function createConfig() {
  const mdxMermaid = await import('mdx-mermaid')

  return {
    presets: [
      [
        'classic',
        {
          docs: {
            remarkPlugins: [mdxMermaid.default],
          }
        }
      ]
    ]
  }
}

module.exports = createConfig;

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

MIT © Samuel Wall