Mark Ku's Blog
React 元件庫 · npm

React Super Mermaid

Drop-in 的 React Mermaid 檢視元件 — 一行 <MermaidViewer> 就有漂亮主題、平移縮放、圖內搜尋與 SVG / PNG 高解析匯出。

前往 npmGitHub 原始碼
⭐ 免費 · 開源 (MIT)🧩 TypeScript · SSR 安全 · 輕量
App.tsx
import { MermaidViewer } from 'react-super-mermaid'

<MermaidViewer
  code={code}
  theme="colorful"
  toolbar
/>
即時渲染

主要功能

讓 Mermaid 圖表在 React 裡「開箱即美、開箱即互動」

🎨

AI 吐出來的語法，直接變好看的圖

AI 聊天視窗或後端幫使用者生成一段 Mermaid 語法，丟進來就自動變成配色好看的圖，不用自己刻 CSS；colorful 現代配色跟 sketch 手繪風可即時切換，另有 dark / neutral / forest。

🔍

圖太大，讓使用者自己找

圖一大張，使用者常常找不到自己在意的那個節點；按 / 或 Ctrl / Cmd+F 就能搜尋、高亮、逐一跳轉，不用你另外刻搜尋功能。

🖐️

縮放平移，內建就有

AI 產生的架構圖常常比螢幕還大，滑鼠滾輪縮放、拖曳平移都內建好了，使用者自己就能探索整張圖，你不用自己接 svg-pan-zoom 這些細節。

🖼️

讓使用者把圖存下來

使用者想把這張圖存下來、放進簡報或分享出去，一鍵匯出 SVG 或 PNG，1x / 2x / 4x 解析度都有，你不用自己接圖片轉檔的套件。

🪶

不會偷偷拖慢你的 App

怕多裝一個套件就讓 bundle 變大？mermaid 跟 svg-pan-zoom 都是選用依賴，沒用到就不會被打包進你的產品，效能不用犧牲。

▲

Next.js 直接用，不用踩坑

在 Next.js 這種先跑一次伺服器渲染的框架裡，直接畫圖常會踩到「找不到 window」的坑；這個元件內建 'use client' 邊界，丟進 App Router 就能動。

🧩

打字就有提示，不用猜參數

要用程式控制圖表縮放、跳轉、匯出？完整 TypeScript 型別加上 ref API，IDE 打字就有提示，不用翻文件用猜的。

⚙️

一行就能動

不用先研究一堆設定，一行 <MermaidViewer code={code} /> 就能運作；要不要工具列、平移縮放、搜尋、匯出，個別開關就好。

支援的圖表類型

Mermaid 全系列圖表都能渲染

Loading diagram…

點上方分頁切換圖表類型 · 可平移縮放、搜尋、匯出、切背景或全螢幕檢視

✦ 新功能 · MermaidEditor

用畫的，自動產生 Mermaid

Excalidraw 式的節點／連線編輯器 — 拖曳放節點、從節點邊緣拉出箭頭連線、雙擊改名，右側即時產生對應的 Mermaid 原始碼。雙向：貼上既有 Mermaid 也能變成可拖曳的手繪圖。

繪製畫布（可拖曳）
Loading editor…
即時產生的 Mermaid
flowchart TD
  A([使用者請求]) --> B{已登入？}
  B -- 是 --> C[載入儀表板]
  B -- 否 --> D[/導向登入頁/]
  C --> E[(資料庫)]

工具列：➤ 選取 ／ ＋ 節點 ／ ↘ 連線 ／ ✋ 平移；雙擊節點改名、Del 刪除、Ctrl+Z 復原、滾輪縮放。

快速開始

安裝、選用 peer 依賴，然後丟一個 <MermaidViewer> 進去就好。

安裝

選用 peer 依賴（要平移縮放與渲染時）

npm i mermaid svg-pan-zoom

mermaid 與 svg-pan-zoom 是 optional peer，依需求安裝即可；也可改用 CDN 載入。

使用方式

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 />
}

常用 Props 與 Ref API

全部都有 TypeScript 型別，IDE 自動補全。

codestring

Mermaid 原始碼（必填）。

themecolorful | sketch | auto | default | dark | neutral | forest

圖表主題，可即時切換，預設 colorful。

toolbarboolean

是否顯示工具列；設 false 即純圖表模式。

panZoom / search / exportableboolean

個別開關平移縮放、圖內搜尋、匯出按鈕。

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

命令式操作圖表的縮放、置中與搜尋。

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

程式化匯出 PNG，可指定檔名與 scale（1 / 2 / 4）。

還有其他 Mermaid 工具

同一套繪圖引擎，看你在哪裡用

VS Code Super Mermaid

在 VS Code 裡寫 Markdown 順便畫圖，存檔就有預覽，離線也能用。

前往看看

Jira / Confluence Super Mermaid

團隊在 Jira、Confluence 上溝通用，圖直接嵌在 issue 或頁面內文裡。

前往看看

Mermaid 線上預覽

不想安裝任何東西？瀏覽器打開就能寫、能看、一鍵分享連結。

前往看看

在你的 React App 裡放上漂亮的 Mermaid 圖

免費、開源、TypeScript、SSR 安全。現在就 npm i react-super-mermaid。

前往 npm 安裝GitHub 原始碼
Mark Ku's Blog
FacebookYouTubeGitHubEmail

文章分類

快速連結

技術專長

React Super Mermaid — Drop-in React Mermaid 圖表元件 | Mark Ku 的技術部落格 - Mark Ku's Blog