<MermaidAdapter>

Renders a Mermaid chart and bridges its rendered nodes/edges to DiagramStepper regions.

Preview Code

import { Slide, DiagramStepper } from '@react-slides/core'
import { MermaidAdapter } from '@react-slides/plugin-mermaid'
import { regionFadeIn } from '@react-slides/plugin-motion'

const slides = () => {
return (
  <>
    <Slide>
      <DiagramStepper
        animation={regionFadeIn}
        steps={[
          { show: ['comp'] },
          { show: ['hook', 'edge1'] },
          { show: ['dom', 'edge2'], highlight: ['dom'] },
        ]}
      >
        <MermaidAdapter
          chart={`graph LR
A[Component] -->|calls| B[Hook]
B -->|updates| C[DOM]`}
          regionMap={{
            A: 'comp', B: 'hook', C: 'dom',
            'A-B': 'edge1', 'B-C': 'edge2',
          }}
          config={{ theme: 'dark' }}
        />
      </DiagramStepper>
    </Slide>
  </>
)
}

export default slides

Name	Type	Default	Description
chart	string	—	Mermaid chart definition.
regionMap	Record<string, string>	—	Map Mermaid node/edge IDs to DiagramStepper region IDs.
config?	Record<string, unknown>	—	Pass-through Mermaid configuration.
className?	string	—	Class on the wrapping div.

Region IDs

For nodes, the Mermaid node identifier (e.g. A). For edges, the convention is <source>-<target> (e.g. A-B). Inspect the rendered SVG if you’re unsure.