Beauty Diagram

Beauty Diagramは、MermaidとPlantUMLの図をライブプレビューし、レイアウトを整えてSVGやPNGで書き出せるオンラインエディターです。ObsidianやVS Code系にも対応します。

Beauty Diagramとは

Beauty Diagramは、Mermaid、PlantUML、そして一部の draw.io ワークフロー向けのオンライン図表エディター兼ビジュアル調整ツールです。すでにテキストで図を作成している人が、図形やコネクタを手で描き直すことなく、より整ったレンダリングを得られるように設計されています。

基本的な流れはシンプルです。ソースを貼り付けてライブプレビューし、Beautify で図を再レイアウトし、最後に SVG または PNG として書き出します。このサイトは、ドキュメント、ノート、スライド資料で見栄えよく表示したい図に向けて製品を位置づけつつ、ソースコード自体はバージョン管理されたワークフローで再利用できるように保ちます。

主な機能

Beautify 付きライブエディター

Mermaid または PlantUML のソースを貼り付け、ブラウザーでプレビューし、ワンクリックの Beautify でソースは変えずに図のレイアウトを再構成できます。

複数の図表形式

Mermaid、PlantUML、そして Pro の draw.io ワークフローに対応しているため、既に使っている形式のまま図を扱えます。

SVG と PNG の書き出し

Beautified した図を SVG または PNG で書き出せます。サイトでは Pro での 4× PNG 書き出しと、Pro の完全書き出しでウォーターマークがないことも案内されています。

テーマベースのスタイル設定

テーマ切り替えに対応しており、基になるコードを編集せずに、同じ図をドキュメント、スライド、ダークモードのノート向けに見た目を変えられます。

アニメーション付きプレビュー

subtle、lightning、laser、charge、pulse などのアニメーション SVG スタイルを備え、図のソースを書き換えずに動きを加えられます。

AI 支援の図作成

自然言語から Mermaid または PlantUML のソースを下書きし、既存の図を反復改善する AI generate と refine のフローに対応しています。

適した用途

ドキュメント用の図表
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 の書き出しに対応しているため、Web と प्रस्त示用の両方で使えます。
Obsidian、VS Code 系 IDE、CLI 向けの統合機能があります。

Cons

draw.io のインポートは Pro 限定です。
ウォーターマークなしの共有モードや一部のテーマは有料プランが必要です。
Obsidian プラグインのレンダリングはサーバー側で行われるため、オフライン優先のツールではありません。

FAQ

Beauty Diagramで図をきれいにするにはどうすればよいですか？

Mermaid または PlantUML のソースをエディターに貼り付け、必要に応じてサンプルを選び、Beautify を使って図のレイアウトとスタイルを整えます。その後、結果を SVG または PNG として書き出せます。

draw.io ファイルをインポートできますか？

はい。サイトでは、draw.io のインポートは Pro プランで利用でき、取り込んだフローチャートやシーケンス図は Beautify の前に 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
基本ワークフロー: ソースを貼る、ライブプレビュー、Beautify、書き出し
統合機能: Obsidian、VS Code ファミリー、CLI
料金モデル: 無料ティア、Pro/Premium プラン、買い切りクレジットパック
ソースドメイン: beauty-diagram.com

Beauty Diagramの代替品

Napkin AI

Napkin AIは、テキストをプレゼン資料や文書、共有用コンテンツ向けの編集可能なビジュアルに変換します。テキスト起点で生成でき、共同編集にも対応。PPT、PNG、SVG、PDFで書き出せます。

Slidesgo

Slidesgoは、Google Slides、PowerPoint、Canva向けのプレゼンテーションテンプレート集。無料・Premiumテンプレートに加え、AIによる資料作成やチーム向けアクセスにも対応。

ChatBA

ChatBA is a generative AI product for creating slide decks from prompts. The public site emphasizes instant presentation generation and includes help content for templates, sharing, and data sources.

Beautiful.ai

Beautiful.aiは、個人・チーム・企業向けのAIプレゼンテーションプラットフォームです。Smart Slides、共同編集、書き出し機能で、ブランドに沿った資料を効率よく作成できます。

MagicSlides

MagicSlides is an AI presentation generator that turns text, topics, documents, URLs, and videos into slide decks. It creates presentations in Google Slides by default and supports PowerPoint export, with multilingual output and AI-assisted editing.

Lumox

Lumox is a Mac app for wireless screen mirroring from iOS devices. It supports screenshots, video recording, multiple devices, and presentation-friendly display modes such as transparent background and fullscreen.