Flowchart Subgraphs Overlap in Next.js

[nguyenyou]

Description

I'm trying to integrate mermaid into my Next.js application, everything works fine in development mode (next dev). However, after building the application with (next build), the flow chart was broken.

Mermaid version: 9.1.7 (currently, I have to use this version, because 9.2.x version cause addHtmlLabel not found bug 🐛 after being built)
Next.js version: latest (13.x)

With next dev

With next build and next start:

My Mermaid component:

import mermaidAPI from 'mermaid'
import { useMemo } from 'react'

mermaidAPI.mermaidAPI.initialize({
  startOnLoad: false,
})

const MermaidDiagram = (props) => {
  const { value } = props

  const svg = useMemo(() => {
    const mermaidId = `mermaid-svg-${Math.round(Math.random() * 10000000)}`
    return mermaidAPI.render(mermaidId, value)
  }, [value])

  return <div dangerouslySetInnerHTML={{ __html: svg }} />
}

export default MermaidDiagram

Usage:

import dynamic from 'next/dynamic'
const MermaidDiagram = dynamic(() => import('./MermaidDiagram'), {
  ssr: false,
})

const graphDefinition = `
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
`;

const Test = () => {
  return (
    <div className='max-w-4xl mx-auto mt-20'>
      <MermaidDiagram value={graphDefinition}/>
    </div>
  )
}

Steps to reproduce

1. Create a fresh Next.js application
2. Install mermaid 9.1.7
3. Copy my components and run the application
4. Observe

Screenshots

No response

Code Sample

No response

Setup

Desktop

• OS and Version: Mac 13
• Browser and Version: Chrome

Additional Context

This library is really cool and I would love to have it in my web application. Thanks for your help.

[nguyenyou]

This issue is fixed in 9.3.0