📝工具簡介
Draw flowcharts with the open-source Mermaid diagram engine.
✨功能特點
- 七種圖表型別一鍵切換
- 即時渲染（500ms 防抖）
- Tab 鍵縮排，編輯體驗流暢
- 自動儲存到本地，重新整理不丟失
- 跟隨深色 / 淺色主題
- 匯出 SVG 與 PNG
- 純前端執行，資料不上傳
- 移動端響應式佈局
🎯使用場景
- 梳理業務流程與決策分支
- 繪製介面呼叫時序圖
- 規劃專案開發甘特圖
- 設計資料庫 ER 模型
- 描述物件類與繼承關係
- 梳理訂單狀態機流轉
- 視覺化資料佔比餅圖
- 編寫技術文件與方案
💬常見問題
Mermaid 程式碼寫錯了沒有渲染怎麼辦？
預覽區下方會顯示紅色的錯誤提示資訊，包含出錯位置與原因，根據提示修正程式碼後會自動重新渲染。
匯出的 PNG 背景是什麼顏色？
PNG 會跟隨當前主題：淺色模式下背景為白色，深色模式下背景為深色，方便直接貼上到對應主題的文件中。
我的程式碼會被儲存嗎？
會。編輯內容會自動儲存到瀏覽器 localStorage，下次開啟同一頁面時自動恢復，資料僅存在本地。
支援哪些圖表型別？
目前支援流程圖（flowchart）、時序圖（sequence）、甘特圖（gantt）、類圖（class）、狀態圖（state）、ER 圖（er）和餅圖（pie）共七種，點選頂部標籤可載入對應示例。