無程式碼也能輕鬆打造專業LINE官方帳號！一鍵導入模板，讓AI助你行銷加分！
基於文字的圖表產生已徹底改變了開發人員建立和維護視覺化文件的方式，而 Mermaid（GitHub 上的 mermaid-js/mermaid）正是開創這種方法的函式庫。透過允許使用簡單、人類可讀的文字語法定義圖表，Mermaid 使圖表建立變得像編寫 Markdown 一樣容易——並使圖表能夠與程式碼一起進行版本控制、審查和維護。
由 Knut Sveidqvist 建立，現在由一個專注的社群維護，Mermaid 已成為軟體行業中基於文字的圖表產生的標準，擁有超過 75,000 個 GitHub 星號。它支援十幾種圖表類型，包括流程圖、序列圖、甘特圖、類別圖、狀態圖、圓餅圖、實體關係圖、使用者旅程圖、Git 圖和心智圖。
Mermaid 的影響遠不止於一個函式庫。它被 GitHub、GitLab、Notion 和眾多文件平台採用，已成為在技術文件中嵌入圖表的預設選擇。編寫 README 或 Wiki 頁面的開發者現在可以將流程圖或序列圖作為簡單的程式碼區塊包含在內，該區塊會在平台上自動渲染，無需任何外部工具或圖片資源。
圖表渲染管線
Mermaid 透過結構化渲染管線將文字定義轉換為視覺圖表：
flowchart LR
A[Mermaid 定義\n文字語法] --> B[解析器\n語法分析]
B --> C[抽象語法樹\n結構化表示]
C --> D[佈局引擎\nGraphviz / Dagre / 自訂]
D --> E[SVG 渲染\n視覺圖表]
E --> F[互動功能\n平移 / 縮放 / 點擊]
B --> G[語法驗證\n錯誤偵測]
G --> H[錯誤回報\n使用者回饋]模組化架構將解析、佈局和渲染分離成獨立的階段，每個階段都可以自訂或替換。不同的圖表類型使用針對其特定視覺需求最佳化的不同佈局引擎。
支援的圖表類型
| 圖表類型 | 語法範例 | 使用案例 |
|---|---|---|
| 流程圖 | A–>B; B–>C | 流程圖 |
| 序列圖 | A-»B: 訊息 | 互動流程 |
| 類別圖 | ClassA < | – ClassB |
| 狀態圖 | [*] –> State1 | 狀態機 |
| ER 圖 | CUSTOMER | |
| 甘特圖 | section Tasks | 專案時間軸 |
| 圓餅圖 | “類別” : 30 | 資料分佈 |
| Git 圖 | commit id: “main” | 分支視覺化 |
| 旅程圖 | section Phase | 使用者體驗 |
| 心智圖 | root((主題)) | 想法組織 |
整合生態系統
Mermaid 真正的優勢在於其整合生態系統。該函式庫可以在多種情境中使用：作為透過 npm 或 CDN 載入的 JavaScript 函式庫、作為用於批次圖表產生的命令列工具、作為 MkDocs、Docusaurus 和 VuePress 等文件產生器的插件，以及作為 GitHub、GitLab 和 Notion 等平台的原生功能。
對於開發工作流程，Mermaid CLI 工具支援在 CI/CD 管線中自動產生圖表。文件儲存庫可以將 Mermaid CLI 作為建置步驟執行，從原始檔產生圖表圖片，確保圖表始終與最新變更保持同步。Mermaid Live Editor 等即時編輯工具提供即時預覽，使得在提交圖表設計之前可以輕鬆迭代。
Mermaid 社群維護著一個活躍的插件、主題和整合生態系統。自訂主題允許組織在所有圖表中應用一致的樣式。插件提供附加功能，如可點擊節點、工具提示支援和動態資料繫結。
推薦的外部資源
- Mermaid GitHub 儲存庫 – 原始碼、文件和社群
- Mermaid Live Editor – 用於建立和測試 Mermaid 圖表的互動式遊樂場
FAQ
什麼是 Mermaid？ Mermaid 是一個 JavaScript 函式庫，可從類似 Markdown 的文字描述產生圖表和流程圖。它支援多種圖表類型，包括流程圖、序列圖、甘特圖、類別圖、狀態圖、圓餅圖、ER 圖、使用者旅程圖、Git 圖和心智圖。圖表使用簡單、人類可讀的語法定義，並渲染為 SVG 或 PNG。
Mermaid 支援哪些類型的圖表？ Mermaid 支援十幾種圖表類型：用於流程視覺化的流程圖、用於互動流程的序列圖、用於物件導向設計的類別圖、用於狀態機的狀態圖、用於資料建模的 ER 圖、用於專案排程的甘特圖、用於資料分佈的圓餅圖、用於分支視覺化的 Git 圖、用於體驗對映的使用者旅程圖、需求圖和用於想法組織的心智圖。
Mermaid 通常如何使用？ Mermaid 最常用於 Markdown 文件中，其中圖表以帶有 ‘mermaid’ 語言識別碼的程式碼區塊嵌入。許多平台包括 GitHub、GitLab、Notion 以及 MkDocs 和 Docusaurus 等文件工具都具有原生 Mermaid 支援。它也作為獨立函式庫用於網頁應用程式中，並作為 CLI 工具用於產生圖表圖片。
Mermaid 的語法容易學習嗎？ 是的，Mermaid 的語法設計為直觀且可讀的，即使是對非技術使用者也是如此。流程圖可以用簡單的箭頭符號定義，序列圖用參與者-消息行定義，甘特圖用日期範圍定義。大多數使用者可以在閱讀文件後的幾分鐘內建立基本圖表。
Mermaid 圖表可以匯出為圖片嗎？ 是的，Mermaid 支援將圖表匯出為 SVG、PNG 和 PDF。SVG 輸出與解析度無關且可編輯，非常適合用於文件。PNG 和 PDF 匯出適合嵌入報告和簡報中。Mermaid CLI 工具和各種整合工具支援批次轉換多個圖表。
延伸閱讀
- Mermaid 在 GitHub 上 – 包含文件和範例的儲存庫
- Mermaid Live Editor – 用於建立和預覽圖表的互動式工具
