Beauty Diagram icon

Beauty Diagram

Beauty Diagram 是一款線上 Mermaid 與 PlantUML 編輯器,支援即時預覽文字圖表、美化版面,並可匯出 SVG 或 PNG,也支援 Pro draw.io 工作流程,以及 Obsidian 和 VS Code 系列編輯器整合。

Beauty Diagram

什麼是 Beauty Diagram

Beauty Diagram 是一款線上圖表編輯器與美化工具,適用於 Mermaid、PlantUML,以及部分 draw.io 工作流程。它是為已經以文字撰寫圖表、但又希望得到更乾淨渲染效果的使用者所設計,而不必手動重新繪製形狀或連接線。

其核心流程相當直接:貼上原始內容、即時預覽、執行 Beautify 重新排版圖表,然後將結果匯出為 SVG 或 PNG。這個網站將產品定位在需要於文件、筆記與簡報中呈現更精緻圖表的情境,同時保留可重複使用的原始碼,方便版本控管流程。

核心功能

具備美化功能的即時編輯器

貼上 Mermaid 或 PlantUML 原始碼,在瀏覽器中即時預覽,並透過一鍵 Beautify 重新排版圖表,而不改動你的原始碼。

多種圖表格式

支援 Mermaid、PlantUML 與 Pro draw.io 工作流程,讓圖表能維持在你原本使用的格式。

SVG 與 PNG 匯出

可將美化後的圖表匯出為 SVG 或 PNG;網站也說明 Pro 版提供 4× PNG 匯出,完整 Pro 匯出則不含浮水印。

以主題為基礎的樣式設定

提供主題切換,讓同一張圖表能針對文件、簡報或深色模式筆記套用不同樣式,而不必修改底層程式碼。

動畫預覽

包含具動態效果的 SVG 樣式,例如 subtle、lightning、laser、charge 和 pulse,可在不重寫圖表原始碼的情況下加入動態感。

AI 輔助圖表建立

支援 AI generate 與 refine 流程,可從白話英文草擬 Mermaid 或 PlantUML 原始碼,並在既有圖表上持續迭代。

適用情境

  • 文件圖表

    將 Mermaid 或 PlantUML 原始碼製作或整理成流程圖與活動圖,然後匯出更乾淨的版本用於文件或簡報。

  • 筆記與 Markdown 工作流程

    直接在 Obsidian 或 VS Code、Cursor、Windsurf、VSCodium、Gitpod 或 Codespaces 的 Markdown Preview 中美化圖表,不必切換工具。

  • draw.io 轉文字整理

    在 Pro 版匯入支援的 draw.io 圖表,將其轉換為以 Mermaid 為基礎的工作流程,之後再以文字方式繼續編輯。

  • 簡報圖像

    利用即時預覽與 SVG/PNG 匯出流程,產出可直接放入簡報、PDF 或其他可發布素材的視覺內容。

  • 從提示草擬

    當你想先從白話英文產出圖表草稿,再手動編輯原始碼時,可嘗試 AI 生成或修正。

Pros and Cons

Pros

  • 可搭配 Mermaid 與 PlantUML 使用,draw.io 支援則在 Pro 方案提供。
  • 保留原始圖表原始碼,僅變更渲染結果。
  • 提供即時預覽與一鍵 Beautify,適合以文字為主的工作流程。
  • 支援 SVG 與 PNG 匯出,適用於網頁與簡報。
  • 具備 Obsidian、VS Code 系列 IDE 與 CLI 的編輯器整合。

Cons

  • draw.io 匯入僅限 Pro。
  • 免浮水印分享模式與部分主題需要付費方案。
  • Obsidian 外掛的渲染採伺服器端處理,因此不是以離線優先為主的工具。

FAQ

我該如何在 Beauty Diagram 中美化圖表?

將 Mermaid 或 PlantUML 原始內容貼入編輯器,必要時選擇範例,然後使用 Beautify 重新排版並重新整理圖表。接著可將結果匯出為 SVG 或 PNG。

我可以匯入 draw.io 檔案嗎?

可以。網站說明 draw.io 匯入僅限 Pro 方案,匯入的流程圖或序列圖會先轉換成 Mermaid 原始碼,再進行美化。

支援哪些圖表格式?

此產品支援編輯器中的 Mermaid 與 PlantUML,draw.io 工作流程則在 Pro 方案提供。Obsidian 與 VS Code 整合也可渲染 Mermaid 和 PlantUML 區塊。

有免費版本嗎?

可以。免費方案適合偶爾使用,而 Pro 與 Premium 可解鎖無浮水印分享模式與額外主題。價格頁也提供一次性點數包,適合隨用隨付。

可用哪些匯出格式?

此產品提供 SVG 匯出與 PNG 匯出,網站也特別提到乾淨的 SVG 與 HD PNG 輸出。SVG 適合螢幕顯示,而 PNG 則適合簡報或列印流程。

Quick Facts

類別
圖表編輯器與美化工具
主要格式
Mermaid、PlantUML,以及 Pro 版的 draw.io
核心流程
貼上原始碼、即時預覽、美化、匯出
整合
Obsidian、VS Code 系列、CLI
定價模式
免費方案、Pro/Premium 方案,以及一次性點數包
來源網域
beauty-diagram.com