Skip to main content

Using React Flow for Diagrams

Use the MermaidToReactFlow component to embed diagrams. It accepts a simple Mermaid-like flowchart string and renders it with React Flow, with auto-layout via dagre.

Example

import MermaidToReactFlow from '@site/src/components/MermaidToReactFlow.jsx';

<MermaidToReactFlow
  definition={`flowchart TB
  A["Start"] --> B["Do thing"]
  B --> C{"Success?"}
  C --> D["Done"]
  C --> E["Handle error"]
  `}
/>

Notes

  • Keep node labels concise. Longer text will wrap within the node width.
  • The component is client-rendered and supports pan/zoom and fit-to-view.
  • Direction defaults to top-to-bottom. Use flowchart LR for left-to-right.