Display mermaid diagrams in mdx files.
npm install mdx-mermaidPlug 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.
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';
A-->B;
A-->C;
B-->D;
C-->D;} />``
There are more examples [here][examples]
[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/