把 Mermaid 流程圖匯入 draw.io：三個步驟，圖形可以繼續編輯

用 ChatGPT 或 Claude 請它畫流程圖，回來的通常是 Mermaid 語法。但如果你平常是用 draw.io 排版，這時候會卡住：難道要照著圖一個一個框重畫？

不用。draw.io 內建 Mermaid 匯入，貼上語法就會變成可以拖拉的圖形。

三個步驟

第一步，打開 draw.io，從上方選單點 Arrange → Insert → Mermaid...。

第二步，把 Mermaid 語法貼進對話框。預設會有一段 graph TD 的範例，直接蓋掉就好。

在 draw.io 的 Mermaid 對話框貼上語法

第三步，按右下角的 Insert。想先確認畫出來長什麼樣，可以按旁邊的 Preview。

Mermaid 匯入 draw.io 之後的結果，每個框都可以個別選取編輯

匯入後的每一個方框、菱形和箭頭都是獨立的圖形，可以個別選取、改顏色、搬位置，跟你自己畫出來的沒有差別。中文標籤也正常。

上面那張圖用的是這段：

flowchart TD
  A[使用者送出表單] --> B{欄位驗證}
  B -- 通過 --> C[寫入資料庫]
  B -- 失敗 --> D[回傳錯誤訊息]
  C --> E[寄送通知信]

如果你想直接試，複製這段貼進去就會得到同一張圖。

Mermaid 是一套用文字描述圖表的語法，寫幾行純文字就能產生流程圖、時序圖、甘特圖。GitHub 的 README 直接支援它，所以 AI 回答「幫我畫流程」時，多半都是給這種格式。

它的好處是版本控制方便，一行文字的差異很清楚。缺點是排版不好調，要把某個框往旁邊挪一點、換個顏色，就不是它擅長的事——這也是為什麼要匯進 draw.io。

匯入之後還能改回 Mermaid 嗎？ 不行。匯入是單向的，圖形進到 draw.io 之後就是一般的圖形，不會再跟原本那段語法連動。想保留語法，自己另外存一份。

支援哪些圖表類型？ draw.io 用的是內建的 Mermaid，flowchart 這類基本圖表沒問題。比較新或比較特殊的類型要看版本，官方的說明文章有列出來。

按了 Insert 卻沒有東西出現？ 通常是語法本身有問題。先把同一段貼到 Mermaid Live Editor 看畫不畫得出來，可以的話再回來匯入。

要裝外掛嗎？ 不用，這是內建功能，網頁版 app.diagrams.net 和桌面版都有。

如果你已經有一段 AI 給的 Mermaid，直接照上面三步貼進去就好。圖形進到 draw.io 之後再來排版，比從頭拉框快很多。