Theme
Animation
Source Editor
Mermaid flowchart
1
2
3
4
5
6
7
Preview
Not saved yet
Beautified
100%
EditingMy Diagrams
Editor
Online diagram editor — Mermaid & PlantUML
Paste Mermaid or PlantUML source, preview the rendered diagram live, and export a cleaner SVG or PNG you can drop straight into docs, decks, or tickets — no account required.
Live preview
Edit Mermaid or PlantUML source on the left and see the rendered diagram update on the right in real time.
Auto beautify
One click rewrites the layout so the main path, branches, loops, and merges are obvious at first glance.
Export SVG & PNG
Download presentation-ready assets with fonts inlined, sized for docs, slide decks, or Figma drops.
Frequently asked questions
Is my source kept private?
Your Mermaid or PlantUML source stays in the browser unless you explicitly save it to your account. Anonymous sessions never persist server-side.
Does the editor support Mermaid subgraphs and LR / TD / BT layouts?
Yes. All Mermaid flowchart directions (TD, TB, BT, LR, RL) and subgraph blocks are supported. Beauty Diagram respects the source direction as a layout hint and may reflow for readability on complex flows.
Which PlantUML diagram types are supported?
Activity diagrams are fully supported. Sequence, component, and class diagrams are parsed at a basic level today and will grow in later releases.
Does it handle `fork` / `if` / `while` in PlantUML activity diagrams?
Yes. `fork`/`fork again`, `if`/`elseif`/`else`/`endif`, `while`/`endwhile`, and `repeat`/`repeat while` are recognised and routed into readable layouts.
Can I export SVG that preserves fonts?
Yes. Export SVG inlines the Beauty Diagram font stack so diagrams render identically in docs and decks without fallback surprises.
Do I need an account to beautify and export?
No. Anonymous use is free for unlimited beautify and export. An account is only required to save diagrams to the cloud and share them via link.
What's the difference from mermaid.live?
mermaid.live renders whatever Mermaid's default engine outputs. Beauty Diagram re-lays out the diagram for readability before export — main path, branches, loops, and merges become obvious at first glance.
Dive deeper
How to beautify a Mermaid flowchart
A step-by-step walkthrough with real before-and-after examples.
How to improve a PlantUML activity diagram
Cover start/stop, branches, forks, and loops with a cleaner layout.
Mermaid vs PlantUML
Choose the right diagram language for your docs, toolchain, and team.
SVG vs PNG for exported diagrams
Pick the right format and avoid font or DPI surprises on export.