mdx-mermaid

Plug and play Mermaid in MDX

![npm version][npm]
![GitHub license][license]
![PRs Welcome][pr]

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

Based off the answer [here][inspire] by unknown.

More documentation available [here][documentation]

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

``bash
yarn add mdx-mermaid mermaid
`

Configure the plugin:

`js
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:

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

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

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

graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
} />
``

There are more examples [here][examples]

License

[MIT][license] © [Samuel Wall][author]

[license]: https://github.com/sjwall/mdx-mermaid/blob/main/license

[author]: https://samuelwall.co.uk

[npm]: https://www.npmjs.com/package/mdx-mermaid

[mermaid]: http://mermaid-js.github.io/mermaid/

[inspire]: https://github.com/facebook/docusaurus/issues/1258#issuecomment-594393744

[pr]: http://makeapullrequest.com

[examples]: https://sjwall.github.io/mdx-mermaid/docs/examples/

[documentation]: https://sjwall.github.io/mdx-mermaid/