解決的問題
每個專案重新包裝 Mermaid，常需重做縮放、主題與 SSR 相容處理。
實作方向
- 01以單一 React 元件提供圖表呈現。
- 02封裝搜尋、平移缩放與 SVG／PNG 匯出。
- 03提供 TypeScript 型別及 SSR 安全的使用方式。
回到開源作品
MermaidViewer 實際渲染：切換主題、圖內搜尋、縮放、全螢幕與 SVG／PNG 匯出都在工具列上。點擊圖片可查看原尺寸 
MermaidEditor：在畫布上拖拉節點與連線，右側即時產生對應的 Mermaid 原始碼。點擊圖片可查看原尺寸 
React Super Mermaid
開源
可嵌入 React 的 MermaidViewer，包含主題、圖內搜尋、縮放及匯出。
作品畫面
站長優惠
出國工作，網路也要跟著走
eSIM 226 是涵蓋全球 190+ 目的地的旅遊 eSIM：出發前線上把方案買好，落地掃 QR Code 就有網路，免換實體卡、免付天價漫遊費，原門號留在手機裡照樣收銀行簡訊。日本 3GB／15 天約 3.4 美元起，短程旅行不用買整個月。 優惠碼 TRAVEL30，全站 7 折（現省 30%），不得與其他優惠碼合併。
- 190+ 目的地，日韓歐美一次涵蓋
- 掃碼即開通，不必等實體卡寄送
- 走當地資費，回國不會收到漫遊帳單
本站聯盟推廣連結。透過連結購買，站長可獲得少量佣金，你的價格不會變貴。