← Spell Book

beautiful-mermaid

ai-tools

法術評分
🔮🔮🔮○○
價格
open-source
難度
intermediate

最適合誰

前端工程師用 React 做 Mermaid 圖表渲染，受夠了 mermaid.js 的 DOM 依賴和異步閃爍問題。或者，AI agent 開發者需要在終端機裡輸出結構化圖表，目前沒有好的方案。如果你只需要 Flowchart、Sequence、Class、ER、State、XY Chart 這六種圖表，這個工具能直接改善開發體驗。

我實際怎麼用

核心 API 就一個函式：renderMermaidSVG(text, options) 同步回傳 SVG 字串。搭配 React 的 useMemo() 直接使用，沒有閃爍、沒有 useEffect waterfall。主題系統只需給背景色和前景色，其餘全部由 color-mix() 自動推導。要跟 VS Code 主題同步，用 fromShikiTheme() 一行搞定。終端機場景用 renderMermaidASCII() 輸出 Unicode box-drawing 字元圖表。

真正強的地方

  • 完全同步渲染。技術上透過攔截 ELK.js 的 FakeWorker setTimeout(0) callback 實現，是真正的零 DOM 渲染
  • 安裝體積 <2MB，依賴只有 elkjs 和 entities。相比 mmdc 需要 Puppeteer/Chromium ~300MB
  • 15 套內建主題（Tokyo Night、Catppuccin、Dracula、Nord 等），視覺品質遠超原生 mermaid.js
  • ASCII 渲染引擎用 A* 路徑規劃做邊緣路由，終端圖表目前無競品

失敗模式與不該用的情境

  • 只支援 6 種圖表類型。需要 Gantt、Mindmap、Timeline、Git Graph 請繼續用 mmdc
  • CJK 字元在 ASCII 模式有雙寬對齊問題，中文終端圖表暫時避開
  • SVG 輸出配合 dangerouslySetInnerHTML 使用，需確保 Mermaid 語法來源可信

價格、上手門檻與風險

免費，MIT 授權。npm install 即可。中等門檻，需要了解 Mermaid 語法和基礎 SVG 操作。主要風險是圖表類型覆蓋不足，以及專案才 4 個月，API 可能變動。Craft Docs 公司背書和 10,000+ stars 是正面訊號。

結論

填補了「Mermaid 語法相容、無 DOM 依賴、同步渲染、精緻主題」這個交叉需求的空白。如果你的圖表需求在支援的 6 種類型內，直接用。否則先觀察，等 v1.2.x 補上 Timeline 和 Mindmap 再評估完整切換。

來源