回到開源作品

React Super Mermaid

開源

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

作品畫面

MermaidViewer 實際渲染:切換主題、圖內搜尋、縮放、全螢幕與 SVG/PNG 匯出都在工具列上。
MermaidViewer 實際渲染:切換主題、圖內搜尋、縮放、全螢幕與 SVG/PNG 匯出都在工具列上。點擊圖片可查看原尺寸
MermaidEditor:在畫布上拖拉節點與連線,右側即時產生對應的 Mermaid 原始碼。
MermaidEditor:在畫布上拖拉節點與連線,右側即時產生對應的 Mermaid 原始碼。點擊圖片可查看原尺寸

解決的問題

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

實作方向

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

Deal

Stay online when you work abroad

eSIM 226 is a travel eSIM covering 190+ destinations worldwide: buy the plan before you fly, scan the QR code on landing and you are online. No SIM swap, no roaming bill, and your own number stays in the phone to keep receiving bank SMS. Japan 3GB / 15 days starts around US$3.4, so a short trip never costs a full month. Use TRAVEL30 for 30% off sitewide. Cannot be combined with other promo codes.

  • 190+ destinations across Asia, Europe and the Americas
  • Instant QR activation, nothing to ship or queue for
  • Local rates instead of roaming, no bill shock at home

Affiliate link. Buying through it may earn this site a small commission, at no extra cost to you.

See plans