docusaurus-mermaid-theme-sync.js

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

mermaid.initialize({
  startOnLoad: true,
  theme: 'neutral'
});

const Mermaid = ({ chart }) => {
  const { colorMode } = useColorMode();

  useEffect(() => {
    mermaid.contentLoaded()
  });

  return <div className="mermaid">{`%%{init: {'theme':'${colorMode === 'dark' ? 'dark' : 'neutral' }'}}%%`}{chart}</div>;
};

export default Mermaid;

Usage:

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

<Mermaid chart={`
sequenceDiagram
	A->>B
`}/>