Mermaid 圖表製作器

免費線上 Mermaid 圖表工具，支援流程圖、序列圖、類別圖、甘特圖、ER 圖等。即時預覽、一鍵下載 PNG/SVG，完美呈現 AI 生成的圖表代碼。

立即使用Mermaid 圖表製作器（免費、免註冊）

Mermaid 是用文字描述圖表的語法：在編輯區貼上或輸入 Mermaid 代碼，旁邊的預覽（手機在下方）立刻畫出流程圖、序列圖、甘特圖等，滿意後下載 PNG 或 SVG。本頁有 15 個範本可以直接套用，編輯內容會自動存在這台瀏覽器，重新整理也不會不見。

什麼時候會用到 Mermaid 線上編輯器

• 把 AI 畫的圖變成圖片：請 ChatGPT、Claude、Gemini 等 AI「用 Mermaid 畫流程圖」，把整段回覆（連 ```mermaid 標記一起）貼進來，工具會自動取出代碼畫好，再下載成圖片放進簡報或文件。
• 寫文件、做報告：流程、系統架構、資料表關係用文字寫比拖拉圖形快，改一個字圖就跟著變。
• 專案規劃：甘特圖排時程、時間軸列里程碑、看板分待辦與進行中，貼進會議記錄或提案。
• 教學與分析：心智圖整理概念、象限圖排優先順序、圓餅圖與長條折線圖呈現數據。

Mermaid 語法速查表

每張圖的第一行寫圖表類型，下面一行一個元素。本頁的 15 個範本（流程圖、序列圖、類別圖、甘特圖、圓餅圖、ER 圖、心智圖、狀態圖、系統架構圖、時間軸、使用者旅程圖、Git 分支圖、象限圖、長條折線圖、看板）都能在「範本庫」一鍵套用，套用後再改文字最快。

表中「；」分隔的是不同行。

常見語法錯誤與寫法提醒

• 文字有括號、冒號：節點文字裡有 ( ) : 這類符號時，用雙引號包起來，例如 A["報名（免費）"]。
• 象限圖、長條折線圖的中文：這兩種圖的標籤要加雙引號，例如 x-axis "低投入" --> "高投入"，沒加引號會出現語法錯誤。
• 桑基圖（sankey-beta）：目前版本的節點名稱不接受中文，加引號也一樣；要畫中文流向圖，可以改用流程圖。
• 箭頭寫法各圖不同：流程圖用 -->，序列圖用 ->> 與 -->>，寫錯種類會畫不出來。
• AI 回覆整段貼上：有 ```mermaid 標記也沒關係，工具會自動取出裡面的代碼。

語法有錯時，預覽區會顯示 Mermaid 給的錯誤原因（通常會指出第幾行）。登入會員還可以按「AI 修正語法」讓 AI 幫忙改，改了哪幾行會先列出來，確認後才套用。

編輯、主題與下載

• 即時預覽：打字停下來約 0.3 秒就重畫；預覽可縮放 25%～300%，或按「適應」縮到剛好放得下。
• 圖表主題：Mermaid 內建四種配色：深色（dark）、預設（default）、黑白（neutral）、綠色（forest）。選的主題記在這台瀏覽器；切到深色主題會自動換深色底，其他主題換淺色底。
• 底色：預覽與 PNG 的底色可選深色或淺色；透明與自訂顏色要登入會員。
• 下載：PNG 以 2 倍解析度輸出，高解析度螢幕上也清楚；SVG 是向量圖，放大不失真，下載時會整理成標準 XML，單獨打開也不會報錯。
• 重新整理不遺失：編輯內容停下來半秒就存在這台瀏覽器，重新整理或關掉再開都會回來；換電腦或清除瀏覽資料就沒有了，要長期保存請登入後「保存作品」。無痕模式可能存不了。

登入後多出來的功能

• 保存作品：圖表存到雲端，之後在「我的作品」載入繼續編輯，也能加星號收藏。
• 分享連結：按「分享連結」會複製一個網址，對方打開不用登入就看得到同一張圖。圖表代碼是壓縮後放在網址 # 後面，不存在我們的伺服器；代碼太長（壓縮後超過 8,000 字元）放不進連結時，請改用保存作品或下載圖片。拿到連結的人都看得到代碼內容。
• AI 修正語法：語法錯誤時按一下，代碼與錯誤訊息會送到伺服器由 AI（Google Gemini）修正，會員每天 10 次；一次最多 8,000 字。AI 也可能改錯，所以會先顯示差異，由你決定要不要套用。
• 更多底色：PNG 可選透明底或自訂顏色。

限制與注意事項

