結論先講：圖的原文繼續用 Mermaid 寫；要匯出、放進報告或給別人看的圖，先用 Pele 畫成 SVG 或 PNG，畫不出來或版面不清楚再回到原生 Mermaid。要給主管看、需要重新安排重點的總覽圖，才考慮 Diagram Design。
我工作上常畫流程圖：系統規劃、跨部門流程、知識庫整理都需要。同一張圖通常有兩個要求：
- 好維護：需求一改，改幾行文字就好，不必整張重畫。
- 看得懂：主管、同事看得懂重點，中文標籤和箭頭不能造成誤會。
Mermaid 解決了第一個要求，第二個常常不夠好：中文會被亂換行、深色主題要寫一大段設定、連線擠在一起。所以我拿同一份圖，比較了四款工具（2026 年 11 月實測）。
四款工具各是什麼
| 工具 | 是什麼 | 原文 | 強項 | 限制 |
|---|---|---|---|---|
| 原生 Mermaid | 文字畫圖的標準工具 | Mermaid | GitHub、Obsidian 等多數平台直接支援 | 自動排版和版本差異會影響換行、連線與間距 |
| Pele | 把 Mermaid 畫成 SVG 的函式庫，由 Obsidian 官方 GitHub 組織發布 | Mermaid | 同一份原文，排版較寬鬆，配色用 CSS 變數控制 | 用自己的排版引擎，不是所有 Mermaid 設定都照樣生效 |
| beautiful-mermaid | Mermaid 的 SVG 與純文字圖渲染器 | Mermaid | 能輸出終端機用的 ASCII／Unicode 文字圖 | 官方列出的圖種較少（流程、狀態、時序、類別、ER、XY 六類） |
| Diagram Design | 指導 AI 編排圖表的設計指引（Skill） | HTML＋SVG | 依讀者安排重點與層次，成品最像設計稿 | 不是自動渲染；內容一改就要重新編排、重新檢查 |
Pele 官方以 Mermaid 12.1.0 的內建圖型為相容目標，但它不吃任意 HTML 標籤、會忽略 JavaScript 點擊回呼，排版也是自己算的（相容性說明）。「支援這種圖」不等於「畫出來跟 Mermaid 一模一樣」。
怎麼比
用一個簡化的例子：員工從三個作業平台登入，三個平台共用一套帳號驗證。畫成三種圖：
- 架構總覽：5 個節點、6 條連線、1 個分區。
- 登入流程：輸入帳密、驗證、授權、顯示結果，有兩個判斷。
- 成功登入時序：員工、入口網站、驗證服務之間的訊息。
| 項目 | 版本 |
|---|---|
| 原生 Mermaid | 12.2.0 |
| Pele | 1.13.0 |
| beautiful-mermaid | 1.1.3 |
| Diagram Design | Skill 2.6，由 AI 依指引編排 |
| 瀏覽器 | Chrome 無頭模式截圖，系統字型 |
前三款吃同一份 Mermaid 原文；Diagram Design 是 AI 照設計指引另外排的，節點和連線一樣，但不是自動渲染。所以這不是像素級的測試，比的是「同一份內容，讀起來差多少」。
比較圖
點圖可以開原尺寸。
圖 1：四款工具的預設樣式
- 原生 Mermaid 的預設配色最「Mermaid」：淡紫節點、黃色分區，三條線擠到同一個箭頭上。
- Pele 字比較大、留白比較多，連線是圓弧。
- beautiful-mermaid 最素，對比偏淡，適合再自己調主題。
- Diagram Design 最像簡報用圖：有標題、節點類型標籤，還把共用的驗證節點用紅色強調。這是 AI 的編排判斷，不是渲染器的功能。
圖 2：深色樣式的架構總覽
接下來只比原生 Mermaid 和 Pele，套我平常用的深色樣式（九類語意色，見另一篇）。兩邊是同一份原文、同一組 classDef；Pele 另外把背景、線條、分區配色換成 CSS 變數。
語意色兩邊都套上了。差別在排版：Pele 那張比較高、比較鬆。兩邊也都有連線穿過「三個作業入口」的分區標題：原生 Mermaid 是中間那條，Pele 是最左邊那條。配色能沿用，版面還是要一張一張看。
圖 3：深色樣式的登入流程
琥珀色判斷、紅色失敗、綠色成功都正確。Pele 的判斷框比較扁、整張比較矮；原生 Mermaid 的判斷框比較大，節點有一圈光暈。
圖 4：深色樣式的時序圖
這組差最多：原生 Mermaid 的時序圖文字很小，縮到文件裡幾乎看不清楚；Pele 的參與者方框和訊息文字大很多。這只是一個成功情境的簡圖，沒有涵蓋失敗分支。
看到了什麼
| 觀察 | 可以下的結論 |
|---|---|
| 名稱較長、中英混排時（例如英文系統名加四個中文字），原生 Mermaid 會自動換行，Pele 和 beautiful-mermaid 保持單行；本文的例子名稱短，看不出這個差別 | 各家量文字、排版的方式不同；不是所有圖種都一樣 |
| Pele 的時序圖文字明顯比較好讀 | 這組樣本是這樣；不代表每種尺寸都比較好 |
| beautiful-mermaid 預設雙色偏淡 | 可以調主題，不必用預設對比 |
| 深色樣式的語意色、白字、圓角，Pele 都畫得出來 | 樣式可以搬過去，但不是每個 Mermaid 設定都相容 |
| 兩邊的判斷框比例、分區留白、折線、整體尺寸都不同 | 配色沿用，排版逐張檢查 |
我現在怎麼用
比完之後，我把 Pele 定為「輸出用」的預設：
- 原文照樣寫 Mermaid，存在筆記裡，這是唯一的維護來源。
- 要匯出、放進 HTML 報告、給筆記庫以外的人看，先用 Pele 畫成 SVG 或 PNG。
- Pele 畫不出來或版面不清楚，回到原生 Mermaid；改原文時保留原意。
- 每張圖都打開成品看：沒漏節點與分支、語意色正確、字沒被截掉或重疊、箭頭真的指到目標。要在手機看的，就在手機上打開過。
筆記軟體（例如 Obsidian）裡的 Mermaid 區塊照舊由它自己畫，裝了 Pele 也不會改變。Pele 官網宣稱比 Mermaid 小、快，我沒有實測效能。
深色樣式的完整配色、Pele 的 CSS 設定和可以直接複製的範本，寫在〈Mermaid 深色主題範本：九色語意配色與 Pele CSS 設定〉。
跟其他畫圖方式怎麼分工
Pele 只改善「Mermaid 畫出來好不好看」，不取代其他工具：
| 需要 | 用什麼 |
|---|---|
| 節點、關係、流程會一直改 | Mermaid 原文，輸出時用 Pele |
| 解釋情境變化、讓人篩選資料 | 互動式視覺化 |
| 成本、趨勢等數字分析 | 試算表或資料繪圖工具 |
| 同事要自己拖拉方塊和連線 | draw.io 這類可編輯畫布 |
| 需求還在討論，先畫草圖 | Excalidraw 這類白板 |
| 內容確定，要做提案總覽 | Pele 或 Diagram Design，看要不要重新編排 |
還沒驗證的
- Safari、iPhone、iPad 上打開 Pele 的 SVG／PNG，以及列印效果。
- 大型分區圖、繞回頭的複雜流程，以及這三種圖以外的其他圖種。
- 匯出的 SVG／PNG 貼進其他文件軟體後的樣子。
- 官方宣稱的速度在實際使用時的表現。
參考資料
工具能力以官方文件為準（2026 年 11 月查閱），閱讀效果以這次的樣本與截圖為準；套件升版後要重新確認。