mermaidcn
v0.1.0shadcn/ui compatible

Mermaid diagrams
for React

A customizable, shadcn-compatible Mermaid.js renderer with built-in zoom and pan. Copy. Paste. Render.

Preview

No diagram code provided

<Mermaid />

component

Pure renderer component. Pass a Mermaid chart string and an optional config, get a rendered SVG. Handles loading, error states, and dynamic imports automatically.

Props

PropTypeDefaultDescription
chart*string-The Mermaid diagram definition string to render.
configMermaidConfig-Configuration object for theming, fonts, and diagram-specific options.
classNamestring-Additional CSS classes for the container element.
onSuccess(svg: string) => void-Callback fired with the rendered SVG string on success.
onError(error: string) => void-Callback fired with the error message on render failure.
debounceTimenumber300Delay in ms before rendering triggers (useful for live editors).

Basic Usage

my-diagram.tsxtsx
import { Mermaid } from "@/components/mermaidcn/mermaid"

export function MyDiagram() {
  return (
    <Mermaid
      chart={`sequenceDiagram
        participant C as Client
        participant S as Server
        C->>S: POST /api/data
        S-->>C: 200 OK`}
    />
  )
}

Preview

Basic Mermaid

No diagram code provided

With Theming

themed-diagram.tsxtsx
import { Mermaid } from "@/components/mermaidcn/mermaid"

export function ThemedDiagram() {
  return (
    <Mermaid
      chart={`flowchart LR
        A([Input]) --> B[Process]
        B --> C([Output])`}
      config={{
        theme: "forest",
        fontSize: 16,
        fontFamily: "Inter, sans-serif",
      }}
    />
  )
}

Preview

Forest Theme

No diagram code provided

<ZoomPan />

component

Generic zoom and pan wrapper. Wraps any React content in a scrollable, pannable, pinch-zoomable canvas. Not coupled to Mermaid -- use it with images, maps, or any content.

Props

PropTypeDefaultDescription
children*React.ReactNode-Content to render inside the zoomable, pannable canvas.
controls(api) => ReactNode-Render-prop exposing zoomIn, zoomOut, resetZoom, centerView, and scalePercent.
classNamestring-Additional CSS classes for the outer wrapper.
minScalenumber0.1Minimum zoom scale.
maxScalenumber5Maximum zoom scale.
initialScalenumber1Initial zoom scale on mount.
zoomStepnumber0.1Scale increment per scroll tick.
isLoadingbooleanfalseWhether the component is in a loading state.
loadingFallbackReact.ReactNode-Custom UI to show during the loading state.

Wrapping Mermaid in ZoomPan

zoomable-diagram.tsxtsx
import { Mermaid } from "@/components/mermaidcn/mermaid"
import { ZoomPan } from "@/components/mermaidcn/zoom-pan"

export function ZoomableDiagram() {
  return (
    <ZoomPan
      className="h-[400px]"
      controls={({ zoomIn, zoomOut, resetZoom, scalePercent }) => (
        <div className="flex items-center gap-2 p-2">
          <button onClick={zoomOut}>-</button>
          <span>{scalePercent}%</span>
          <button onClick={zoomIn}>+</button>
          <button onClick={resetZoom}>Reset</button>
        </div>
      )}
    >
      <Mermaid chart="classDiagram\n  class Animal" />
    </ZoomPan>
  )
}

Preview

Zoom & Pan (scroll to zoom, drag to pan)

No diagram code provided

useZoomPan Hook

For fully custom implementations, use the useZoomPan hook to get zoom state and control functions without the wrapper component.

custom-zoom.tsxtsx
import { useZoomPan } from "@/components/mermaidcn/zoom-pan"

export function CustomZoom() {
  const { zoomIn, zoomOut, resetZoom, scalePercent } = useZoomPan()

  return (
    <div>
      <p>Current zoom: {scalePercent}%</p>
      <button onClick={zoomIn}>Zoom In</button>
      <button onClick={zoomOut}>Zoom Out</button>
      <button onClick={resetZoom}>Reset</button>
    </div>
  )
}

<MermaidPlayground />

component

A complete Mermaid editor and preview environment. Includes theme selection, templates, and live editing capabilities.

Props

PropTypeDefaultDescription
defaultValuestring-Initial Mermaid diagram code.
classNamestring-Additional CSS classes for the container.

Usage

playground.tsxtsx
import { MermaidPlayground } from "@/components/mermaidcn/mermaid-playground"

export function MyPlayground() {
  return (
    <div className="h-[600px] w-full">
      <MermaidPlayground />
    </div>
  )
}

Preview

Preview

No diagram code provided

Installation

Install individual components via the shadcn CLI, or copy the source files directly.

Mermaid Renderer

ZoomPan Wrapper

Manual Installation

1. Install the mermaid dependency:

npm install mermaid

2. Copy the component files into your project:

components/
  mermaidcn/
    mermaid.tsx      # Pure renderer
    zoom-pan.tsx     # Zoom & pan wrapper

3. Import and use:

example.tsxtsx
import { Mermaid } from "@/components/mermaidcn/mermaid"

export function MyDiagram() {
  return (
    <Mermaid
      chart={`sequenceDiagram
        participant C as Client
        participant S as Server
        C->>S: POST /api/data
        S-->>C: 200 OK`}
    />
  )
}