Riley1101/mermaidcn

Mermaid diagram renderer for React

Summary

mermaidcn is a React renderer for Mermaid.js diagrams, distributed as drop-in components that fit the shadcn/ui install flow. It ships a pure <Mermaid /> renderer, a generic <ZoomPan /> wrapper, and a <MermaidPlayground /> editor, with theme support and dynamic loading handled internally.

What it is useful for

Engineers who already use shadcn/ui in a Next.js or React project and want to embed Mermaid diagrams (flowcharts, sequence diagrams, ER diagrams, and others) without wiring up the Mermaid library themselves. The <Mermaid /> component manages loading and error states, and the <ZoomPan /> wrapper is described as a generic canvas for panning and pinch-zooming any React content, not just Mermaid output, so it can be reused for other diagrams or images. <MermaidPlayground /> fits documentation sites or internal tools that need a live editor where users pick a theme, choose a template, and see the rendered diagram update as they type.

How engineers can use it

The README documents two install paths. The shadcn CLI pulls each component into your project:

npx shadcn@latest add https://mermaidcn.vercel.app/r/mermaid.json https://mermaidcn.vercel.app/r/mermaid-themes.json
npx shadcn@latest add https://mermaidcn.vercel.app/r/zoom-pan.json
npx shadcn@latest add https://mermaidcn.vercel.app/r/mermaid-playground.json

For manual install, run npm install mermaid and copy mermaid.tsx, zoom-pan.tsx, and mermaid-playground.tsx from components/mermaidcn/ into your project.

The README's quick start shows rendering a diagram by passing a chart string prop to <Mermaid />:

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`}
    />
  );
}

The README states the component uses dynamic imports and debounced rendering so the Mermaid library loads lazily. Theming is provided by the bundled mermaid-themes.json shadcn block, which the README describes as including the built-in Mermaid themes plus custom oklch-based themes. The repository is published under the MIT License.

The README does not list explicit limitations, and the project is built around Next.js and shadcn/ui, so it fits most naturally into that stack. Full configuration and live examples are linked from the README at mermaidcn.vercel.app.