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

yarn add mdx-mermaid@^v1.3.0 mermaid

Update docusaurus.config.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:

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