如何在 diagrams.net / draw.io 中，使用 Mermaid 語法插入圖片？ - 日知紙簍

對於軟體工程師而言，繪製流程圖或架構圖的工具必不可少，而常見的圖表繪製工具 diagrams.net / draw.io 中，提供了直接使用 Mermaid 語法插入圖表的功能。

在程式專案的開發過程中，難免需要繪製流程圖或架構圖，雖然近幾年 tldraw 和 Excalidraw 越來越受到歡迎，但筆者偶爾還是會遇到缺少部分功能，必須選擇使用 diagrams.net (draw.io) 繪製的狀況；而在撰寫文章時，筆者也很習慣使用 Markdown 格式書寫，搭配 Mermaid.js 渲染的圖表。

近幾年隨著大型語言模型（Large Language Model, LLM）的快速發展，請 AI 好朋友幫忙繪製圖片更是家常便飯。筆者通常會請他生成 Mermaid.js 格式的純文字，一方面消耗的 Token 更少，另一方面也更方便後期的修改與調整，而許多客戶端本身也支持直接渲染出 Mermaid.js 的圖表。

那麼問題來了 ── 有沒有什麼辦法能夠快速地將 Mermaid 圖表在 diagrams.net (draw.io) 中繪製出來呢？

答案是有的，因為 diagrams.net (draw.io) 本身就支持使用 Mermaid 語法插入圖表，並且插入之後還能夠再進行調整。如下圖所示，我們只需要依次點擊 Arrange → Insert → Advanced → Mermaid 便能夠叫出 Mermaid 語法的輸入框：

Step 01. 依次點擊 Arrange → Insert → Advanced → Mermaid 開啟 Mermaid 語法輸入框

接著在輸入框中填寫 Mermaid 語法表示的圖表，再點擊 Insert 即可插入圖表。以 diagrams.net (draw.io) 預設填寫的內容為例：

graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;

Step 02. 在輸入框中填寫 Mermaid 語法表示的圖表，再點擊 Insert 即可插入圖表

眼尖的你或許有發現，在這個步驟中其實有著一個下拉選單，可以選擇要採 Diagram 或 Image 模式插入圖表。這兩者的差異在於：

• 如果採 Diagram 模式插入圖表，會是 diagrams.net (draw.io) 的圖表形式，可以直接編輯其內容。
• 如果採 Image 模式插入圖表，雖然無法直接編輯其內容，但是可以滑鼠快速點擊圖片兩次，再次修改 Mermaid 語法來重新生成圖片。

採 Diagram 方式插入的圖表可以直接編輯，而採 Image 模式插入的圖片只能再次修改 Mermaid 語法重新生成

在 Mermaid 可以繪製許多不同的圖表，但並非所有的圖表都能夠以 Diagram 的方式插入圖表，比如圓餅圖（Pie Chart）便只能使用 Image 模式插入圖片，即使選擇 Diagram 也仍會以 Image 模式插入圖片。