回到開源作品

React Super Mermaid

開源

可嵌入 React 的 MermaidViewer，包含主題、圖內搜尋、縮放及匯出。

作品畫面

MermaidViewer 實際渲染：切換主題、圖內搜尋、縮放、全螢幕與 SVG／PNG 匯出都在工具列上。 — MermaidViewer 實際渲染：切換主題、圖內搜尋、縮放、全螢幕與 SVG／PNG 匯出都在工具列上。點擊圖片可查看原尺寸

MermaidEditor：在畫布上拖拉節點與連線，右側即時產生對應的 Mermaid 原始碼。 — MermaidEditor：在畫布上拖拉節點與連線，右側即時產生對應的 Mermaid 原始碼。點擊圖片可查看原尺寸

解決的問題

每個專案重新包裝 Mermaid，常需重做縮放、主題與 SSR 相容處理。

實作方向

01以單一 React 元件提供圖表呈現。
02封裝搜尋、平移缩放與 SVG／PNG 匯出。
03提供 TypeScript 型別及 SSR 安全的使用方式。