docusaurus-mermaid

docusaurus-mermaid.md

I couldn't find any solution to use Mermaid without changing the theme to @docusaurus/theme-mermaid and trying to write a solution, and... it works great.

Create mermaid.js in /src/js/ and use it in MDX as below

(Don't forget remove .example extension from example.mdx.example)

example.mdx.example

import Mermaid from '@site/src/js/mermaid';

# Example graph

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

mermaid.js

import React, { useEffect, useRef, useState } from 'react'
import mermaid from 'mermaid'
import { useColorMode } from '@docusaurus/theme-common'

export default ({ chart }) => {
  const ref = useRef(null)

  const [id] = useState(
    'mermaid-' + Math.random()
    .toString(36)
    .slice(4)
  )

  const { colorMode } = useColorMode()

  useEffect(() => {
    mermaid.mermaidAPI.initialize({
      startOnLoad: true,
      securityLevel: 'loose',
      logLevel: 5
    })
  })

  useEffect(() => {
    if (ref.current && chart !== '') {
      mermaid.mermaidAPI.render(
        id, `%%{init: {'theme':'${colorMode === 'dark' ? 'dark' : 'neutral'}'}}%%` + chart,
        result => {
          ref.current.innerHTML = result
        })
    }
  }, [chart, colorMode])

  return <div key={id} ref={ref}/>
}