React Component · npm

React Super Mermaid

Name: React Super Mermaid
Author: Mark Ku

A drop-in React Mermaid viewer — one <MermaidViewer> gives you beautiful themes, pan & zoom, in-diagram search, and high-res SVG / PNG export.

View on npm View on GitHub

⭐ Free · Open Source (MIT)🧩 TypeScript · SSR-safe · Lightweight

App.tsx

import { MermaidViewer } from 'react-super-mermaid'

<MermaidViewer
  code={code}
  theme="colorful"
  toolbar
/>

Live render

Key Features

Make Mermaid diagrams beautiful and interactive in React, out of the box

🎨

Whatever the AI generates, it looks good

Your chatbot or backend hands a user some Mermaid syntax — drop it in and it's already a nicely colored diagram, no CSS required. colorful and sketch (hand-drawn) themes swap live, plus default / dark / neutral / forest.

🔍

Let users find their way around a big diagram

A busy diagram makes it hard to spot the one node someone actually cares about. Press / or Ctrl / Cmd+F to search, highlight, and jump between matches — you don't have to build that yourself.

🖐️

Pan and zoom, built in

An AI-generated architecture diagram is often bigger than the screen. Mouse-wheel zoom and drag-to-pan are already wired up, so users can explore it themselves — you don't have to touch svg-pan-zoom directly.

🖼️

Let users take the diagram with them

Someone wants to save the diagram, drop it in a slide deck, or share it — one click exports SVG or PNG at 1x / 2x / 4x, no extra image-conversion library on your side.

🪶

Won't quietly bloat your app

Worried one more package inflates your bundle? mermaid and svg-pan-zoom are optional peer dependencies — never bundled in unless you actually use them.

▲

Works in Next.js without the workarounds

Rendering a diagram in a framework that runs on the server first usually hits a "window is not defined" wall. This component ships its own 'use client' boundary, so it just drops into the App Router.

🧩

Autocomplete instead of guesswork

Need to drive zoom, jump-to-node, or export from your own code? Full TypeScript types and a ref API mean your IDE tells you what's available — no digging through docs.

⚙️

One line and it just works

No setup to study first — <MermaidViewer code={code} /> works out of the box; toolbar / panZoom / search / exportable can each be switched off individually.

Supported Diagram Types

Renders the full range of Mermaid diagrams

Loading diagram…

Switch types with the tabs above · pan, zoom, search, export, toggle background or go fullscreen

✦ New · MermaidEditor

Draw it — get Mermaid for free

An Excalidraw-style node/edge editor: drop nodes, drag an arrow from a node to connect, double-click to rename. The Mermaid source updates live on the right. Bidirectional — paste existing Mermaid and edit it as a hand-drawn diagram.

Drawing canvas (draggable)

Loading editor…

Live Mermaid output

flowchart TD
  A([User request]) --> B{Logged in?}
  B -- Yes --> C[Load dashboard]
  B -- No --> D[/Show login/]
  C --> E[(Database)]

Toolbar: ➤ Select / ＋ Node / ↘ Edge / ✋ Pan · double-click to rename, Del to delete, Ctrl+Z to undo, scroll to zoom.

Quick Start

Install, add the optional peers, then drop in a <MermaidViewer>.

Install

Optional peers (for pan/zoom and rendering)

npm i mermaid svg-pan-zoom

mermaid and svg-pan-zoom are optional peers — install only what you need, or load them from a CDN.

Usage

import { MermaidViewer } from 'react-super-mermaid'

const code = `flowchart TD
  A([User]) --> B{Logged in?}
  B -- Yes --> C[Dashboard]
  B -- No  --> D[Login page]`

export default function App() {
  return <MermaidViewer code={code} theme="colorful" toolbar />
}

Common Props & Ref API

Everything is fully typed, with IDE autocompletion.

codestring

Mermaid source (required).

Diagram theme, live-switchable. Defaults to colorful.

toolbarboolean

Show the toolbar; set false for a diagram-only view.

panZoom / search / exportableboolean

Toggle pan & zoom, in-diagram search, and export buttons individually.

ref → zoomIn() / fit() / search()MermaidViewerHandle

Imperatively zoom, recenter, and search the diagram.

ref → downloadPng(name, opts)Promise<void>

Export a PNG programmatically with a filename and scale (1 / 2 / 4).

More Mermaid tools

Same rendering engine, wherever you need it

Put beautiful Mermaid diagrams in your React app

Free, open source, TypeScript, and SSR-safe. Run npm i react-super-mermaid now.

Install from npm View on GitHub

React Super Mermaid — Drop-in React Mermaid Viewer Component | Mark Ku's Tech Blog - Mark Ku's Tech Notes

🎙️ AI Agents Landing in Taiwan for the First Time? Copilot Memory Pollution and OpenAI SMS Feature Warning | AI Daily Podcast

📈 AI Stock Chat, 2026-08-21 | Quarterly line reclaimed but 80,000 foreign short contracts loom; major bull-bear showdown next Monday!