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.

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.

Quick start

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

License

MIT © Samuel Wall