React Super Mermaid
A drop-in React Mermaid viewer — one <MermaidViewer> gives you beautiful themes, pan & zoom, in-diagram search, and high-res SVG / PNG export.
import { MermaidViewer } from 'react-super-mermaid'
<MermaidViewer
code={code}
theme="colorful"
toolbar
/>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
Switch types with the tabs above · pan, zoom, search, export, toggle background or go fullscreen
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.
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-zoommermaid 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.
codestringMermaid source (required).
themecolorful | sketch | auto | default | dark | neutral | forestDiagram theme, live-switchable. Defaults to colorful.
toolbarbooleanShow the toolbar; set false for a diagram-only view.
panZoom / search / exportablebooleanToggle pan & zoom, in-diagram search, and export buttons individually.
ref → zoomIn() / fit() / search()MermaidViewerHandleImperatively 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
VS Code Super Mermaid
Write Markdown in VS Code and get diagrams for free — save the file, see the preview, works offline.
Check it outJira / Confluence Super Mermaid
For teams collaborating in Jira and Confluence — diagrams live right inside the issue or page.
Check it outMermaid Live Preview
Don't want to install anything? Write, preview and share a link straight from the browser.
Check it outPut beautiful Mermaid diagrams in your React app
Free, open source, TypeScript, and SSR-safe. Run npm i react-super-mermaid now.
Every tool here is free and open source
No paywall, no sign-up, and the source is public on GitHub. If one of them saved you time, buy me a coffee so the updates and the next tool keep coming.