Mermaid 線上編輯器
撰寫 Mermaid 語法、即時預覽圖表、切換主題，並將結果匯出為 SVG 或 PNG。
Mermaid 線上編輯器
撰寫 Mermaid 語法、即時預覽圖表、切換主題，並將結果匯出為 SVG 或 PNG。
關於 Mermaid 編輯器
在瀏覽器內渲染 Mermaid 語法
編輯器會在瀏覽器端載入 Mermaid 函式庫，短暫 debounce 後檢查圖表語法，並用您選擇的主題渲染 SVG 預覽。內建範本可快速開始 flowchart、sequence、class、state、ER、Gantt、pie、mindmap 與 timeline 範例，適合在提交文件或 PR 前先確認節點標籤、方向與版面。
為 GitHub、README 與 Wiki 準備流程圖
將編輯器當成貼回 GitHub README、GitLab Wiki、Notion 或技術文件前的檢查區。先預覽流程圖、時序圖與架構草圖，確認標籤、連線與方向後再把 Mermaid 原始碼貼回 Markdown；若目標平台不支援 Mermaid，也可匯出 SVG 或 PNG。
從預覽匯出 SVG 或 PNG
下載時會用目前的 Mermaid 程式碼與主題重新渲染 SVG。PNG 匯出會再透過瀏覽器 canvas 將 SVG 轉成點陣圖，而編輯器的縮放控制只影響畫面預覽。圖表原始碼可存進 URL hash 作為可分享的本地狀態，因此分享 URL 時等同分享原始圖表內容。
常見問題
關於這個主題的常見疑問與實用解答。
什麼是 Mermaid？
Mermaid 是一種 diagram as code 的文字型圖表語言，可用接近 Markdown 的語法渲染流程圖、時序圖、類別圖、ER 圖與甘特圖。它常用在 GitHub README、GitLab Wiki、Notion 與技術文件中，讓圖表能和文件一起被版本控管。
支援哪些圖表類型？
流程圖、時序圖、類別圖、狀態圖、實體關聯圖、甘特圖、圓餅圖等。編輯器支援 Mermaid 函式庫中所有可用的圖表類型。
可以匯出圖表嗎？
可以，您可以將渲染完成的圖表下載為 SVG 或 PNG，用於簡報、文件或其他專案。
我的資料會被傳送到伺服器嗎？
不會，Mermaid 圖表渲染完全在您的瀏覽器中執行。您的圖表程式碼透過 JavaScript 在本地解析與渲染，不會傳送至任何伺服器。
如何撰寫 Mermaid 語法？
先宣告圖表類型（如 flowchart TD、sequenceDiagram、classDiagram），再用 Mermaid 文字語法定義節點、連線和標籤。可使用內建範本探索不同圖表類型。
可以在 GitHub 或 Markdown 中使用 Mermaid 嗎？
可以。GitHub README、issue、pull request、GitLab Wiki、Notion 與許多 Markdown 渲染器都支援 Mermaid 圍欄程式碼區塊。把圖表碼包在 ```mermaid 區塊中即可渲染；你也可以先在這裡預覽，確認無誤後再貼回文件。