Beauty Diagram

Beauty Diagramとは？

Beauty Diagramは、MermaidおよびPlantUMLのソースコードを受け取り（draw.ioの特定のワークフローをインポート可能）、よりクリーンでプレゼン対応のレイアウトとスタイリングで図をレンダリングするオンライエディタです。その主な目的は、これらの図言語が生成するものを「美しく整える」こと—再配置、再レイアウト、出力準備—で、ユーザーが手動で図を再描画する必要はありません。

ライブプレビュー、ワンクリック美化、ドキュメント/デッキ/レビュー用のSVGまたはPNGエクスポートをサポートします。ページではプレゼン向けタイポグラフィとテーマング、シーケンススタイルのモーションcueのための「animated SVG」プレビューも説明しています。

主な機能

• Mermaidエディタ（ライブプレビュー＆ワンクリック美化）: Mermaidソースを貼り付け、即座に結果を表示し、コードを書き直さずにフォーマット変更を適用。
• PlantUMLエディタ（美化ワークフロー）: PlantUMLに切り替え、アクティビティソースを貼り付け、スペーシングと図要素を再整列するフォーマッタを適用。
• draw.ioインポート（Pro）: .drawio または XML export をインポート（サイトではProで利用可能と記載）。エディタがワークフローをMermaidソースに解析して美化。
• フローチャート/アクティビティ図の直交ルーティング再レイアウト: 直交接続（ノードを横切る斜め矢印を避ける）でグリッド上に図を再配置・ルーティング。
• 一貫したスタイリングのためのテーマ切り替え: 図ソースを編集せずにテーマ（modern, atlas, obsidian, atelier）を切り替え。
• プレゼングレードのタイポグラフィとスタイリング: ページでGeist at 14px / 500、OpenType ligatures、ベースライン揃えラベル、ハード1pxストロークの代わりにソフトシャドウを強調。
• Animated SVGプレビュー（同一ソース、異なるモーションオーバーレイ）: Mermaid出力に微妙なモーション（例: charge, laser, pulse）を重ね、シーケンス/方向を明確化。
• ドキュメント/デッキ用エクスポート: SVG と PNG をエクスポート。ページではProで4× PNG export を記載、SVGは画面表示向き、PNGはSVG非対応先向け。
• ツールバー経由のキャンバスノード/ライン調整（ソースはそのまま）: サイトではノード/ラインをクリックしてフローティングツールバーを開き、背景、ボーダー、ライン色/幅、テキスト色を調整、カスタマイズを図とリンクで保存・共有可能と説明。

Beauty Diagramの使い方

1. オンライエディタを開き、図タイプを選択（MermaidまたはPlantUML；draw.ioインポートはPro）。
2. 既存のMermaidまたはPlantUMLソースをエディタに貼り付け。
3. Beautify でフォーマッタを適用：図を再レイアウトし、選択テーマ/スタイリングルールを適用。
4. ライブプレビューを確認、必要に応じてノード/ラインツールバーで色調整、テーマ切り替え。
5. 対象ワークフロー（ページ記載のdocs/decks/reviews）用に SVG または PNG でエクスポート。

ユースケース

• Mermaidフローチャートをスライド対応グラフィックに: Mermaidコードを貼り付け、美化で直交グリッドルーティングとプレゼンパレット/タイポグラフィを適用、SVGを埋め込み/高ズーム表示用にエクスポート。
• PlantUMLアクティビティ図の詰まりを修正: エディタタブをPlantUMLに切り替え、アクティビティ図を貼り付け、美化でスペーシングとスイムレーン/レイアウトを正規化。
• 異なるプレゼンコンテキストで同一図ソースを維持: テーマ切り替え（modern/atlas/obsidian/atelier）で同一Mermaidコンテンツをデッキ、ドキュメントページ、ダークモードREADME用にレンダリング。
• 視覚的雑音を減らして図の可読性を向上: 決定菱形/ブランチがグレイスケールコンテンツに対して目立つワンアクセントパレットを適用。
• draw.ioワークフローをMermaidベースのフォーマットパイプラインに（Pro）: .drawio ファイルまたはXMLエクスポートをインポート、Mermaidソースに解析し、Mermaidワークフローで編集/美化を継続。

FAQ

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エディタのクローンですか？ ページではMermaid Liveと明確に区別し、Beauty DiagramはMermaid出力を後処理して再レイアウト、間隔、タイポグラフィ、パレット変更を加えるため、デフォルトレンダリングのみではないと述べています。

代替ツール

• Mermaid Liveエディタ（または他のMermaidレンダラー）：Mermaid構文のライブレンダリングに有用ですが、ソースではBeauty Diagramがデフォールトレンダラーをプレゼン品質のレイアウトとスタイルに後処理することに特化していると示唆されています。
• ダイアグラム作成/ホワイトボードツール（例：フローチャートデザインツール）：スライドグラフィックスを作成できますが、既存のMermaid/PlantUMLソースコードを美麗化するのではなく、手動再描画が必要な場合があります。
• エクスポート対応の汎用ダイアグラミングツール：SVG/PNG出力が可能ですが、通常は描画中心のワークフローで、Mermaid/PlantUMLコードのフォーマット/再レイアウトには向きません。
• draw.ioネイティブのエクスポートワークフロー：ダイアグラムがすでにdraw.ioにある場合、ビルトインエクスポートに頼れますが、Beauty Diagramの価値はdraw.ioをMermaidワークフローに変換/インポートし、その後に美麗化ルールを適用することに特化して説明されています。