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.

Use version ^2.0.0 for @mdxjs/mdx v2.

Warning: rehype-mermaidjs and remark-mermaidjs may better suit your use case.

Install mdx-mermaid and mermaid

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

yarn add mdx-mermaid mermaid

Configure the plugin:

import mdxMermaid from 'mdx-mermaid'
import {Mermaid} from 'mdx-mermaid/lib/Mermaid'

{
  remarkPlugins: [[mdxMermaid.default, {output: 'svg'}]],
  components: {mermaid: Mermaid, 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

For server-side rendering, the output mode can be set to svg. This renders the diagram at build time using puppeteer. This mode requires the optionalDependencies to be installed.

yarn add puppeteer estree-util-to-js estree-util-visit hast-util-from-html hast-util-to-estree mdast-util-from-markdown mdast-util-mdx micromark-extension-mdxjs

Configure the plugin:

import mdxMermaid from 'mdx-mermaid'

export default {
  remarkPlugins: [[mdxMermaid.default, {output: 'svg'}]]
}

MIT © Samuel Wall