• 字數上限：Mermaid 一張圖最多處理 50,000 字，超過會提示拆成幾張圖。
• 安全性：貼進來的代碼不會執行程式：點擊節點開連結、執行指令的語法會被停用，標籤裡的 HTML 會被清理，換行用的 <br> 照常有效。
• 在瀏覽器繪圖：畫圖與下載都在你的瀏覽器裡完成；只有按「保存作品」（存到雲端）和「AI 修正語法」時，代碼才會送到伺服器。
• 實驗中的圖表：名稱結尾是 -beta 的圖表（例如長條折線圖 xychart-beta）是 Mermaid 標示仍在調整的類型，寫法日後可能改變。

Mermaid 圖表製作器功能特點

• 支援多種圖表類型（流程圖、序列圖、甘特圖、ER圖等）
• 即時預覽 Mermaid 代碼
• 下載 PNG（2 倍解析度）和 SVG 格式
• 15 種圖表範本（流程圖、時間軸、看板等）
• 4 種圖表主題可換
• 重新整理不遺失（內容存在這台瀏覽器）
• 會員可保存作品到雲端、產生分享連結（打開的人不用登入）
• 會員可用 AI 修正語法錯誤，先看改了哪幾行再決定套用
• AI 回覆整段貼上也可以：自動取出 ```mermaid 區塊裡的代碼

如何使用Mermaid 圖表製作器？

1. 將 AI 生成的 Mermaid 代碼貼到編輯器（連 ```mermaid 標記一起貼也可以）
2. 即時預覽圖表效果，語法有錯會顯示原因
3. 調整代碼直到滿意
4. 下載 PNG 或 SVG 格式的圖片

Mermaid 圖表製作器常見問題

什麼是 Mermaid？

Mermaid 是一種基於文字的圖表描述語言，可以用簡單的代碼生成流程圖、序列圖、甘特圖等各種圖表。許多 AI 工具（如 ChatGPT、Claude）都會使用 Mermaid 來呈現圖表。

如何使用這個工具？

只需將 AI 生成的 Mermaid 代碼貼到編輯器中，即可即時預覽圖表效果。滿意後可以下載 PNG 或 SVG 格式的圖片。

支援哪些圖表類型？

支援流程圖（flowchart）、序列圖（sequence）、類別圖（class）、甘特圖（gantt）、圓餅圖（pie）、ER 圖、心智圖（mindmap）、狀態圖等多種類型。

可以保存我的圖表嗎？

登入會員後，您可以將圖表保存到雲端，下次登入時繼續編輯或下載。

如何讓 AI 生成 Mermaid 代碼？

在提問時加上「請用 Mermaid 格式呈現」或「請畫一個流程圖」，AI 就會用 Mermaid 語法回覆。回覆整段（含 ```mermaid 標記）貼進來即可，工具會自動取出代碼。

下載的圖片品質如何？

PNG 圖片以 2 倍解析度輸出，在高解析度螢幕上也清楚；SVG 是向量圖，可無限縮放不失真。

Mermaid 線上編輯器要怎麼用？

在編輯區貼上或輸入 Mermaid 代碼，旁邊的預覽（手機在下方）會即時畫出圖表；不會寫可以先到「範本庫」套用一個範本再改文字。畫好後按「下載圖片」選 PNG 或 SVG。

重新整理頁面，剛剛寫的圖會不見嗎？

不會。編輯內容會自動存在這台瀏覽器，重新整理或關掉再開都會回來；但換電腦、清除瀏覽資料或用無痕模式就可能沒有，要長期保存請登入後按「保存作品」。

可以把 Mermaid 圖表分享給別人嗎？

可以。登入會員後按「分享連結」，會複製一個網址，對方打開不用登入就看得到同一張圖，也能接著編輯或下載。圖表代碼放在網址裡、不存在伺服器，所以拿到連結的人都看得到代碼。

Mermaid 語法錯誤怎麼辦？

預覽區會顯示錯誤原因，通常會指出第幾行。常見原因是文字裡有括號或冒號沒加雙引號、箭頭寫錯種類。登入會員可以按「AI 修正語法」，AI 改了哪幾行會先列出來，確認後才套用（會員每天 10 次）。

可以換圖表的顏色主題嗎？

可以。預覽區右上角可選 Mermaid 內建的四種主題：深色（dark）、預設（default）、黑白（neutral）、綠色（forest），選的主題會記在這台瀏覽器，下載的 PNG、SVG 也是這個配色。

Mermaid 圖表可以寫中文嗎？

大部分圖表可以直接寫中文。象限圖與長條折線圖的中文標籤要加雙引號；桑基圖（sankey-beta）目前的版本不接受中文節點名稱。本頁的範本都用中文寫成，並用 Mermaid 驗證過語法，可以直接參考。