Dev Tools
純前端檔案不上傳

Mermaid 流程圖編輯器

用純文字寫流程圖、序列圖、甘特圖、心智圖、類別圖、圓餅圖,即時預覽,可下載 SVG / PNG。**Mermaid** 是 GitHub / Notion / Slack / GitLab 都原生支援的圖表語法,版本控制友善(diff 看得到改了什麼)。內建 6 種範本,套上就改就有。

範本
›如何使用
  1. 左側輸入 Mermaid 語法(flowchart、sequenceDiagram、gantt、mindmap、classDiagram、erDiagram、pie)。
  2. 右側即時渲染,字型 / 顏色跟著 dark mode 切換。
  3. 工具列選 SVG / PNG 下載,直接拖進 GitHub README / Notion / blog。
  4. 範例下拉選單有 7 種圖表 starter,改幾個字就能用。
Tips
  • GitHub Issue / README 直接貼 ```mermaid 程式碼,不必先轉圖。
  • 甘特圖記得加 dateFormat YYYY-MM-DD,不然會用月份格式。

Mermaid 渲染由 mermaid.js 完成,純客戶端,你的 diagram 不會送到任何伺服器。

Mermaid 完整指南:流程圖 / 序列 / 甘特 / ER / class 7 種圖一次學會,直接貼 GitHub

畫流程圖最痛的不是畫,是「畫完之後改」。Lucidchart 拖一次 button、Excalidraw 重畫一次 box,每次需求變更都重來一輪。**Mermaid 用純文字描述圖表**,版本控制、git diff、跨人協作全部解決。這篇用我們的 `mermaid-editor` 工具當範例,把 7 種圖表的語法、3 個踩過的坑、跟 GitHub / Notion / Confluence 的整合方式講清楚。

為什麼 Mermaid 取代了 Lucidchart / draw.io 一半的場景

純文字 vs 拖拉介面,差別在於改一次的成本: - 拖拉工具:改一個 box 名字 → 開檔案 → 找到那個 box → 雙擊 → 改文字 → 存檔 → 重新匯出 PNG → 替換 README 內的圖片連結 - Mermaid:打開 markdown → 改一個字 → commit 還有版本控制優勢:git diff 直接看到圖表怎麼變,code review 階段就能查圖表邏輯。架構文件用 PNG 是「凍結的決定」,用 Mermaid 是「活的文件」。 Mermaid 不適合的場景:精細視覺設計(海報、簡報主視覺)、UML 進階(activity diagram with swim lanes)、組織架構超過 30 個 node。

7 種圖表怎麼選

flowchart:最常用。決策樹、API call sequence、處理流程都用它。flowchart LR 是橫向,TD 是上下。 sequenceDiagram:多服務互動。React → API gateway → DB → cache 這種 microservice 串接圖,sequence 比 flowchart 清楚 100 倍。 gantt:專案時程。設 dateFormat YYYY-MM-DD、用 section 分組、after task1 表依賴。畫完直接給老闆看,不用 Project / Notion timeline。 classDiagram:OOP 設計。寫 SDK 或 framework 時設計繼承 / 介面用。 erDiagram:資料庫關聯。設計 schema 時跟 DBA 溝通的標準格式。 mindmap:腦力激盪、文章大綱。 pie:佔比視覺化。簡單但有效,適合 retrospective 報告。

GitHub / Notion / Confluence / Obsidian 都能直接吃

GitHub(Issue、PR、Wiki、README):直接寫 `mermaid code block,GitHub render 引擎自動畫圖。寫架構 PR 時,把流程圖跟 code 放同一個 commit,reviewer 一個視窗看完。 Notion:同樣支援 mermaid code block(2024 後)。 Confluence:用「Mermaid Macro」或安裝 Atlas Plugin。 Obsidian:原生支援,適合做技術筆記。 自己的網站:用 mermaid.js library client-side render,或在 build time 用 mermaid-cli 生 SVG。本工具就是 client-side 即時 render 的範例。

3 個踩過的坑

1. 中文 node 名稱可能 break 解析 A[啟動 server] --> B[檢查連線] 多數時候 OK,但中文夾雜特殊字元(、、/、()會讓 parser 誤判。遇到怪 syntax error,把中文用引號包起來:A["啟動 server"]。 2. Gantt 的日期格式有版本差異 預設 dateFormat MM-DD,但 GitHub 版本可能只認 YYYY-MM-DD。寫專案時程一律宣告完整年月日,跨平台才不會炸。 3. 流程太大瀏覽器會 crash 超過 100 個 node 的 flowchart, mermaid.js 渲染會佔 ~2 秒 + 大量 DOM,手機瀏覽器可能 OOM。對策:拆成多張小圖(每張 < 30 node),用 sub-page 連起來。

進階:做 documentation as code

把架構決策(ADR)用 Mermaid 寫進 /docs/adr/,跟 code 一起 review。 做法: 1. 每個 ADR 是一個 .md 文件 2. 開頭寫決策摘要(2-3 句) 3. 中段用 Mermaid 畫架構圖 4. 結尾列「為什麼選這個」+ 「考慮過但放棄的選項」 好處:6 個月後新人 onboard,只要看 git log + ADR 就知道為什麼系統長這樣。比 Confluence 的「決策 wiki」更靠譜,因為code 跟文件一起變動,不會 drift。 知名實踐範例:adr-tools (github.com/npryce/adr-tools)、Architectural Decision Records 規範。

下次寫架構文件 / Issue 描述 / 專案時程,先用 [Mermaid 流程圖編輯器](/zh-TW/tools/mermaid-editor) 即時預覽,diagram 純客戶端 render,不會送到伺服器,寫完直接複製 ```mermaid block 貼進 GitHub。

相關工具