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

[johackim]

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 ?

[sjwall]

Looking into this

[TheShinriel]

I reproduce the same with code ``` like

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

But in my mdx, if I try with

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

const usedComponents = {
  Mermaid,
}
const MDXContent = useMDXComponent(post.body.code)

return <MDXContent components={usedComponents} />

It works well. The lib is next-contentlayer, but under the hood it use @mdx-js ;)

So @johackim there is this workaround

[timothyerwin]

I'm also trying to use this with @mdx-js/rollup with Vite but it's crashing out with [plugin:@mdx-js/rollup] Expected usable value, not 'undefined'

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import mdx from "@mdx-js/rollup";
import remarkGfm from 'remark-gfm'
import mdxMermaid from 'mdx-mermaid'
...
export default defineConfig({
  plugins: [
    react(),
    mdx({
      remarkPlugins: [remarkGfm, mdxMermaid.default],
    }),

# mermaid code block

```mermaid
graph LR
    Start --> Stop
...

It works fine if I use it directly in the .mdx like this but I want to use it with the above backticks in markdown.

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

# mermaid code block

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

[sjwall]

Just released v2.0.0-rc3 does this version work with setting output to svg?

See example https://github.com/sjwall/mdx-mermaid/blob/main/mdx-example/index.js

Note extra peer dependencies to convert to svg

[TheShinriel]

Just released v2.0.0-rc3 does this version work with setting output to svg?

With the rc3, it works perfectly! ;)

[johackim]

With the param { output: 'svg' } It's good to me too :D. Thanks !