sjwall / mdx-mermaid

Plug and play Mermaid in MDX

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.

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

yarn add mdx-mermaid mermaid

Configure the plugin:

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:

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

mdx-mermaid's Issues

How to use mdx-mermaid with @mdx-js/mdx ?

Hello @sjwall, thanks for your work !

Describe the bug

I want to use mdx-mermaid with @mdx-js/mdx but there is no svg output.

To Reproduce

git clone https://github.com/johackim/test-mdx-mermaid
cd test-mdx-mermaid
yarn
npm run build
node ./dist/esm/index.mjs

// index.js

import fs from 'fs';
import { runSync, compile } from '@mdx-js/mdx';
import * as runtime from 'react/jsx-runtime';
import { renderToStaticMarkup } from 'react-dom/server';

(async () => {
    const mdxMermaid = await import('mdx-mermaid');

    const markdown = fs.readFileSync('./example.md', 'utf-8');

    const code = String(await compile(markdown, {
        outputFormat: 'function-body',
        remarkPlugins: [mdxMermaid.default],
    }));

    const { default: Content } = runSync(code, runtime);
    const html = renderToStaticMarkup(Content());

    console.log(html);
})();

Actual output :

import { Mermaid } from 'mdx-mermaid/lib/Mermaid';
<h2>Framework AARRR</h2>
<Mermaid config={{}} chart={`graph LR; Acquisition-->Activation-->Rétention-->Recommandation-->Revenu`} />

Expected behavior

I want to get a svg directly :

<h2>Framework AARRR</h2>
<svg foo="bar"></svg>

How to do it ?

Does not follow theme when toggled

Describe the bug
The diagrams do not match the theme when it's toggles with docusaurus

To Reproduce
Steps to reproduce the behavior including how the markdown file is processed:

1. Start on light mode with mermaid in light mode.
2. Toggle to dark mode.
3. Diagrams will not change to dark mode.

Expected behavior
I would expect the diagrams theme to match the toggled theme.

I cannot install mdx-mermaid plugin

Describe the bug
I cannot setup the mdx-mermaid plugin in my Docusaurus website.

To Reproduce

1. npx create-docusaurus@latest my-website classic --typescript
2. npm install mdx-mermaid mermaid
3. In the docusaurus.config.js file, in the config object, add the plugin:

const config = {
  ...
  plugins: ['mdx-mermaid']
}

4. npm start

Stack trace

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

> [email protected] start
> docusaurus start

[INFO] Starting the development server...
[ERROR] Error [ERR_REQUIRE_ESM]: require() of ES Module C:\PROJETOS\TesteDocusaurus\my-website\node_modules\mdx-mermaid\lib\mdxast-mermaid.js from C:\PROJETOS\TesteDocusaurus\my-website\node_modules\@docusaurus\core\lib\server\plugins\configs.js not supported.
Instead change the require of mdxast-mermaid.js in C:\PROJETOS\TesteDocusaurus\my-website\node_modules\@docusaurus\core\lib\server\plugins\configs.js to a dynamic import() which is available in all CommonJS modules.
    at module.exports (C:\PROJETOS\TesteDocusaurus\my-website\node_modules\import-fresh\index.js:32:59)
    at normalizePluginConfig (C:\PROJETOS\TesteDocusaurus\my-website\node_modules\@docusaurus\core\lib\server\plugins\configs.js:20:57)
    at C:\PROJETOS\TesteDocusaurus\my-website\node_modules\@docusaurus\core\lib\server\plugins\configs.js:99:60
    at Array.map (<anonymous>)
    at loadPluginConfigs (C:\PROJETOS\TesteDocusaurus\my-website\node_modules\@docusaurus\core\lib\server\plugins\configs.js:99:38)
    at async initPlugins (C:\PROJETOS\TesteDocusaurus\my-website\node_modules\@docusaurus\core\lib\server\plugins\init.js:42:27)
    at async loadPlugins (C:\PROJETOS\TesteDocusaurus\my-website\node_modules\@docusaurus\core\lib\server\plugins\index.js:26:21)
    at async load (C:\PROJETOS\TesteDocusaurus\my-website\node_modules\@docusaurus\core\lib\server\index.js:76:58)
    at async Command.start (C:\PROJETOS\TesteDocusaurus\my-website\node_modules\@docusaurus\core\lib\commands\start.js:42:19)
[INFO] Docusaurus version: 2.0.1
Node version: v16.16.0

Additional context
I tried to follow the tutorial, but an error shows up regarding "remarkPlugins" not being a valid field.

Pass in mermaid options

Describe the solution you'd like
Would it be possible to have the opportunity to pass in mermaid options via this plugin? E.g.

mermaid.initialize({
  startOnLoad: true,
  securityLevel: 'loose' // <-- Example of additional stuff I think would be nice...
})

