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
/>
Public Wi-Fi and travel, handled by NordVPN
One tap encrypts everything, with servers in 137 countries. 10 devices per account, 30-day money-back guarantee.
Contains affiliate links
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.
Deal
The network you code on is rarely your own
NordVPN encrypts the whole connection: café and hotel Wi-Fi stop being someone else's listening post, and while you travel your bank app, your company dashboards and the streaming services back home still work. One tap in the app, and the NordLynx protocol keeps it fast enough that you forget it is on. One account covers 10 devices, with a 30-day money-back guarantee.
- Public Wi-Fi encrypted end to end
- Servers in 137 countries, reach home services abroad
- 10 devices per account, 30-day refund
Contains affiliate links