@avol-io/react-mermaid

React component that renders Mermaid diagrams with zoom, pan, directional controls, fullscreen, download, and draw.io integration.

Installation

npm install @avol-io/react-mermaid

Peer dependencies

npm install react react-dom mermaid react-zoom-pan-pinch

Usage

import { MermaidDiagram } from '@avol-io/react-mermaid'

export function App() {
  return (
    <MermaidDiagram
      chart={`
        graph TD
          A[Start] --> B{Decision}
          B -- Yes --> C[Done]
          B -- No  --> D[Skip]
      `}
      width="100%"
      height="400px"
    />
  )
}

API

MermaidDiagram

When both enableDownloadSvg and enableDownloadMmd are false, the download dropdown button is not rendered at all.

Modal

Toolbar

Top-right

• Download — dropdown with SVG and .mmd options (each independently toggleable via props)
• Open in draw.io — opens app.diagrams.net with the diagram preloaded via Mermaid import URL
• Fullscreen — toggles a fixed fullscreen overlay

Bottom-right (3×3 grid)

• Arrow buttons — pan the diagram in all four directions
• Center button — resets the view to fit the content in the container
• Zoom in / Zoom out — step zoom (wheel zoom also supported, follows the cursor)

Styling

No CSS import required. On first render a <style id="avol-react-mermaid-styles"> tag is injected into <head> once and reused by all instances.

All colors and sizes are exposed as CSS custom properties. Override them on :root for a global theme, or scope to a container class for per-instance theming:

/* dark theme example */
:root {
  --mermaid-bg: #1f2937;
  --mermaid-border-color: #374151;
  --mermaid-toolbar-bg: rgba(17, 24, 39, 0.9);
  --mermaid-toolbar-color: #f9fafb;
  --mermaid-toolbar-hover-bg: #111827;
  --mermaid-toolbar-border: #4b5563;
  --mermaid-fullscreen-bg: #111827;
  --mermaid-dropdown-bg: #1f2937;
  --mermaid-dropdown-item-color: #f3f4f6;
  --mermaid-dropdown-item-hover: #374151;
}

Available tokens

Live docs

https://www.avol.io/react-mermaid/

License

MIT © avol.io