Beauty Diagram

What is Beauty Diagram?

Beauty Diagram is an online editor that takes Mermaid and PlantUML source code (and can import certain draw.io workflows) to render diagrams with a cleaner, presentation-ready layout and styling. Its core purpose is to “beautify” what those diagram languages already produce—re-spacing, re-layout, and export-ready output—without requiring users to manually redraw their diagrams.

It supports live preview, one-click beautification, and exports in SVG or PNG for documentation, decks, and reviews. The page also describes presentation-focused typography and theming, plus an “animated SVG” preview for sequence-style motion cues.

Key Features

• Mermaid editor with live preview and one-click beautification: Paste Mermaid source, view the result immediately, and apply formatting changes without rewriting the code.
• PlantUML editor with beautification workflow: Switch to PlantUML, paste the activity source, and apply a formatter that realigns spacing and diagram elements.
• draw.io import (Pro): Import a .drawio or an XML export (the site notes this is available on Pro). The editor parses the workflow into Mermaid source for beautification.
• Re-layout with orthogonal routing for flowcharts/activity diagrams: Re-spaces and routes diagrams on a grid using orthogonal connections (to avoid diagonal arrows cutting through nodes).
• Theme swapping for consistent styling: Switch between themes (listed: modern, atlas, obsidian, atelier) without editing the diagram source.
• Presentation-grade typography and styling: The page calls out Geist at 14px / 500, OpenType ligatures, baseline-aligned labels, and a preference for soft shadows instead of hard 1px strokes.
• Animated SVG previews (same source, different motion overlays): Layer subtle motion (examples listed: charge, laser, pulse) onto Mermaid output to clarify sequence/direction.
• Exports for docs and decks: Export SVG and PNG. The page also states 4× PNG export on Pro and notes that SVG is suitable for on-screen viewing while PNG can be used when destinations don’t support SVG.
• Canvas node/line adjustments via toolbar (source untouched): The site describes clicking nodes/lines to open a floating toolbar to adjust background, border, line color/width, and text color; customizations can be saved with the diagram and shared via link.

How to Use Beauty Diagram

1. Open the online editor and choose the diagram type (Mermaid or PlantUML; draw.io import is mentioned as Pro).
2. Paste your existing Mermaid or PlantUML source into the editor.
3. Use Beautify to apply the formatter: it re-lays out the diagram and applies the selected theme/styling rules.
4. Review the live preview, optionally adjust colors using the node/line toolbar, and switch themes if needed.
5. Export as SVG or PNG for the target workflow (docs/decks/reviews as described on the page).

Use Cases

• Turn a Mermaid flowchart into a slide-ready graphic: Paste Mermaid code, beautify to get orthogonal grid routing and a presentation palette/typography, then export SVG for embedding or high-zoom viewing.
• Fix cramped PlantUML activity diagrams: Switch the editor tab to PlantUML, paste an activity diagram, beautify to normalize spacing and swimlane/layout details.
• Maintain one diagram source across different presentation contexts: Use theme switching (modern/atlas/obsidian/atelier) to render the same Mermaid content for a deck, a documentation page, or a dark-mode README.
• Improve diagram readability by reducing visual clutter: Apply a one-accent palette where decision diamonds/branches stand out against grayscale content.
• Bring draw.io workflows into a Mermaid-based formatting pipeline (Pro): Import a .drawio file or XML export, parse it into Mermaid source, and continue editing/beautifying in the Mermaid workflow.

FAQ

How do I beautify a Mermaid flowchart? Paste your Mermaid source into the editor, click Beautify, and use the live preview to confirm the re-layout and styling changes. The page notes the original code remains the same; the render is what changes.

Can I improve a PlantUML activity diagram the same way? Yes. The page describes switching to the PlantUML tab, pasting the activity source, and clicking Beautify to realign swimlanes and normalize cramped default spacing.

What does SVG vs PNG mean for exports? The site states SVG is better for screen viewing (docs/websites/Figma embeds) because it stays crisp at any zoom, while PNG is useful for decks that will be exported to PDF/printed or when the destination tool doesn’t support SVG. It also mentions 4× PNG export on Pro.

Can Beauty Diagram import a draw.io file? Yes, but it’s noted as Pro: you can drop a .drawio or an XML export into the editor. The site says it parses the flowchart/sequence into Mermaid source for subsequent beautification.

Is this just a Mermaid Live editor clone? The page explicitly contrasts this with Mermaid Live by stating that Beauty Diagram post-processes Mermaid output—adding re-layout, spacing, typography, and palette changes—rather than only rendering what Mermaid produces by default.

Alternatives

• Mermaid Live editor (or other Mermaid renderers): Useful for live rendering of Mermaid syntax, but the source suggests Beauty Diagram focuses on post-processing the default renderer for presentation-grade layout and styling.
• Diagram authoring/whiteboard tools (e.g., flowchart design tools): They can create slide graphics, but they may require manual redrawing rather than beautifying existing Mermaid/PlantUML source code.
• Generic diagramming tools with export support: These can produce SVG/PNG outputs, but they are typically workflow-oriented around drawing rather than formatting/re-layout of Mermaid/PlantUML code.
• draw.io-native export workflows: If your diagrams already live in draw.io, you may rely on built-in exports; Beauty Diagram’s value is described specifically around converting/importing into a Mermaid workflow and applying beautification rules afterward.