🔀 Mermaid 流程圖編輯器

用簡單的文字語法即時繪製流程圖、時序圖、ER 圖、甘特圖、心智圖，支援 SVG/PNG 格式匯出，告別手動拖拉繪圖的麻煩。

什麼是 Mermaid 圖表編輯器？

Mermaid 編輯器讓你用簡單的文字語法即時繪製流程圖、時序圖、ER 圖、甘特圖與心智圖，並支援匯出 SVG/PNG。相較於手動拖拉繪圖，用文字描述圖表能快速建立、輕鬆修改，也方便放進 Markdown 文件與版本控制。

你只要輸入 Mermaid 語法，右側即時預覽圖形，調整文字就能改變圖形，省去對齊與排版的瑣事。

適用情境

如何使用

  1. 在編輯區輸入 Mermaid 語法（如 flowchart、sequenceDiagram）。
  2. 右側即時預覽產生的圖形。
  3. 調整文字節點與連線直到滿意。
  4. 匯出 SVG 或 PNG，放進文件或簡報。

使用技巧

名詞解釋

Mermaid
以純文字語法描述並產生圖表的工具與語言。
流程圖
用節點與箭頭表示步驟與流向的圖。
時序圖
呈現多個參與者之間訊息往來時序的圖。

常見問題 FAQ

什麼是 Mermaid 語法？

Mermaid 是一種以文字描述圖表的開源語言，讓您可以用程式碼（而非手動拖拉）建立各種圖表，包含流程圖、時序圖、ER 圖、甘特圖等。因其簡潔易讀，已被 GitHub、GitLab、Notion 等平台原生支援。

如何繪製一個基本的流程圖？

使用 `flowchart TD`（由上往下）或 `flowchart LR`（由左往右）開頭，然後用 A[文字] 定義節點，用 --> 連接，例如：flowchart TD\n A[開始] --> B{判斷} --> C[結束]。方框用 []，菱形（判斷）用 {}，圓角用 ()。

繪製的圖表可以匯出嗎？

支援 SVG 和 PNG 兩種格式匯出。SVG 為向量格式，縮放不失真，適合插入文件或網頁；PNG 為點陣圖，適合直接貼入簡報或通訊軟體。也可以點擊「複製 SVG」直接取得 SVG 程式碼。

Mermaid 支援哪些圖表類型？

Mermaid 10.x 支援：流程圖（flowchart）、時序圖（sequenceDiagram）、ER 圖（erDiagram）、甘特圖（gantt）、心智圖（mindmap）、類別圖（classDiagram）、狀態圖（stateDiagram-v2）、圓餅圖（pie）、Git 分支圖（gitGraph）、使用者旅程圖（journey）等多種類型。

Mermaid 支援哪些圖表？

支援流程圖、時序圖、ER 圖、甘特圖、心智圖等多種類型，用對應的語法關鍵字即可繪製。

可以匯出圖片嗎？

可以。支援匯出 SVG 與 PNG：SVG 可無損縮放適合印刷，PNG 適合一般文件與簡報。

用文字畫圖有什麼好處？

修改快速（改文字即改圖）、易於版本控制與協作，也能直接嵌入支援 Mermaid 的 Markdown 平台，不必每次重新拖拉排版。

資料會上傳嗎？

不會。圖表在你的瀏覽器本機渲染，內容不會上傳或儲存。