Mermaid 線上編輯器
等待輸入
什麼是 Mermaid 圖表編輯器？
Mermaid 是一款基於 JavaScript 的圖表繪製工具，它使用類似 Markdown 的文字語法來產生各種圖表。無需手動拖曳圖形，只需編寫簡單的文字描述，即可自動產生精美的流程圖、時序圖、類別圖等。本工具提供線上 Mermaid 編輯環境，支援即時預覽、拖曳縮放和匯出功能，幫助開發者快速建立和分享圖表。 用於正式資料或真實程式碼庫時，仍應結合解析器、測試結果和專案規範再次確認。
如何使用
如何使用
- 在左側編輯器輸入 Mermaid 語法
- 右側面板即時渲染圖表
- 使用滑鼠拖曳、滾輪縮放
- 點選匯出按鈕儲存為 PNG 或 SVG
圖表檢查
- 每完成一段重要的修改就重新渲染；Mermaid 錯誤通常來自縮排不正確、標點未轉義或所選圖表類型不支援的語法。
- 匯出前確認標籤、箭頭和換行在圖表實際使用尺寸下仍然清晰可讀。
使用場景
技術原理
Mermaid 是由 Knut Sveidqvist 於 2014 年發起的開源圖表渲染函式庫。其核心概念是接收人類可讀的 DSL（領域特定語言），透過解析器將其轉換為 SVG 圖形。完整管線分為三個步驟：詞法/解析器（由 jison 產生）將來源解析為內部資料結構；針對圖表類型的佈局演算法計算節點和邊的座標；最後由 d3 將佈局渲染為 SVG 元素。 不同的圖表使用不同的佈局引擎：流程圖預設使用 dagre（分層有向圖佈局），從 v10 起也支援 ELK（更強大但更重）；時序圖使用自訂的時序佈局，將參與者水平排列並將訊息垂直堆疊；甘特圖在時間軸上手動排佈任務並處理依賴關係；類別圖和狀態圖同樣依賴 dagre。佈局演算法決定了可讀性——dagre 遵循 Sugiyama 框架進行等級分配、邊交叉最小化和間距收緊，對一般規模的流程圖效果良好。 與 Graphviz 相比，Mermaid 的語法更接近自然語言（例如 A --> B），在瀏覽器中原生渲染並支援即時預覽。Graphviz 的 DOT 語法更底層，其佈局引擎（fdp、neato 等）更成熟，但需要本地安裝且預設樣式較為過時。Mermaid 目前支援超過 15 種圖表類型——流程圖、時序圖、類別圖、狀態圖、ER 圖、甘特圖、圓餅圖、使用者旅程圖、Git 圖、心智圖、時間軸、象限圖、桑基圖、xychart、區塊圖等——涵蓋絕大多數軟體工程繪圖需求。
- 解析：由 jison 產生的解析器將 DSL 文字轉換為內部 AST；每種圖表類型有自己的語法檔。
- 佈局演算法：流程圖使用 dagre 進行分層有向圖佈局，可切換為 ELK；時序圖和甘特圖使用各自的專用佈局邏輯。
- 渲染引擎：使用 d3 繪製 SVG；節點使用 g/rect/path/text 元素，箭頭由 marker 定義。
- 圖表類型：支援流程圖、時序圖、類別圖、狀態圖、ER 圖、甘特圖、圓餅圖、使用者旅程圖、Git 圖、心智圖等十餘種。
- 與 Graphviz 比較：Mermaid 語法更友善且原生支援 Web；Graphviz 佈局更精細，適合大型複雜圖表。
- 主題切換：透過 themeVariables 設定或 init 指令，可在 default、dark、forest、neutral 等內建主題之間切換。
範例
流程圖
flowchart TD
A[開始] --> B{已登入？}
B -- 是 --> C[首頁]
B -- 否 --> D[登入頁]
D --> E[輸入帳密]
E --> C
C --> F[結束]循序圖
sequenceDiagram
participant Browser
participant Server
participant Database
Browser->>Server: GET /api/user
Server->>Database: SELECT * FROM users
Database-->>Server: 使用者資料
Server-->>Browser: JSON 回應甘特圖
gantt
title 專案計畫
dateFormat YYYY-MM-DD
section 設計
需求分析 :a1, 2026-06-01, 7d
UI 設計 :a2, after a1, 10d
section 開發
前端 :b1, after a2, 20d
後端 :b2, after a2, 18d
section 測試
整合測試 :c1, after b1, 7d常見問題
Mermaid 支援哪些圖表類型？
Mermaid 涵蓋流程圖、循序圖、類別圖、狀態圖、ER 圖、甘特圖、圓餅圖、使用者旅程圖、Git 圖、心智圖和象限圖。程式碼第一行宣告類型（例如 'flowchart TD' 或 'sequenceDiagram'）。
為什麼我的圖表顯示語法錯誤？
最常見的原因有：缺少分號或箭頭運算子、節點標籤的括號不對稱（含特殊字元時請用引號包起來：A["Hello (world)"]）、用錯該圖表類型的箭頭語法（流程圖用 -->、循序圖用 ->>），以及子圖的縮排問題。錯誤面板通常會指出解析停在哪一行。
怎麼把圖表匯出成圖片？
用匯出按鈕存成 SVG（向量、可縮放，建議用於簡報和文件）或 PNG（點陣，適合聊天和電子郵件）。如果想直接嵌入 HTML 或在 Figma、Illustrator 中再編輯，可以複製 SVG 標記。
可以自訂顏色和樣式嗎？
可以。用 'classDef' 定義類似 CSS 的樣式，再用 'class A,B,C myStyle' 套用。一次性的覆寫可以用行內語法，例如 'style A fill:#f9f,stroke:#333'。全域主題就在第一行加 %%{init: {'theme':'forest'}}%%——內建主題有 default、forest、dark、neutral 和 base。
有長度或複雜度限制嗎？
Mermaid 渲染數百個節點都沒問題，但超過之後排版時間會非線性成長。如果圖表變慢或難以閱讀，可以拆成多張連結圖表，或用子圖把相關節點分組；連線太多互相交叉時，自動排版就會挑出比較差的位置。
如何替節點加入超連結或點選處理？
用 'click NodeId "https://example.com"' 把節點變成連結，或用 'click NodeId callback "tooltip"' 觸發透過 mermaid.parseError 註冊的 JavaScript 回呼。匯出的 SVG 中連結也能用，前提是嵌入頁面沒有把它移除。
還有哪裡可以渲染同樣的 Mermaid 程式碼？
GitHub Markdown、GitLab、Notion、Obsidian、Typora、VS Code（搭配擴充）以及多數現代文件工具都能原生渲染 Mermaid 程式碼區塊。把同樣的程式碼貼過去，會以該平台選用的主題渲染。