Beauty Diagram

什麼是 Beauty Diagram？

Beauty Diagram 是一個線上編輯器，可接收 Mermaid 和 PlantUML 原始碼（並能匯入特定 draw.io 工作流程），以渲染更乾淨、適合簡報的版面和樣式。其核心目的是「美化」這些圖表語言的原始輸出——重新間距、重新配置，並產生匯出就緒的結果，而無需使用者手動重繪圖表。

它支援即時預覽、一鍵美化，並匯出 SVG 或 PNG 用於文件、簡報和審核。頁面也描述了專注簡報的排版和主題化，加上「動畫 SVG」預覽，用於序列式動態提示。

主要功能

• Mermaid 編輯器，具即時預覽和一鍵美化：貼上 Mermaid 原始碼，即時檢視結果，並套用格式變更而無需重寫程式碼。
• PlantUML 編輯器，具美化工作流程：切換至 PlantUML，貼上活動圖原始碼，並套用格式器以重新對齊間距和圖表元素。
• draw.io 匯入（Pro）：匯入 .drawio 或 XML 匯出（網站註明 Pro 版可用）。編輯器會解析工作流程為 Mermaid 原始碼以進行美化。
• 流程圖/活動圖的正交路由重新配置：在網格上重新間距和路由圖表，使用正交連接（避免對角箭頭穿越節點）。
• 主題切換以維持一致樣式：無需編輯圖表原始碼，即可切換主題（列出：modern, atlas, obsidian, atelier）。
• 簡報級排版和樣式：頁面強調 Geist at 14px / 500、OpenType ligatures、基線對齊標籤，以及偏好柔和陰影而非硬邊 1px 筆觸。
• 動畫 SVG 預覽（相同原始碼，不同動態疊加）：在 Mermaid 輸出上疊加細微動態（範例：charge, laser, pulse），以澄清序列/方向。
• 文件和簡報匯出：匯出 SVG 和 PNG。頁面也提及 Pro 版 4× PNG 匯出，並註明 SVG 適合螢幕檢視，而 PNG 可用於不支援 SVG 的目標。
• 透過工具列調整畫布節點/線條（原始碼不變）：網站描述點擊節點/線條開啟浮動工具列，以調整背景、邊框、線條顏色/寬度及文字顏色；自訂可儲存於圖表並透過連結分享。

如何使用 Beauty Diagram

1. 開啟線上編輯器並選擇圖表類型（Mermaid 或 PlantUML；draw.io 匯入標註為 Pro）。
2. 將現有 Mermaid 或 PlantUML 原始碼貼入編輯器。
3. 使用 Beautify 套用格式器：它會重新配置圖表並套用選定主題/樣式規則。
4. 檢視即時預覽，可選擇使用節點/線條工具列調整顏色，並視需要切換主題。
5. 匯出為 SVG 或 PNG，適用於目標工作流程（文件/簡報/審核，如頁面所述）。

使用情境

• 將 Mermaid 流程圖轉為投影片就緒圖形：貼上 Mermaid 程式碼，美化以獲得正交網格路由和簡報色盤/排版，然後匯出 SVG 用於嵌入或高倍放大檢視。
• 修正擁擠的 PlantUML 活動圖：切換編輯器分頁至 PlantUML，貼上活動圖，美化以標準化間距和泳道/配置細節。
• 在不同簡報情境維持單一圖表原始碼：使用主題切換（modern/atlas/obsidian/atelier）渲染相同 Mermaid 內容，用於簡報、文件頁面或暗黑模式 README。
• 提升圖表可讀性，減少視覺雜訊：套用單色調色盤，讓決策菱形/分支在灰階內容中突出。
• 將 draw.io 工作流程引入 Mermaid 格式化流程（Pro）：匯入 .drawio 檔案或 XML 匯出，解析為 Mermaid 原始碼，並在 Mermaid 工作流程中繼續編輯/美化。

常見問題

如何美化 Mermaid 流程圖？
將 Mermaid 原始碼貼入編輯器，點擊 Beautify，並使用即時預覽確認重新配置版面與樣式變更。頁面註明原始程式碼保持不變；變更的是渲染結果。

PlantUML 活動圖也能同樣改善嗎？
可以。頁面說明切換至 PlantUML 分頁，貼入活動原始碼，並點擊 Beautify 以重新對齊泳道並規範預設的擁擠間距。

匯出時 SVG 與 PNG 有何差異？
網站指出 SVG 適合螢幕檢視（文件/網站/Figma 嵌入），因其在任意縮放下皆保持清晰，而 PNG 適合匯出為 PDF/列印的簡報，或目標工具不支援 SVG 時使用。另提及 Pro 版 4× PNG 匯出。

Beauty Diagram 能匯入 draw.io 檔案嗎？
可以，但標註為 Pro：可將 .drawio 或 XML 匯出 拖入編輯器。網站表示它會解析流程圖/序列圖為 Mermaid 原始碼，以進行後續美化。

這只是 Mermaid Live 編輯器的複製品嗎？
頁面明確區別，Beauty Diagram 會後處理 Mermaid 輸出—加入重新配置版面、間距、字體與調色盤變更—而非僅渲染 Mermaid 預設產出。

替代方案

• Mermaid Live 編輯器（或其他 Mermaid 渲染器）：適合即時渲染 Mermaid 語法，但原始碼建議 Beauty Diagram 專注後處理預設渲染，以達簡報級版面與樣式。
• 圖表繪製/白板工具（例如流程圖設計工具）：可建立投影片圖形，但可能需手動重繪，而非美化現有 Mermaid/PlantUML 原始碼。
• 支援匯出的通用圖表工具：可產生 SVG/PNG 輸出，但通常以繪圖為工作流程導向，而非 Mermaid/PlantUML 程式碼的格式化/重新配置。
• draw.io 原生匯出工作流程：若圖表已在 draw.io 中，可依賴內建匯出；Beauty Diagram 的價值專指轉換/匯入至 Mermaid 工作流程，並後續套用美化規則。