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 and Docusaurus.

Use version ^2.0.0 for @mdxjs/mdx v2.

Quick start with Docusaurus

Install mdx-mermaid and mermaid

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

``bash
yarn add mdx-mermaid@^v1.3.0 mermaid
`

Update docusaurus.config.js

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

``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";

chart={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/