Mermaid 是一套以類似 Markdown 的文字語法生成圖表的開源 JavaScript 工具，目前於 GitHub 擁有 90,165 星標與 9,239 個複製分支，NPM 每週下載量逾 1,100 萬次，是 Diagram-as-Code（圖表即程式碼）領域最具代表性的開源項目之一。該項目自 2014 年建立以來，已成為技術文件與系統架構圖的主流解決方案，GitHub 更於 2022 年開始原生支援在 Markdown 中直接渲染 Mermaid 語法。
Mermaid 是開源 Diagram-as-Code 工具，以 Markdown 文字語法生成圖表，星標 90,165，NPM 週下載逾 1,100 萬次，支援 20 多種圖表。
Mermaid 是什麼？為何成為 Diagram-as-Code 的代表？
Mermaid 是 JavaScript 撰寫的圖表生成工具，讓使用者以文字描述流程與結構，再自動渲染為視覺化圖表，解決文件圖表過時與難以維護的問題。
Mermaid 的核心定位，是讓圖表像程式碼一樣可版本控制、可審查、可自動化生成。傳統繪圖工具產出的圖表多以圖片形式存在，一旦架構變更，必須手動重新繪製，圖片本身亦無法納入程式碼審查流程，最終往往與實際系統脫節，形成開發者常說的「文件腐爛」（Doc-Rot）問題。Mermaid 將圖表定義為純文字，存放在與程式碼相同的儲存庫中，任何改動都可透過 diff 清楚呈現，圖表內容因此能夠跟上開發節奏。
該項目由開發者 Knut Sveidqvist 於 2014 年發起，最初目的是簡化技術文件中的圖表製作流程，隨後逐步發展為社群主導的 mermaid-js 組織，並於 2019 年獲選為 JS Open Source Awards「最令人興奮的技術應用」獎項。時至今日，Mermaid 已內建於 GitHub、GitLab、Notion 等多個主流平台，成為 Diagram-as-Code 概念普及的關鍵推手。
Mermaid 支援哪些圖表類型？
Mermaid 支援流程圖、時序圖、類別圖、狀態圖、ER 圖、甘特圖、圓餅圖、Git 圖、心智圖、時間軸、Sankey 與 C4 等 20 多種圖表。
Mermaid 的圖表類型覆蓋軟體開發與專案管理的主流需求。開發者日常最常使用的流程圖（Flowchart）支援節點、分支、子流程與連接線標籤；時序圖（Sequence Diagram）可呈現系統間訊息交換順序，常用於 API 設計討論；類別圖（Class Diagram）與 ER 圖則分別服務物件導向設計與資料庫建模。專案管理面向，甘特圖（Gantt Chart）可直接由任務時間資料生成排程視覺化，圓餅圖與 Git 圖則適用於統計呈現與版本分支說明。
近年新增的圖表類型進一步拓展應用邊界，包括以樹狀結構呈現想法的心智圖（Mindmap）、描述服務架構的 C4 Diagram、呈現資料流向的 Sankey 圖，以及用於里程碑規劃的 Timeline 圖。每一種圖表都對應專屬的語法文件與 Live Editor 範本，使用者可以從官方範例直接修改，毋須記憶全部語法。
Mermaid 的核心技術亮點有哪些？
亮點包括 Markdown 式文字語法、版本控制友善的 diff 審查、GitHub 原生渲染、Live Editor 即時預覽，以及內建消毒與沙箱機制的安全設計。
第一個亮點是「圖表即文字」的開發者體驗。Mermaid 語法刻意向 Markdown 靠攏，例如流程圖以 flowchart LR 宣告方向，再用 A --> B 描述節點關係，學習門檻遠低於傳統繪圖軟體，非程式背景的產品與專案人員亦能快速上手。第二個亮點是完整的生態整合：GitHub 與 GitLab 已在 Markdown 渲染器中內建 Mermaid 支援，開發者在程式碼審查頁面即可直接看到圖表；Mermaid Live Editor 提供免安裝的即時編輯環境，方便在寫入文件前快速原型驗證。
第三個亮點是安全設計。由於 Mermaid 會將使用者輸入轉換為 SVG 渲染，官方內建輸入消毒（Sanitization）機制，並提供沙箱隔離的渲染模式，降低惡意程式碼注入風險，這亦是大型平台願意原生整合的重要前提。第四個亮點是高度客製化，主題、顏色、字型與版面方向皆可設定，並可透過設定檔統一企業文件中的圖表風格。
如何快速開始使用 Mermaid？
最快是開啟 Mermaid Live Editor 即時預覽；整合專案可用 NPM 安裝套件，或直接在 GitHub Markdown 撰寫程式碼區塊。
對於只想嘗試的使用者，最快路徑是開啟官方 Mermaid Live Editor，頁面左側貼上語法、右側即時顯示渲染結果，無需任何安裝步驟。若要將圖表整合至自己的網站或應用程式，可透過 NPM 安裝 mermaid 套件，再於前端載入並呼叫初始化函式，官方提供 CDN 與模組化兩種載入方式，壓縮後的套件體積維持在輕量水準，沒有重型相依套件。
若使用 GitHub 或 GitLab 撰寫文件，則完全毋須額外設定：只要在 Markdown 中建立標記為 mermaid 的程式碼區塊，平台便會自動渲染圖表。這種寫法令架構圖得以與程式碼一同提交、一同審查、一同版本化，正是 Diagram-as-Code 工作流程最直接的實踐方式。官方文件另提供 Getting Started 指南與語法參考頁，涵蓋每一種圖表類型的完整參數說明。
Mermaid 的開源生態與市場定位如何？
Mermaid 以 MIT 授權釋出，逾 800 位貢獻者，最新版 11.17.2，月下載逾 5,500 萬次，是 Diagram-as-Code 生態領導者。
從數據面觀察，Mermaid 的開源生態規模相當可觀。該儲存庫以 MIT 授權釋出，截至 2026 年 9 月累積超過 800 位貢獻者，最新版本為 2026 年 8 月發佈的 11.17.2，專案仍維持高頻率的版本更新。NPM 統計顯示，mermaid 套件單月下載量超過 5,500 萬次，反映其在實際生產環境中的滲透程度；官方亦出版《The Official Guide to Mermaid.js》一書，並由社群維護涵蓋多種平台的外掛與整合清單。
在市場定位上，Mermaid 面對的是 PlantUML、Excalidraw 與 draw.io 等不同路線的競爭者。相較於以 UML 見長並需依賴 Java 環境的 PlantUML，Mermaid 以 JavaScript 生態原生整合取勝；相較於所見即所得的繪圖工具，Mermaid 的差異化優勢在於圖表可納入版本控制與自動化流程。對技術文件團隊而言，Mermaid 並非取代所有繪圖工具，而是填補「文件圖表需要持續維護」這一環節的缺口。
出處連結有哪些？
本文資訊來源為 mermaid-js/mermaid 的 GitHub 儲存庫與 NPM 套件統計頁，讀者可前往官方儲存庫查閱原始碼、文件與版本資訊。
本文內容整理自 mermaid-js/mermaid 的 GitHub 儲存庫（https://github.com/mermaid-js/mermaid）、官方文件網站（https://mermaid.js.org/）與 NPM 下載統計資料，讀者可前往上述來源查閱完整原始碼、圖表語法文件與版本發布紀錄。
總結：Mermaid 適合什麼團隊使用？
Mermaid 適合將架構圖納入版本控制的開發團隊、撰寫技術文件的工程師，及想以文字快速生成流程圖的非程式背景工作者，對已有 GitHub 流程的團隊成本最低。
綜合而言，Mermaid 的價值在於將圖表製作從「一次性繪圖」轉變為「可持續維護的文字資產」。對軟體開發團隊而言，將系統架構圖、API 時序圖與部署流程寫成 Mermaid 語法並存放於程式碼儲存庫，可確保圖表與實作同步演進；對技術文件撰寫者而言，GitHub 原生渲染與 Live Editor 大幅降低圖表產出的時間成本；對產品經理與專案管理者而言，甘特圖與時間軸語法的低學習門檻，讓排程視覺化不再依賴特定繪圖軟體。作為 Diagram-as-Code 領域的代表性開源項目，Mermaid 以逾 9 萬星標與每月數千萬次下載驗證了這套方法的長期價值。