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)
| import Mermaid from '@site/src/js/mermaid'; | |
| # Example graph | |
| <Mermaid chart={` | |
| graph TD; | |
| A-->B; | |
| A-->C; | |
| B-->D; | |
| C-->D; | |
| `}/> |
| 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}/> | |
| } |