PlantUML is a language: you type @startuml, declarations, relationships, and @enduml, and a renderer draws the picture. Diffs in git are readable. Reviews can happen in pull requests. The same source can generate PNG for Confluence and SVG for a wiki.

Drag-and-drop tools are faster for a one-off slide. They are weaker when a team must keep diagrams next to code for years. If two people edit a binary file, merges fail. If the layout is the document, a small class rename becomes a drawing chore.

Using PlantUML online means you skip a local Graphviz install for everyday work. UML Diagram Studio compiles in the browser (and via its compile API) so you can learn syntax without setting up Java. For CI, you can still run PlantUML in a pipeline later. The online editor is for drafting, teaching, and exporting.

This site is a free UML diagram tool with live preview, templates, and an AI assistant that emits PlantUML from a sentence. That is useful when you remember the shape of a sequence but not the keyword for alt fragments.

Every diagram starts and ends with the startuml markers. Optional skinparam and theme lines change fonts and background. Titles help when you export several PNGs into a folder.

Class diagrams use class blocks and relationship arrows. Sequence diagrams use actor, participant, and arrows. Activity diagrams in the modern syntax use start, :action;, if, and stop. Use case diagrams use actor, rectangle, and usecase. You do not need all of that on day one. Copy a class diagram example and change names.

Comments in PlantUML start with a single quote. Use them to leave a note for the next editor, not to hide secret data. Treat diagram text like source code: no passwords, no customer dumps.

On umldiagram.app the left pane is the editor and the right pane is the preview. Typing updates the picture after compile. If the syntax is invalid, you will see an error instead of a drawing. Fix the line, do not start over.

Local storage keeps the last buffer on that browser. It is not a cloud account. Copy important diagrams into git. Export PNG or SVG when you need a snapshot for a ticket.

Templates in the studio cover common types so you are not staring at a blank page. The gallery pages include full exampleCode you can send to the editor with Open in the free UML diagram tool.

Mermaid is also accepted for some diagrams if your team already uses it in Markdown. PlantUML remains the richer UML dialect for class relationships and sequence fragments. Pick one per repo so the style stays consistent.

PlantUML chooses layout. You influence it with direction (left to right), hidden links, and splitting large models into several diagrams. Fighting the layout engine for pixel-perfect boxes is usually wasted time. If a diagram is unreadable, you have too many nodes, not a theme problem.

Use a plain theme for documentation. High-contrast skins help projectors. Transparent backgrounds sit better on dark sites.

Name things the way the code is named. A diagram that says CustomerService while the repo says BillingClient will not help onboarding. The getting started post covers class compartments and visibility marks.

Notes (note left of Class) explain a constraint that the arrows cannot show. Keep notes short. Long essays belong in the Markdown around the diagram, not inside it.

Sequence diagrams in PlantUML map well to logs: who called whom. Activation bars make nested calls obvious. Combined fragments (alt, opt, loop, par) document branches that a linear log hides. See mastering sequence diagrams for message types.

Activity diagrams are better for business process owners. Swimlanes assign steps to roles. Guards on decisions should match real policies (if paid, if in stock). The activity tutorial and gallery activity example give copy-paste starters.

State diagrams use [*] for initial and final states. They are the right tool for order status, not for a 40-step onboarding checklist. That checklist is an activity.

Describing a system in a sentence and getting PlantUML back is a speed boost. It is also a hallucination risk. Generated diagrams invent classes and services that do not exist. Always read the text before you commit it.

A practical loop: write three sentences of real architecture, generate, delete anything you cannot point to in the repo, then tighten names. The AI diagram generation article covers that workflow in more depth.

Do not paste proprietary schemas into a public model if your policy forbids it. The privacy policy explains that prompts go to an API when you use chat.

Store .puml files next to the feature they describe, or in /docs/uml. In the pull request, reviewers can read the text even if they do not render it. Optionally attach an exported PNG for people who will not run the editor.

CI can fail a build if PlantUML does not compile. That catches broken arrows after a rename. It will not catch a diagram that compiles but is wrong. Humans still review meaning.

When a class is renamed in code, grep the .puml files. Text search is the hidden benefit of PlantUML online and offline. You cannot grep a Figma frame as easily.

Choose PlantUML when diagrams must live with code, when several people edit them, and when UML (not a freeform whiteboard) is the language you want. Choose a whiteboard when you are still discovering whether a concept exists. Many teams sketch on a board, then freeze the agreement as PlantUML.

Online PlantUML is enough for class, sequence, activity, state, and use case work in this studio. Heavy C4 or custom sprites may need the full PlantUML desktop or a dedicated server. Start here, graduate if you hit a syntax wall.

Licensing: PlantUML itself is open source. Your diagrams are yours, as described in the terms. Do not assume a generated PNG is a trademark-safe copy of someone else's architecture.

A tiny class diagram to confirm the editor works:

Open the homepage editor and paste the starter. Then load a sequence example or a use case example. Read class diagram best practices before you model a large domain.

PlantUML online is a habit: small text files, frequent exports, diagrams that match the repo. The syntax is the easy part. The hard part is drawing only what the next reader needs.