Mermaid with ReactMarkdown & Next.js

[celinehaddad]

Hey all,

I am writing a doc app that uses Next.js, TypeScript, & ReactMarkdown. I added this script inside a div that also contains my ReactMarkdown component:

  <Script
        type="module"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
         import mermaid from "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs";
         mermaid.initialize({startOnLoad: true});
         mermaid.contentLoaded();`,
        }}
      />

I'm having issues getting all of the figures I need to render. I believe this is a versioning problem, since when I change l.6 to import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.esm.min.mjs"; I am able to see this markdown render into a diagram:

<div class="mermaid">
erDiagram
  ATLAS-ORGANIZATION ||--|{ ATLAS-PROJECTS : "has many"
  ATLAS-PROJECTS ||--|{ MONGODB-CLUSTERS : "has many"
  ATLAS-PROJECTS ||--|{ ATLAS-TEAMS : "has many"
  MONGODB-CLUSTERS ||..|{
  ATLAS-TEAMS ||..|{
</div>

If I change the version to @9, I get this error message:

If I change it to @10, I get just blank white space where the diagram would be.

This is where it gets tricky- I need to support this type of diagram as well, but it doesn't render at all, and there is no error message, for the version numbers 8, 9, 10, & 10.0.2:

<div class="mermaid">
flowchart TB
    style team fill:#9F69C4,color:#fff
    style pagerduty fill:#33FF42
    team[Service team] --> pagerduty[1. PagerDuty<br/>incident response service]
    team               --> backstage[2. Backstage<br/>catalog]
    click pagerduty "../incident-ready/pagerduty" _self
    click backstage "../incident-ready/backstage" _self
</div>

I tested this on mermaid.live & it works:

1. Why is this second diagram not working at any of the version numbers, but it works on mermaid.live?

2. Is there a way to get more than one version of mermaid to be supported by your app, so I can support the older diagrams, and also the newer mermaid syntax?

3. What is the best practice to get mermaid figure support for my use-case?

PS: I tried implementing remark-mermaid with these options, but got stuck at this error message: "Module not found: Can't resolve 'fs'"

      [remarkMermaid,
         {
           launchOptions: {
             executablePath: "path/to/chrome/executable",
           },
           errorFallback: "file",
         },
       ],

[sidharthv96]

Hi Celine,

Why is this second diagram not working at any of the version numbers, but it works on mermaid.live?

I tried with vanilla HTML and it works. Try if removing the <br/> helps with the flowchart.
https://stackblitz.com/edit/web-platform-i3pncs?file=index.html

Is there a way to get more than one version of mermaid to be supported by your app, so I can support the older diagrams, and also the newer mermaid syntax?

One of Mermaid's core principles is to not break compatibility with diagrams between versions. So all diagrams should be supported in new versions. The erDiagram issue is a bug, which needs to be investigated.

You could try to use different selector classes https://mermaid.js.org/config/usage.html#using-mermaid-run to support multiple versions. But I can't guarantee it'll work.

[celinehaddad]

One of Mermaid's core principles is to not break compatibility with diagrams between versions. So all diagrams should be supported in new versions. The erDiagram issue is a bug, which needs to be investigated.

Ahhh ok, this clears some things up. It was weird because that erDiagram rendered when I changed the mermaid script to specify version 8. Thank you for your help @sidharthv96!

[ShubhodeepSen47]

Here is next js code I am not able to render the following mermaid im not able to render the mermaid diagram using next js
1 of 1 unhandled error
Next.js (13.5.4) is outdated (learn more)

Unhandled Runtime Error
SyntaxError: The requested module 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js' does not provide an export named 'default'

Here is the code ``

![Screenshot from 2023-11-09 15-15-15](https://github.com/mermaid-js/mermaid/assets/122251035/ea1f92d3-ce42-4c87-a6ac-5b0912c92b9a)
  return (
    <div>
      <Navbar />
      <div className="diagram-container">
        <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
          {post}
        </ReactMarkdown>
        <div className="mermaid">
          {`erDiagram
            ATLAS-ORGANIZATION ||--|{ ATLAS-PROJECTS : "has many"
            ATLAS-PROJECTS ||--|{ MONGODB-CLUSTERS : "has many"
            ATLAS-PROJECTS ||--|{ ATLAS-TEAMS : "has many"
            MONGODB-CLUSTERS ||..|{
            ATLAS-TEAMS ||..{|`}
        </div>
          <div className="mermaid">
            {`
              ---
              title: Node with text
              ---
              flowchart LR
                  id1[This is the text in the box]
            
              `}
          </div>
        <Script
          type="module"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js";
              mermaid.initialize({ startOnLoad: true });
              mermaid.contentLoaded();
            `,
          }}
        />
      </div>
      <style jsx>{`
        .diagram-container {
          margin: 1rem;
          padding: 1rem;
          border: 1px solid #ccc;
          border-radius: 0.5rem;
        }
      `}</style>
    </div>
  );
}

export default Diagram;"use client";
import React, { useEffect } from "react";
import remarkGfm from "remark-gfm";
import rehypeRaw from "rehype-raw";
import ReactMarkdown from "react-markdown";
import Script from "next/script";
import Navbar from "../Components/Navbar";

const post = `# Mermaid Diagram Example

This is a simple example of a Mermaid flowchart diagram:

\`\`\`mermaid
graph TD
    A[Start] --> B[Process 1]
    B --> C[Process 2]
    C --> D[End]
\`\`\`


\`\`\`mermaid
graph LR;
A-->B;
B-->C;
B-->D[plop lanflz eknlzeknfz];
\`\`\`
`;

export function Diagram() {
  useEffect(() => {
    import("mermaid").then((mermaid) => {
      mermaid.default.initialize({ startOnLoad: true });
      mermaid.default.contentLoaded();
      
    });
  }, []);

  return (
    <div>
      <Navbar />
      <div className="diagram-container">
        <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
          {post}
        </ReactMarkdown>
        <div className="mermaid">
          {`erDiagram
            ATLAS-ORGANIZATION ||--|{ ATLAS-PROJECTS : "has many"
            ATLAS-PROJECTS ||--|{ MONGODB-CLUSTERS : "has many"
            ATLAS-PROJECTS ||--|{ ATLAS-TEAMS : "has many"
            MONGODB-CLUSTERS ||..|{
            ATLAS-TEAMS ||..{|`}
        </div>
          <div className="mermaid">
            {`
              ---
              title: Node with text
              ---
              flowchart LR
                  id1[This is the text in the box]
            
              `}
          </div>
        <Script
          type="module"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js";
              mermaid.initialize({ startOnLoad: true });
              mermaid.contentLoaded();
            `,
          }}
        />
      </div>
      <style jsx>{`
        .diagram-container {
          margin: 1rem;
          padding: 1rem;
          border: 1px solid #ccc;
          border-radius: 0.5rem;
        }
      `}</style>
    </div>
  );
}

export default Diagram;