ReactMarkdown with mermaid in nextjs app

[tejpowar]

Hi,

I am struggling for the latest mermaid version to work with ReactMarkdown (version 10.0.1). The error i get is Syntax error in graph.

My code is

import React, { useEffect } from 'react';
import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import Script from 'next/script';
import remarkGfm from 'remark-gfm';

// Replacer function to decode Unicode and URI-encoded characters
function decodeUnicodeAndURI(input) {
  try {
    const uriDecoded = decodeURIComponent(input);
    return JSON.parse(`"${uriDecoded}"`);
  } catch (e) {
    return input;
  }
}

export default function MarkdownBlock({ md }) {
  const mdString = Array.isArray(md) ? md.join('\n') : md;
  const decodedMd = decodeUnicodeAndURI(mdString);

  const markdownContent = `
  classDiagram
    class Person {
      -name: String
      -age: Integer
    }

    class Car {
      -model: String
      -year: Integer
    }

    Person "owns" -- Car
  `;

  useEffect(() => {
    // Re-run Mermaid rendering after the component mounts or updates
    import("mermaid").then((mermaidModule) => {
      const mermaid = mermaidModule.default;
      mermaid.initialize({ startOnLoad: true });
      mermaid.contentLoaded();
    });
  }, [markdownContent]);

  return (
    <>
      <Script
        id="mermaidscript"
        type="module"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
           import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.esm.min.mjs";
           mermaid.initialize({startOnLoad: true});
           mermaid.contentLoaded();`,
        }}
      />
      <div className='mermaid'>
        <ReactMarkdown rehypePlugins={[rehypeRaw]} remarkPlugins={[remarkGfm]}>{markdownContent}</ReactMarkdown>
      </div>
      <div className="mermaid">
       {markdownContent}
      </div>
    </>
  );
}

The <div className="mermaid"> {markdownContent} </div> code works fine and renders on the page.

I have trying to work this out for the last few days but no luck. Any ideas how i can get it working with reactMarkdown?