Mermaid 線上編輯器
貼上程式碼即時預覽，匯出 PNG/SVG 並產生分享連結，資料不上傳
100% 瀏覽器本地渲染，圖表內容不上傳
…
如何使用？
1
貼上 Mermaid 語法
在左側貼入程式碼，或從上方下拉載入範本
2
即時預覽
右側自動渲染圖表，語法錯誤會即時提示
3
匯出或分享
下載 PNG/SVG，或複製一條打開即看到圖的分享連結
Mermaid 語法快速參考
流程圖 (Flowchart)
- 方向：
TD上至下 /LR左至右 - 節點：
[矩形]/(圓角)/{菱形} - 連線：
-->箭頭 /---實線 - 連線文字：
-->|文字|
graph TD
A[開始] --> B{判斷}
B -->|是| C[執行]
B -->|否| D[結束]
時序圖 (Sequence)
- 角色：
participant/actor - 實線箭頭：
A->>B: 訊息 - 虛線返回：
B-->>A: 回傳 - 備註欄：
Note over A: 說明
sequenceDiagram
U->>A: 請求
A->>S: 查詢
S-->>A: 回傳
A-->>U: 回覆
甘特圖 (Gantt)
- 區段：
section 區段名稱 - 狀態：
active/done/crit - 時程：
開始日期, 持續時間 - 相依性：
after id
gantt
dateFormat YYYY-MM-DD
section 開發
分析 :done, a1, 2026-06-01, 3d
設計 :active, a2, after a1, 4d
ER 關係圖 (ER)
- 關係：
||--o{一對多 /||--||一對一 - 屬性欄位：
型態 名稱 - 關係說明：
A ||--o{ B : "說明"
erDiagram
USER ||--o{ ORDER : "places"
USER {
int id
string name
}
常見問題
我的圖表程式碼會上傳到伺服器嗎？
完全不會。Mermaid 引擎在你的瀏覽器中執行，所有渲染、匯出與分享連結編碼都在本地完成，圖表內容從未離開你的設備。
支援哪些 Mermaid 圖表類型？
支援流程圖、時序圖、甘特圖、類別圖、狀態圖、ER 圖、圓餅圖、心智圖等 Mermaid v11 內建的所有圖表語法。
如何把圖表嵌入我的文件？
你可以匯出 SVG（向量、可無限放大）或 PNG（點陣圖、支援 1x/2x/3x 解析度），也可以直接複製 SVG 原始碼貼到網頁或文件中。
分享連結是如何運作的？有大小限制嗎？
分享連結會把圖表程式碼用 deflate 壓縮後編碼進網址的 # 片段，打開連結即自動還原並渲染，無需伺服器。極大的圖表可能讓網址在部分平台被截斷，此時建議改用匯出 SVG/PNG。
為什麼 AI / LLM 產生的 Mermaid 圖貼上就能看？
LLM 常以純文字輸出 Mermaid 語法，本工具直接把這段文字即時渲染成圖。Agent 也可以產生一條已內嵌圖表的分享連結，讓使用者打開就看到圖。