Convert PlantUML to PNG or SVG Online
The usual ways to turn a `.puml` file into an image both have friction. Installing the PlantUML jar means installing Java and Graphviz. Using a public render server means posting your diagram source to someone else's machine, which is often the exact thing you cannot do at work.
This page does the conversion in your browser. Paste your PlantUML, check the preview, and download a PNG or an SVG. The engine runs locally, so the source never leaves your machine and the whole thing keeps working with the network off.
Paste your own .puml source over this sample, then use Export in the toolbar.
PNG or SVG - which one do you want?
Pick SVG whenever the destination accepts it. It is a vector format, so the diagram stays sharp at any zoom, the text stays selectable and searchable, and the file is usually smaller than the equivalent PNG. Documentation sites, wikis and modern README renderers all handle it.
Pick PNG when the destination is fussy: some chat clients, older wikis, slide decks, and anything that will be printed or pasted as a bitmap. PNG also sidesteps the one real SVG gotcha, which is that fonts are referenced rather than embedded - a diagram using a font the viewer does not have will render with a substitute.
The opposite gotcha applies to PNG. Because it rasterises text using the fonts available locally, unusual scripts and emoji can come out as empty boxes. If that happens, export SVG instead.
Resolution and transparency
PNG export renders at twice the diagram's natural size, so it stays crisp on high-density screens and survives being scaled down in a slide. You do not need to set anything for this.
Very large diagrams are the exception. Browsers cap how big a canvas can be, so an unusually tall or wide diagram gets scaled down to fit - the editor tells you when this happens and suggests SVG, which has no such limit and is lossless at any size.
The background follows the preview setting in the toolbar. White is the default; transparent gives you a PNG that sits on any background, which is what you usually want for a slide deck; dark matches a dark documentation theme. The setting applies to both the download and the clipboard copy.
Four ways to get the diagram out
Copy image puts the rendered diagram on your clipboard as a bitmap, ready to paste into a pull request comment, a ticket or a chat message. This is the fastest route and the one you will use most.
Download PNG and Download SVG save a file, using the name in the Export panel. Copy SVG markup gives you the raw <svg> element, which you can paste directly into an HTML page or a Markdown file that allows inline HTML - no image hosting required.
Download .puml source saves the text rather than the picture. Committing that alongside your code is what makes the diagram maintainable; the exported image is a build artifact of it.
Why no Java or Graphviz install
PlantUML normally runs as a Java program, and most diagram types delegate their layout to Graphviz. That is two system dependencies to install and keep in step, which is why so many teams end up pointing at a shared render server instead.
Here, the official PlantUML engine is compiled to JavaScript and the Graphviz layout engine is compiled to WebAssembly, both served from this site and executed by your browser. The first load fetches a few megabytes of engine; after that it is cached, and conversions work offline.
Export formats at a glance
| Format | Best for | Watch out for |
|---|---|---|
| SVG (download) | Docs, wikis, READMEs, anything zoomable | Fonts are referenced, not embedded |
| SVG (copy markup) | Inlining directly into HTML or Markdown | Some renderers strip inline SVG |
| PNG (download) | Slides, chat, printing, older tools | Huge diagrams get scaled to fit canvas limits |
| PNG (copy image) | Pasting straight into a PR, ticket or chat | Clipboard image support varies by browser |
| .puml (download) | Committing the source next to your code | It is text, not an image |
Examples
A diagram sized for a slide
Short and wide reads better on a projector than tall and detailed. Set the preview background to transparent before exporting.
Input
@startuml
left to right direction
skinparam shadowing false
rectangle "Client" as C
rectangle "API Gateway" as G
rectangle "Service A" as A
rectangle "Service B" as B
database "Store" as D
C --> G
G --> A
G --> B
A --> D
B --> D
@endumlEmbedding the SVG markup in a README
Copy SVG markup, then paste it inside your HTML. No image file and no hosting involved.
Input
<figure>
<!-- paste the copied <svg> element here -->
<svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>
<figcaption>Request flow</figcaption>
</figure>How to use this plantuml to png & svg editor
- 1
Paste your PlantUML
Replace the sample in the editor with your own source, including the
@startumland@endumllines. The preview renders as you type. - 2
Set the background
Use the background control in the preview toolbar to pick white, transparent or dark. Transparent is usually right for slides.
- 3
Export
Open Export in the toolbar, set a file name, and choose Download PNG or Download SVG. Or use Copy image to skip the file entirely.
- 4
Keep the source
Download the .puml file too and commit it. Regenerating the image later is then a five-second job rather than a reconstruction.
Frequently asked questions
How do I convert a .puml file to PNG without installing anything?
Open the editor on this page, paste the contents of your .puml file, and use Export then Download PNG. The conversion runs in your browser using the PlantUML engine compiled to JavaScript, so there is nothing to install and no server involved.
Is my diagram uploaded to a server to be converted?
No. Both the PlantUML engine and the Graphviz layout engine run inside your browser tab. Your source is never transmitted for rendering, which is the main reason to use this rather than a public PlantUML render server.
What resolution is the exported PNG?
Twice the diagram's natural size, which keeps it sharp on high-density displays. Very large diagrams are scaled down to stay within the browser's canvas limits, and the editor tells you when that has happened so you can export SVG instead.
Can I get a PNG with a transparent background?
Yes. Set the preview background to transparent before exporting. The choice applies to both the downloaded PNG and the clipboard copy. SVG output has no background fill unless your diagram specifies one.
Should I use PNG or SVG?
SVG if the destination supports it - it stays sharp at any size, keeps text selectable, and has no size ceiling. PNG for slides, chat clients, printing, and anywhere SVG is not accepted or is stripped.
Does it work offline?
Yes, once the page and the engine have loaded. LocalOnly is a Progressive Web App, so the engine is cached and conversions keep working without a connection.