Mermaid 圖表編輯器

編寫 Mermaid 圖表代碼,實時預覽流程圖等圖表,生成 SVG 圖形。

免費瀏覽器雲端功能消耗積分,匿名試用額度用完後需註冊。
Mermaid Editor
Mermaid Code111 chars
Loading...
Preview
Enter Mermaid code to see the diagram.

關於Mermaid 圖表編輯器

編寫 Mermaid 語法並預覽流程圖及其他支持圖表。在本地調整源碼、導出圖形,或主動創建服務端分享鏈接。

如何使用Mermaid 圖表編輯器

  1. 輸入 Mermaid 源碼或加載示例。
  2. 檢查預覽並修正語法錯誤。
  3. 導出圖表,需要上傳可分享版本時再使用分享功能。

輸入與輸出示例

輸入與設置
graph TD
  A[Start] --> B[Finish]
預期輸出
從 Start 節點指向 Finish 節點的流程圖。

適用場景

  • 為技術文檔準備流程圖。
  • 在加入 Markdown 文件前驗證圖表。

使用前需要了解的限制

支持範圍取決於當前 Mermaid 引擎。大圖可能難以渲染或閱讀,分享鏈接有服務規定的有效期。

數據處理與費用

編輯和渲染在本地完成。使用分享功能會上傳圖表源碼,並在分享生命週期內保存。只有準備讓鏈接可訪問時,才應分享相應內容。

核心瀏覽器操作免費且無需登錄,可選雲端功能有獨立的訪問與積分要求。

常見問題

支持當前 Mermaid 版本支持的所有圖表類型,包括流程圖、時序圖、類圖、狀態圖、實體關係圖、甘特圖、餅圖等。

點擊 Share 後,圖表源碼會上傳到我們的服務器,並生成一個短鏈接。分享內容會保存 30 天,之後會被自動刪除。

可以。使用 Download SVG 按鈕即可把渲染後的圖表保存為可縮放矢量文件。SVG 可以在任意瀏覽器或矢量編輯器中打開,並可無損縮放到任意尺寸。

相關工具