@jakxz/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.

This fork is intentionally limited to only replace mermaid blocks with the Mermaid react component. It's optimized for use with mdx v2 and docusaurus, which is technically not officially supported. Proceed at your own risk.

yarn add @jakxz/mdx-mermaid mermaid docusaurus-theme-mdx-v2

Update docusaurus.config.js like so:

const mermaid = require("@jakxz/mdx-mermaid");

module.exports = {
  themes: ["mdx-v2"],
  presets: [
    [
      "classic",
      {
        docs: {
          remarkPlugins: [mermaid],
        },
      },
    ],
  ],
};

You'll need to make the Mermaid component available to your theme. At time of writing I am just using this patch for the docusaurus-theme-mdx-v2 package:

diff --git a/node_modules/docusaurus-theme-mdx-v2/theme/MDXContent/index.js b/node_modules/docusaurus-theme-mdx-v2/theme/MDXContent/index.js
index ec7b4c8..ab4aa5e 100644
--- a/node_modules/docusaurus-theme-mdx-v2/theme/MDXContent/index.js
+++ b/node_modules/docusaurus-theme-mdx-v2/theme/MDXContent/index.js
@@ -1,7 +1,12 @@
-import React from "react";
-import { MDXProvider } from "@mdx-js/react";
-import MDXComponents from "@theme/MDXComponents";
+import React from 'react';
+import {MDXProvider} from '@mdx-js/react';
+import MDXComponents from '@theme/MDXComponents';
+import {Mermaid} from '@jakxz/mdx-mermaid/Mermaid';
 
-export default function MDXContent({ children }) {
-  return <MDXProvider components={MDXComponents}>{children}</MDXProvider>;
+export default function MDXContent({children}) {
+  return (
+    <MDXProvider components={{...MDXComponents, Mermaid}}>
+      {children}
+    </MDXProvider>
+  );
 }

Then, use code blocks in .md or .mdx files:

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

OR, just use the component in .mdx, .jsx or .tsx files:

import { Mermaid } from "@jakxz/mdx-mermaid/Mermaid";

<Mermaid
  chart={`graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
`}
/>;

There are more examples here.

License

MIT Jason Kurian

Original: MIT © Samuel Wall