PlantUML Editor
Type PlantUML and watch the diagram update as you write. Start from a sequence, class, activity, state, use case, component, ER, mind map or Gantt template, then download a clean SVG or a high-resolution PNG. Everything is drawn in your browser, so private architecture diagrams never leave your computer.
Last updated:
Diagrams are drawn in your browser: the PlantUML code is converted on your device and rendered as SVG, so nothing is uploaded. The server URL is only created, never opened, so you can check a diagram with the official PlantUML renderer if you choose.
How to use the PlantUML Editor
- Pick a template such as Sequence or Class, or paste your existing @startuml … @enduml code.
- Edit the code. The preview updates as you type; anything that cannot be drawn is listed under the editor with its line number.
- Choose a style and zoom the preview to check details.
- Download SVG or PNG, or save the source with Download .puml.
- Reuse it elsewhere: Copy as Mermaid gives a code block GitHub renders natively, and Copy share link stores the diagram in a URL.
PlantUML syntax cheat sheet
Every diagram sits between @startuml and @enduml (mind maps use @startmindmap, Gantt charts @startgantt). The diagram type is recognized from the statements you use.
| Diagram | Key statements |
|---|---|
| Sequence | actor User, participant "Web app" as App, User -> App : Log in (solid), App --> User : OK (dashed reply), alt / else / end, loop, note right of App : text, activate App |
| Class | class Order { - id : int + total() : float }, interface, abstract class, enum, A <|-- B inheritance, A *-- B composition, A o-- B aggregation, A ..> B dependency, "1" o-- "*" cardinality |
| Activity | start, :Do something;, if (ok?) then (yes) / else (no) / endif, while (more?) / endwhile, repeat / repeat while (again?), fork / fork again / end fork, |Lane|, stop |
| State | [*] --> Idle, Idle --> Busy : start, state Busy { … }, state Check <<choice>>, -- between concurrent regions |
| Use case | actor Customer, usecase "Pay" as UC1 or (Pay), rectangle Shop { … }, UC1 ..> UC2 : <<include>> |
| Component | [API], component, node, database, cloud, package "Name" { … }, () "HTTP" interface, A --> B : label |
| ER | entity User { *id : int <<PK>> -- name : text }, User ||--o{ Order : places |
| Mind map | * Root, ** Child, *** Grandchild (the number of stars sets the level) |
| Gantt | Project starts 2026-03-02, [Design] lasts 5 days, [Build] starts at [Design]'s end, [Launch] happens at [Build]'s end, -- Phase -- |
Arrow and relation reference
| Code | Where | Meaning |
|---|---|---|
-> / --> | Sequence | Synchronous message / return message (dashed) |
->> | Sequence | Asynchronous message (open arrowhead) |
->x | Sequence | Lost message (ends in a cross) |
++ / -- after a message | Sequence | Activate the target / deactivate the sender |
<|-- / <|.. | Class | Inheritance (extends) / realization (implements) |
*-- / o-- | Class | Composition (filled diamond) / aggregation (hollow diamond) |
--> / ..> | Class, component | Association / dependency |
||--o{ | ER | Exactly one to zero or more (crow's foot) |
-up->, -left-> | All | Layout hints; accepted and treated as a normal arrow |
Tips
- Use aliases for long names:
participant "Payment service" as Paykeeps every message line short and readable. - Keep diagrams in Git as
.pumlfiles next to the code they describe; text diffs show exactly what changed. - Break up large diagrams. A sequence diagram with more than about eight participants or a class diagram with more than fifteen classes is easier to read as two diagrams.
- Write
left to right directionat the top of use case, component, class and state diagrams for a horizontal layout.
Frequently asked questions
What is PlantUML?
PlantUML is a widely used open-source language for describing UML and other diagrams as plain text. A line such as Alice -> Bob : Hello becomes a sequence diagram arrow. Because diagrams are text, they can be versioned in Git, reviewed in pull requests and generated by scripts.
Is my diagram sent to a server?
No. The official PlantUML renderer is a Java program, usually reached through the plantuml.com server, which receives your diagram text. This editor instead converts the PlantUML code in your browser and draws it with the open-source Mermaid engine, so the text stays on your device. Only the renderer library itself is downloaded from a public CDN.
Does it support every PlantUML feature?
It covers the syntax most diagrams use: sequence, class, activity (new syntax), state, use case, component and deployment, entity relationship, mind map, WBS and Gantt diagrams. Styling with skinparam, sprites, !include files and some rarer elements are skipped, and the editor lists every skipped line. The layout is computed by a different engine, so spacing and arrow routing can differ from plantuml.com. For pixel-identical output, use Copy PlantUML server URL.
What is the PlantUML server URL?
PlantUML can encode a diagram into a URL: the text is compressed with deflate and written in a URL-safe base64 alphabet, for example https://www.plantuml.com/plantuml/svg/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000. The editor builds that URL locally and only copies it. If you open it, the diagram text is sent to plantuml.com to be drawn.
Why is a line marked as not understood?
The converter supports common PlantUML statements. A misspelled keyword, a missing @enduml in the middle of the text, or a feature that cannot be drawn here (such as skinparam styling or the old (*) activity syntax) is listed under the editor with its line number, and the line number is highlighted in the gutter. The rest of the diagram is still drawn.
SVG or PNG: which should I download?
SVG is a vector image that stays sharp at any zoom level and can be edited in Inkscape, Figma or draw.io; it is ideal for documentation and wikis. PNG works everywhere, including slides, chat and issue trackers; choose 2× or higher so text stays crisp on high-resolution screens.
Can I convert PlantUML to Mermaid?
Yes. Press Copy as Mermaid to get the equivalent Mermaid code in a Markdown block. GitHub, GitLab, Notion, Obsidian and many wikis render Mermaid code blocks natively, so it is a handy way to move diagrams into a README.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.