DevToy

Mermaid 圖表編輯器

在本機編寫文字、驗證語法,並將圖表匯出為 SVG 或 PNG。

正在載入渲染器

Mermaid 程式碼編輯器

即時圖表預覽

No diagram to render.

什麼是 Mermaid?

Mermaid 能把文字定義轉換成圖表。由於來源是文字,團隊可以在 Pull Request 中審查、透過 Git 追蹤變更,並讓圖表與技術文件保持同步。

編輯器支援流程圖、時序圖、類別圖、ER 圖和甘特圖,全部在瀏覽器本機渲染,並可匯出 SVG 或 PNG。

如何選擇圖表類型

  • 流程圖適合描述決策和流程。
  • 時序圖適合展示系統間隨時間發生的訊息。
  • ER 圖適合記錄實體和資料庫關係。
  • 類別圖適合描述型別、成員和繼承。
  • 甘特圖適合溝通排程和相依關係。

最小流程圖範例

flowchart LR
  請求 --> 驗證{有效?}
  驗證 -->|是| 發布
  驗證 -->|否| 修改

安全的本機渲染

原始碼只儲存在目前瀏覽器的 localStorage,不會由 DevToy 上傳。渲染採用 Mermaid 嚴格安全模式。

常見問題

應該匯出 SVG 還是 PNG?

文件和設計工具優先使用可無損縮放的 SVG;目標平台不接受 SVG 時使用 PNG。

看似正確的語法為什麼報錯?

檢查圖表關鍵字、縮排、保留字、引號和版本差異,並從最接近的範本逐行增加。

圖表原始碼會自動保存嗎?

目前原始碼保存在本裝置;清除瀏覽器儲存空間後會被刪除。