Describe alternatives you've considered
Considered to try using the solution from here directly instead (but the plugin looks cleaner).

Additional context
Thanks for the plugin!

Docusaurus 2.1.0 has another config.

Describe the bug

Running

npx create-docusaurus@latest test-code classic --typescript
# or
npx create-docusaurus@latest test-code classic

Creates a website, that has another config strcture, than in examples. While look similar, seems there is no "remarkPlugins" in JS definition. As there is no createConfig() and other changes.

Experiments with importing mdxMermaid and adding to remarkPlugins got errors like:

config

  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          remarkPlugins: [mdxMermaid.default],

errors:

> docusaurus start

[INFO] Starting the development server...
[ERROR] ValidationError: "beforeDefaultRemarkPlugins[0]" must not be a sparse array item
[INFO] Docusaurus version: 2.1.0
Node version: v16.17.1

I also tried to npm instlal mdx-markdown@^2.0.0. but it was not found in npm.

related to #64

Theme Variables not working?

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behaviour including how the markdown file is processed:

1. Setup themes variables '...'

This is my docusaurus.config.js. Notice that I

  presets: [
    [
      "@docusaurus/preset-classic",
      {
        docs: {
          remarkPlugins: [
            [require("mdx-mermaid"), { mermaid: { theme: "dark", themeVariables: { fontFamily: '"Arial"' } } }],
          ],

2. Create diagram like '....'

I have a diagram like so:

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

3. Build with '....'

Everything is fine.

4. See error

Notice that the fontFamily is still the default:

Expected behavior
A clear and concise description of what you expected to happen.

The font family should be "Arial" as defined the the docusaurus.config.js

Screenshots
If applicable, add screenshots to help explain your problem.

See above

Stack trace
If applicable, add the stack trace for the exception thrown to help trace your problem.

There is no exception

Tool chain used:
What tool chain is used.

1. Yarn
2. Docusaurus v2 Beta 5

Theme variables only applied to first diagram

Describe the bug
If you defined themeVariables to customize colors, fonts, etc., the customizations are only applied to the first diagram in the Markdown document. The second diagram is rendered with the default theme.

To Reproduce

1. Setup themes variables:

    remarkPlugins: [
      [
        require("mdx-mermaid"),
        {
          mermaid: {
            theme: "base",
            themeVariables: {
              primaryColor: "lime",
            },
          },
        },
      ],
    ],
   

2. Add two diagrams to a Markdown file:

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

3. Build with yarn start
4. See two diagrams with different colors. (see screenshot)

Expected behavior
All diagrams should share the same theme configuration.

Screenshots

Stack trace
N/A

Tool chain used:
Docusaurus 2.0.0-beta.9, mdx-mermaid 1.2.1

Additional context
When experimenting with different colors, you have to CTRL-C to break yarn start and then run it again to see the changes.

[ERR_REQUIRE_ESM] with d3 on NextJS

Describe the bug
It’s not possible to use mdx-mermaid in NextJS. Error is:

error - Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/max/test/test/node_modules/d3/src/index.js
require() of ES modules is not supported.
require() of /home/max/test/test/node_modules/d3/src/index.js from /home/max/test/test/node_modules/mermaid/dist/mermaid.core.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/max/test/test/node_modules/d3/package.json.

    at new NodeError (internal/errors.js:322:7)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Object.d3 (/home/max/test/test/node_modules/mermaid/dist/mermaid.core.js:36138:18)
    at __webpack_require__ (/home/max/test/test/node_modules/mermaid/dist/mermaid.core.js:36381:41)
    at Object../src/mermaidAPI.js (/home/max/test/test/node_modules/mermaid/dist/mermaid.core.js:31599:60)
    at __webpack_require__ (/home/max/test/test/node_modules/mermaid/dist/mermaid.core.js:36381:41) {
  code: 'ERR_REQUIRE_ESM',
  page: '/'
}

To Reproduce
Steps to reproduce the behaviour including how the file is processed:

1. npx create-next-app@latest
2. npm i mdx-mermaid mermaid
3. Adding the minimal code form mdx-mermaid docs to pages/index.js:

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

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

4. See error above and in browser

Expected behavior
Loading normally and showing graph.

Screenshots

Stack trace

error - Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/max/test/test/node_modules/d3/src/index.js
require() of ES modules is not supported.
require() of /home/max/test/test/node_modules/d3/src/index.js from /home/max/test/test/node_modules/mermaid/dist/mermaid.core.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/max/test/test/node_modules/d3/package.json.

    at new NodeError (internal/errors.js:322:7)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Object.d3 (/home/max/test/test/node_modules/mermaid/dist/mermaid.core.js:36138:18)
    at __webpack_require__ (/home/max/test/test/node_modules/mermaid/dist/mermaid.core.js:36381:41)
    at Object../src/mermaidAPI.js (/home/max/test/test/node_modules/mermaid/dist/mermaid.core.js:31599:60)
    at __webpack_require__ (/home/max/test/test/node_modules/mermaid/dist/mermaid.core.js:36381:41) {
  code: 'ERR_REQUIRE_ESM',
  page: '/'
}

Tool chain used:
NexJS latest, see steps to reproduce

Lets work together on remark-mermaidjs

Describe the solution you'd like

I am the maintainer of remark-mermaidjs and I recently stumbled upon this project. remark-mermaidjs already has several advantages over mdx-mermaid:

• It works with any mdast, including, but not limited to mdx.
• It isn’t tied to React.
• It supports running in a browser as well as Node.js.
• It doesn’t depend on a CDN.

I propose to work together on remark-mermaidjs instead of competing.

remark-mermaidjs doesn’t support a React component to render mermaid diagrams. That can still be developed separately.

Describe alternatives you've considered

1. Link remark-mermaidjs as an alternative in the readme.
2. You can choose to ignore this issue.

Additional context

N/A

docusaurus production build failing with mermaid

Describe the bug
A clear and concise description of what the bug is.
docusaurus production build failing with mermaid

To Reproduce
Steps to reproduce the behaviour including how the markdown file is processed:

1. include mermaid according to install steps
2. add remarkPlugins: [require('mdx-mermaid')], to config for @docusaurus/plugin-content-docs
3. create a digram in mardown
4. yarn build in docusaurus
5. 💥

Expected behavior
A clear and concise description of what you expected to happen.
Diagram should be rendered.

Screenshots
If applicable, add screenshots to help explain your problem.

Stack trace
If applicable, add the stack trace for the exception thrown to help trace your problem.

Docusaurus Node/SSR could not render static page with path "/docs/" because of following error:

ReferenceError: window is not defined
    at Object.61590 (main:79056:4)
    at __webpack_require__ (main:163201:42)
    at Object.43510 (main:79026:35)
    at __webpack_require__ (main:163201:42)
    at Module.54105 (main:17695:81)
    at __webpack_require__ (main:163201:42)
    at main:25925:56175

Pro tip: It looks like you are using code that should run on the client-side only.
To get around it, try using <BrowserOnly> (https://docusaurus.io/docs/docusaurus-core/#browseronly) or ExecutionEnvironment (https://docusaurus.io/docs/docusaurus-core/#executionenvironment).
It might also require to wrap your client code in useEffect hook and/or import a third-party library dynamically (if any).
Docusaurus Node/SSR could not render static page with path "/README" because of following error:

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at a.b.render (main:118082:32)
    at a.b.read (main:118078:83)
    at Object.exports.renderToString (main:118089:138)
    at doRender (main:26122:356)
    at async serverEntry_render (main:26121:294)



Error: Server-side rendering fails due to the error above.
Error: Server-side rendering fails due to the error above.
Unable to build website for locale "en".

● Client █████████████████████████ cache (99%) shutdown IdleFileCachePlugin
 serialize pack

● Server █████████████████████████ cache (99%) shutdown IdleFileCachePlugin
 serialize pack

Error: Failed to compile with errors.
    at node_modules/@docusaurus/core/lib/webpack/utils.js:203:24
    at node_modules/webpack/lib/MultiCompiler.js:554:14
    at processQueueWorker (node_modules/webpack/lib/MultiCompiler.js:491:6)
    at processTicksAndRejections (internal/process/task_queues.js:75:11)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed.
Exit code: 1

Tool chain used:
What tool chain is used.
yarn, docusaurus, docusaurus/plugin-content-docs
Additional context
Add any other context about the problem here.

ERR_REQUIRE_ESM failure when using unist-util-visit>=3.0.0

Describe the bug
As of unist-util-visit version 3.0.0, ESM must be used.

When using mdx-mermaid version 1.1.1 (the current latest release) with unist-util-visit version 4.1.0 (the current latest release), the build fails with ERR_REQUIRE_ESM

To Reproduce
Set up a simple docusaurus project with mdx-mermaid, then run docusaurus build

Expected behavior
Build should succeed.

Screenshots
n/a

Stack trace

Error [ERR_REQUIRE_ESM]: require() of ES Module /home/candrews/projects/docs/node_modules/unist-util-visit/index.js from /home/candrews/projects/docs/node_modules/mdx-mermaid/lib/mdxast-mermaid.js not supported.
Instead change the require of index.js in /home/candrews/projects/docs/node_modules/mdx-mermaid/lib/mdxast-mermaid.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/home/candrews/projects/docs/node_modules/mdx-mermaid/lib/mdxast-mermaid.js:20:44)
    at Object.<anonymous> (/home/candrews/projects/docs/docusaurus.config.js:81:15)
    at module.exports (/home/candrews/projects/docs/node_modules/import-fresh/index.js:32:59)
    at loadConfig (/home/candrews/projects/docs/node_modules/@docusaurus/core/lib/server/config.js:17:53)
    at loadSiteConfig (/home/candrews/projects/docs/node_modules/@docusaurus/core/lib/server/index.js:33:51)
    at loadContext (/home/candrews/projects/docs/node_modules/@docusaurus/core/lib/server/index.js:43:69)
    at build (/home/candrews/projects/docs/node_modules/@docusaurus/core/lib/commands/build.js:48:52)
    at Command.<anonymous> (/home/candrews/projects/docs/node_modules/@docusaurus/core/bin/docusaurus.js:54:5)
    at Command.listener [as _actionHandler] (/home/candrews/projects/docs/node_modules/@docusaurus/core/node_modules/commander/index.js:413:31)
    at Command._parseCommand (/home/candrews/projects/docs/node_modules/@docusaurus/core/node_modules/commander/index.js:914:14)
    at Command._dispatchSubcommand (/home/candrews/projects/docs/node_modules/@docusaurus/core/node_modules/commander/index.js:865:18)
    at Command._parseCommand (/home/candrews/projects/docs/node_modules/@docusaurus/core/node_modules/commander/index.js:882:12)
    at Command.parse (/home/candrews/projects/docs/node_modules/@docusaurus/core/node_modules/commander/index.js:717:10)
    at run (/home/candrews/projects/docs/node_modules/@docusaurus/core/bin/docusaurus.js:244:7)
    at Object.<anonymous> (/home/candrews/projects/docs/node_modules/@docusaurus/core/bin/docusaurus.js:251:1)

Tool chain used:
npm 8.0.0, node v16.11.1

Additional context

React-hydration-error when using next-mdx-remote

I use Next.js, chakra-ui, next-mdx-remote to build my blog.

import React from "react";
import {Mermaid} from 'mdx-mermaid/lib/Mermaid'



const MDXComponents = {
  mermaid: Mermaid, 
};

export default MDXComponents;

import { serialize } from "next-mdx-remote/serialize";

import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";
import remarkParse from "remark-parse";
import remarkGfm from "remark-gfm";
import remarkToc from "remark-toc";
import mdxMermaid from 'mdx-mermaid';

const serializePost = async (
  content: string,
): Promise<MDXRemoteSerializeResult> => {
  return await serialize(content, {
    mdxOptions: {
      remarkPlugins: [
        remarkParse,
        remarkGfm,
        remarkMath,
        remarkToc,
        mdxMermaid,
      ],
      rehypePlugins: [rehypeKatex],
    },
  });
};

export default serializePost;

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

Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.

Warning: Text content did not match. Server: "" Client: "graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;"

See more info here: https://nextjs.org/docs/messages/react-hydration-error

How can I resolve it?

Config does not work with docusaurus

Version

1.3.2

Describe the bug

The issue started as "dark theme does not work".

To Reproduce

1. Open https://stackblitz.com/edit/github-pwuwsv-hvqsdq
2. Open "Tutorial" page that uses mermaid
3. See a graph.

Expected behavior

Uses dark theme.

Actual behavior

Uses light theme.

Additional context

I debugged it a bit and it seems that configSrc there is always undefined:

mdx-mermaid/src/Mermaid.tsx

Line 43 in 5b22959

const config: Config = useMemo(() => typeof configSrc === 'string' ? JSON.parse(configSrc) : configSrc, [configSrc])

This does not seem correct, so in microsoft/griffel#217 I monkey patched it and then it worked, but this does not seem like a proper solution.

Please let me know if it's a setup problem, but in sandbox (https://stackblitz.com/edit/github-pwuwsv-hvqsdq) I have a config exactly like in docs.

can't resolve `mdx-mermaid/Mermaid` As typescript currently not recognize exports in package.json

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Problem descrption

When I run cra project with this plugin, it told me that can't resolve mdx-mermaid/Mermaid.

As I noticed that the exports feature in package.json is currently not supported

Solution for now

Here is the diff that solved my problem:

diff --git a/node_modules/mdx-mermaid/lib/mdxast-mermaid.js b/node_modules/mdx-mermaid/lib/mdxast-mermaid.js
index dbc38e4..e9872d4 100644
--- a/node_modules/mdx-mermaid/lib/mdxast-mermaid.js
+++ b/node_modules/mdx-mermaid/lib/mdxast-mermaid.js
@@ -33,7 +33,7 @@ function plugin(config) {
         // See if there is already an import for the Mermaid component
         let importFound = false;
         unist_util_visit_1.default(ast, { type: 'import' }, (node) => {
-            if (/\s*import\s*{\s*Mermaid\s*}\s*from\s*'mdx-mermaid\/Mermaid'\s*;?\s*/.test(node.value)) {
+            if (/\s*import\s*{\s*Mermaid\s*}\s*from\s*'mdx-mermaid\/lib\/Mermaid'\s*;?\s*/.test(node.value)) {
                 importFound = true;
                 return unist_util_visit_1.default.EXIT;
             }
@@ -42,7 +42,7 @@ function plugin(config) {
         if (!importFound) {
             ast.children.splice(0, 0, {
                 type: 'import',
-                value: 'import { Mermaid } from \'mdx-mermaid/Mermaid\';'
+                value: 'import { Mermaid } from \'mdx-mermaid/lib/Mermaid\';'
             });
         }
     }

This issue body was partially generated by patch-package.

docusaurus compiling with errors because of mdx-mermaid.

Well it was working fine when i was working with the website 2-3 days ago, but when i was tryna start working again today and started the website on development mode, it was not compiling for some reason and I don't understand why??

Compiled with problems:X

ERROR in ./docs/defender/configuration.mdx

Module build failed (from ./node_modules/@docusaurus/mdx-loader/lib/index.js):
SyntaxError: C:\Users\Felix\Desktop\melon_docs\docs\defender\configuration.mdx: Identifier 'Mermaid' has already been declared. (2:9)

  1 | import { Mermaid } from 'mdx-mermaid/lib/Mermaid';
> 2 | import { Mermaid } from "mdx-mermaid/Mermaid";
    |          ^
    at instantiate (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:72:32)
    at constructor (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:358:12)
    at Object.raise (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:3334:19)
    at ScopeHandler.checkRedeclarationInScope (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:3518:19)
    at ScopeHandler.declareName (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:3484:12)
    at Object.declareNameFromIdentifier (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:12057:16)
    at Object.checkIdentifier (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:12052:12)
    at Object.checkLVal (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:11978:12)
    at Object.finishImportSpecifier (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:16182:10)
    at Object.parseImportSpecifier (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:16363:17)
    at Object.parseNamedImportSpecifiers (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:16336:36)
    at Object.parseImport (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:16146:39)
    at Object.parseStatementContent (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:14638:27)
    at Object.parseStatement (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:14528:17)
    at Object.parseBlockOrModuleBlockBody (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:15167:25)
    at Object.parseBlockBody (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:15158:10)

    ERROR in ./docs/defender/introduction.mdx

Module build failed (from ./node_modules/@docusaurus/mdx-loader/lib/index.js):
SyntaxError: C:\Users\Felix\Desktop\melon_docs\docs\defender\introduction.mdx: Identifier 'Mermaid' has already been declared. (4:9)

  2 | import Tabs from '@theme/Tabs';
  3 | import TabItem from '@theme/TabItem';
> 4 | import { Mermaid } from "mdx-mermaid/Mermaid";
    |          ^
  5 | import nse from '../../static/img/docs/scam-example.png';
  6 | import atm from '../../static/img/docs/auto.png'
  7 | import mtm from '../../static/img/docs/manual.png'
    at instantiate (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:72:32)
    at constructor (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:358:12)
    at Object.raise (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:3334:19)
    at ScopeHandler.checkRedeclarationInScope (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:3518:19)
    at ScopeHandler.declareName (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:3484:12)
    at Object.declareNameFromIdentifier (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:12057:16)
    at Object.checkIdentifier (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:12052:12)
    at Object.checkLVal (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:11978:12)
    at Object.finishImportSpecifier (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:16182:10)
    at Object.parseImportSpecifier (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:16363:17)
    at Object.parseNamedImportSpecifiers (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:16336:36)
    at Object.parseImport (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:16146:39)
    at Object.parseStatementContent (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:14638:27)
    at Object.parseStatement (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:14528:17)
    at Object.parseBlockOrModuleBlockBody (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:15167:25)
    at Object.parseBlockBody (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:15158:10)

ERROR in ./docs/defender/warden/overview.mdx

Module build failed (from ./node_modules/@docusaurus/mdx-loader/lib/index.js):
Error: Markdown link URL is mandatory in "docs/defender/warden/overview.mdx" file (title: conditions, line: 31).
    at processLinkNode (C:\Users\Felix\Desktop\melon_docs\node_modules\@docusaurus\mdx-loader\lib\remark\transformLinks\index.js:72:15)
    at C:\Users\Felix\Desktop\melon_docs\node_modules\@docusaurus\mdx-loader\lib\remark\transformLinks\index.js:94:27
    at overload (C:\Users\Felix\Desktop\melon_docs\node_modules\unist-util-visit\index.js:27:12)
    at visit (C:\Users\Felix\Desktop\melon_docs\node_modules\unist-util-visit-parents\index.js:56:27)
    at visit (C:\Users\Felix\Desktop\melon_docs\node_modules\unist-util-visit-parents\index.js:67:75)
    at visit (C:\Users\Felix\Desktop\melon_docs\node_modules\unist-util-visit-parents\index.js:67:75)
    at visit (C:\Users\Felix\Desktop\melon_docs\node_modules\unist-util-visit-parents\index.js:67:75)
    at visit (C:\Users\Felix\Desktop\melon_docs\node_modules\unist-util-visit-parents\index.js:67:75)
    at visitParents (C:\Users\Felix\Desktop\melon_docs\node_modules\unist-util-visit-parents\index.js:29:26)
    at visit (C:\Users\Felix\Desktop\melon_docs\node_modules\unist-util-visit\index.js:22:3)
    at C:\Users\Felix\Desktop\melon_docs\node_modules\@docusaurus\mdx-loader\lib\remark\transformLinks\index.js:93:40
    at wrapped (C:\Users\Felix\Desktop\melon_docs\node_modules\trough\wrap.js:25:19)
    at next (C:\Users\Felix\Desktop\melon_docs\node_modules\trough\index.js:57:24)
    at done (C:\Users\Felix\Desktop\melon_docs\node_modules\trough\wrap.js:55:16)
    at then (C:\Users\Felix\Desktop\melon_docs\node_modules\trough\wrap.js:62:5)

SyntaxError: C:\Users\Felix\Desktop\melon_docs\docs\defender\configuration.mdx: Identifier 'Mermaid' has already been declared. (2:9)
  1 | import { Mermaid } from 'mdx-mermaid/lib/Mermaid';
> 2 | import { Mermaid } from "mdx-mermaid/Mermaid";
    |          ^
SyntaxError: C:\Users\Felix\Desktop\melon_docs\docs\defender\introduction.mdx: Identifier 'Mermaid' has already been declared. (4:9)
  2 | import Tabs from '@theme/Tabs';
  3 | import TabItem from '@theme/TabItem';
> 4 | import { Mermaid } from "mdx-mermaid/Mermaid";
    |          ^
  5 | import nse from '../../static/img/docs/scam-example.png';
  6 | import atm from '../../static/img/docs/auto.png'
  7 | import mtm from '../../static/img/docs/manual.png'
Error: Markdown link URL is mandatory in "docs/defender/warden/overview.mdx" file (title: conditions, line: 31).
client (webpack 5.70.0) compiled with 3 errors

TypeScript error `TS7016` occurs while building a React app with `vite`

Hi, I saw the following error message while using vite to build a React app that imports the [email protected] package:

 $ npm run build

> myapp@0.0.0 build
> tsc && vite build

src/components/Diagram.tsx:3:25 - error TS7016: Could not find a declaration file for module 'mdx-mermaid/lib/Mermaid'. '/Users/me/myapp/node_modules/mdx-mermaid/lib/Mermaid.mjs' implicitly has an 'any' type.
  There are types at '/Users/me/myapp/node_modules/mdx-mermaid/lib/Mermaid.d.ts', but this result could not be resolved when respecting package.json "exports". The 'mdx-mermaid' library may need to update its package.json or typings.

3 import { Mermaid } from "mdx-mermaid/lib/Mermaid";
                          ~~~~~~~~~~~~~~~~~~~~~~~~~


Found 1 error in src/components/Diagram.tsx:3

Other information about my environment:

$ vite --version
vite/4.5.0 darwin-arm64 node-v20.8.1
$ node --version
v20.8.1
$ npm --version
10.1.0
$ tsc --version
Version 5.2.2

As a workaround, I used patch-package to patch the package locally.

Here's a diff showing the patch:

diff --git a/node_modules/mdx-mermaid/package.json b/node_modules/mdx-mermaid/package.json
index 5168c23..2d1b998 100644
--- a/node_modules/mdx-mermaid/package.json
+++ b/node_modules/mdx-mermaid/package.json
@@ -7,15 +7,18 @@
   "exports": {
     ".": {
       "require": "./lib/mdxast-mermaid.cjs",
-      "import": "./lib/mdxast-mermaid.mjs"
+      "import": "./lib/mdxast-mermaid.mjs",
+      "types": "./lib/mdxast-mermaid.d.ts"
     },
     "./Mermaid": {
       "require": "./lib/Mermaid.cjs",
-      "import": "./lib/Mermaid.mjs"
+      "import": "./lib/Mermaid.mjs",
+      "types": "./lib/Mermaid.d.ts"
     },
     "./lib/Mermaid": {
       "require": "./lib/Mermaid.cjs",
-      "import": "./lib/Mermaid.mjs"
+      "import": "./lib/Mermaid.mjs",
+      "types": "./lib/Mermaid.d.ts"
     }
   },
   "author": "Sam Wall ([email protected])",

I don't have any experience creating TypeScript or JavaScript packages. I wanted to pass along this information in case the maintainers and other people found it useful.

Here's a link to the GitHub Issue that led me to this workaround: microsoft/TypeScript#52363

This issue body was partially generated by patch-package.

Upgrade mermaid to 8.12 or even 9?

Hi, in package.json, you're saying mermaid needs to be lower than 8.12. Is there a reason for that?

The reason I'd like to avoid mermaid 8.11.X is that it brings @percy/migrate as a regular dependency, which in turn depends on colors at version 1.4.2.

With 8.12 that dependency was moved to devDependencies: mermaid-js/mermaid#2260

If you need help with this, I'd be happy to assist.

Compatibility with newer Mermaid versions

Like 9.0.1 or even 8.14.0.

Typechecking in docusaurus 2.0.0-beta.8 fails

Describe the bug
Type checking error - latest versions of docusaurus

To Reproduce
Steps to reproduce the behaviour including how the markdown file is processed:

1. install docusaurus latest
2. install mdx-mermaid

Expected behavior
No errors

Screenshots

Stack trace

Conversion of type '{ docs: { remarkPlugins: typeof import("d:/Jonathan/Documents/Repositories/devspace/Videndum/projects/Eventiva/node_modules/mdx-mermaid/index")[]; sidebarPath: string; editUrl: string; }; blog: { ...; }; theme: { ...; }; }' to type 'Options' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Types of property 'docs' are incompatible.
    Type '{ remarkPlugins: typeof import("d:/Jonathan/Documents/Repositories/devspace/Videndum/projects/Eventiva/node_modules/mdx-mermaid/index")[]; sidebarPath: string; editUrl: string; }' is not comparable to type 'false | Partial<PluginOptions>'.
      Type '{ remarkPlugins: typeof import("d:/Jonathan/Documents/Repositories/devspace/Videndum/projects/Eventiva/node_modules/mdx-mermaid/index")[]; sidebarPath: string; editUrl: string; }' is not comparable to type 'Partial<PluginOptions>'.
        Types of property 'remarkPlugins' are incompatible.
          Type 'typeof import("d:/Jonathan/Documents/Repositories/devspace/Videndum/projects/Eventiva/node_modules/mdx-mermaid/index")[]' is not comparable to type 'RemarkOrRehypePlugin[]'.
            Type 'typeof import("d:/Jonathan/Documents/Repositories/devspace/Videndum/projects/Eventiva/node_modules/mdx-mermaid/index")' is not comparable to type 'RemarkOrRehypePlugin'.
              Type 'typeof import("d:/Jonathan/Documents/Repositories/devspace/Videndum/projects/Eventiva/node_modules/mdx-mermaid/index")' is not comparable to type '[Function, Record<string, unknown>]'.ts(2352)

/** @type {import('@docusaurus/types').Config} */
const config = {
  presets: [
      '@docusaurus/preset-classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          remarkPlugins: [require('mdx-mermaid')],
          sidebarPath: require.resolve('./sidebars.js'),
        },
      }),
    ],
  ],
};

Moudule can't resolve

Describe the bug
the module can't resolve

versions

[email protected]

"dependencies": {
    "@docusaurus/core": "2.0.0-beta.4",
    "@docusaurus/preset-classic": "2.0.0-beta.4",
    "@mdx-js/react": "^1.6.21",
    "@svgr/webpack": "^5.5.0",
    "clsx": "^1.1.1",
    "file-loader": "^6.2.0",
    "hast-util-is-element": "1.1.0",
    "mdx-mermaid": "^1.0.0",
    "prism-react-renderer": "^1.2.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "rehype-katex": "4",
    "remark-math": "3",
    "url-loader": "^4.1.1"
  },

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Module not found: Error: Can't resolve 'mermaid' in '/Users/apple/repo/dosasm/node_modules/mdx-mermaid/lib'
Did you mean './mermaid'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (/Users/apple/repo/dosasm/node_modules/@docusaurus/core/node_modules, node_modules, /Users/apple/repo/dosasm/node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

my config

 presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          path:'docs',
          sidebarPath: require.resolve('./sidebars.js'),
          remarkPlugins: [mermaid,math],
          rehypePlugins: [katex],
          // Please change this to your repo.
          editUrl:
            'https://github.com/dosasm/dosasm/edit/master/website/',
        },
        blog: {
          showReadingTime: true,
          // Please change this to your repo.
          editUrl:
            'https://github.com/dosasm/dosasm/edit/master/website/blog/',
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
      },
    ],
  ],

Additional context
Add any other context about the problem here.

what is the purpose of .default?

Hi,
could anyone explain the difference of
remarkPlugins: [mdxMermaid.default],
and
remarkPlugins: [mdxMermaid],
?

merci

TypeError: Cannot read properties of undefined (reading 'children')

Hello @sjwall 😉

Describe the bug

Since yesterday, I have this error:

file:///home/johackim/Dev/test/node_modules/mdx-mermaid/lib/mdxast-mermaid.mjs:94
    return tree.children[0].children;
                            ^

TypeError: Cannot read properties of undefined (reading 'children')
    at outputSVG (file:///home/johackim/Dev/test/node_modules/mdx-mermaid/lib/mdxast-mermaid.mjs:94:29)
    at async transformer (file:///home/johackim/Dev/test/node_modules/mdx-mermaid/lib/mdxast-mermaid.mjs:122:32)

Node.js v18.16.0

To Reproduce

Steps to reproduce the behaviour including how the markdown file is processed:

// test.mjs

import * as runtime from 'react/jsx-runtime';
import { runSync, compile } from '@mdx-js/mdx';
import { renderToStaticMarkup } from 'react-dom/server';

const markdown = `
## Hello world

\`\`\`mermaid
graph LR;
    Acquisition-->Activation-->Rétention-->Recommandation-->Revenu
\`\`\`
`;

const code = String(await compile(markdown, {
    outputFormat: 'function-body',
    remarkPlugins: [
        [(await import('mdx-mermaid')).default, { output: 'svg' }],
    ],
}));

const { default: Content } = runSync(code, runtime);
const html = renderToStaticMarkup(Content());

console.log(html);

Additional context

Here my package.json :

{
  "devDependencies": {
    "@mdx-js/mdx": "2.1.0",
    "mdx-mermaid": "^2.0.0-rc7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

Mermaid-Block not shown within Tabs

Describe the bug
When using mermaid diagrams inside tabs, only the initially shown tab renders the mermaid diagram, on the other tabs, the diagram is not shown. The result is the same for the compiled page and for the page running with the dev-server.

To Reproduce

Insert the following code to a mdx page in docusaurus (V2.1.0):

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
<TabItem value="tab-a">

The following mermaid diagram is shown:

```mermaid
graph LR
  a ---> c(10)
  b ---> c(10)
```

</TabItem>

<TabItem value="tab-b">

This mermaid diagram is not displayed:

```mermaid
graph LR
  d ---> z(42)
  e ---> z(42)
```

</TabItem>
</Tabs>

Expected behavior

Mermaid diagrams are rendered correctly on each tab

Screenshots

Tool chain used:

• docusaurus v2.1.0
• mermaid v9.1.6
• mdx-mermaid v1.3.2

Add support for mdx 3

Describe the solution you'd like
Support mdx 3 please :-)

Additional context
I was planning to use mermaid within Astro but got this error instead:

[@mdx-js/rollup] Cannot read properties of undefined (reading 'call')
file: /home/millette/wip/mermaid-mdx/src/pages/page-2.mdx:undefined:undefined
  Stack trace:
    at Object.transform (file:///home/millette/wip/mermaid-mdx/node_modules/.pnpm/@[email protected][email protected]_@[email protected][email protected]_/node_modules/@astrojs/mdx/dist/vite-plugin-mdx.js:54:15)
    at file:///home/millette/wip/mermaid-mdx/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:19774:40

Integration with Azure Devops wiki

Azure Devops (ADO) wiki supports mermaid but with syntax to identify the block using ::: instead of ‘’’.

I can’t find a way to make this replacement when the system is compiling the site.

I would ask if there is the possibility to add support also to this block description.

This is the description of ADO Wiki usage of mermaid: Link

Mermaid import tag shown at top of page (as plain text)

Describe the bug
As of version 1.3.2 mdx-mermaid appears to show the import tag when using NextJS. This error does not occur on mdx-mermaid version 1.2.3.

To Reproduce

// next.config.js
import nextMDX from '@next/mdx'
import remarkMermaid from 'mdx-mermaid'


const withMDX = nextMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkMermaid],
    rehypePlugins: [],
  },
})

export default withMDX({
    pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
})

// example.mdx
# Test header

Expected behavior
MDX import is not shown at top of screen.

Screenshots

Tool chain used:
NextJS 12

Multiple mermaid instances within a single md file result in unexpected output in svg mode

Describe the bug
Running in the repo itself, I made a example.md file that looked like:

## Framework AARRR

Some content

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

And some more:


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

(minus the escaped back-ticks).

This output the following view:

Note the missing and some more node and the contents of the mermaid output.