PlantUML Renderer

About this tool

PlantUML Renderer lets you write and preview PlantUML diagrams in real time, with the SVG rendered via the official PlantUML online server. Choose from six built-in templates — sequence, class, activity, state, use case, and deployment — or write your own diagram from scratch. Changes to the source are debounced by 800 ms and trigger an automatic preview update, so the diagram stays in sync as you type. You can download the SVG for use in documentation or presentations, or copy the encoded PlantUML server URL to embed in wikis, GitHub README files, or email. The plantuml-encoder library runs locally to encode the source; the rendering itself is performed by plantuml.com. No sensitive data should be included in diagrams rendered this way.

Why use it

• Live SVG preview with 800 ms debounce — no manual refresh needed

• Six built-in templates covering the most common UML diagram types

• Download SVG for use in documentation, slides, or Confluence pages

• Copy a shareable encoded URL embeddable in GitHub READMEs and wikis

• Pure JS encoder runs locally — only the render step calls the server

• Live SVG preview with 800 ms debounce — see your diagram render as you type without manual refresh

How to use

1. Click a template chip (Sequence, Class, Activity, etc.) to load a starter diagram.
2. Edit the PlantUML source in the left editor — the preview updates automatically after 800 ms.
3. Click Render to force an immediate update.
4. Click Download SVG to save the diagram as a vector file.
5. Click Copy URL to get a shareable direct link to the rendered SVG.
6. Click a template chip (Sequence, Class, Activity, State, Use Case, Deployment) to load a starter diagram.
7. Edit the PlantUML source in the left editor — the preview updates automatically 800 ms after you stop typing.

When it helps

• Designing software architecture with sequence or class diagrams
• Documenting application state machines with state diagrams
• Creating user story or requirements diagrams with use-case charts
• Generating deployment topology diagrams for infrastructure documentation
• Embedding up-to-date diagrams in GitHub wikis via the encoded URL
• Designing software architecture with sequence diagrams between services or class relationships

Examples

@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob: Another auth Request
Alice <-- Bob: Another auth Response
@enduml

Renders an SVG with two lifelines (Alice, Bob) and four arrows showing a basic auth handshake.

@startuml
class Animal {
  +name: String
  +makeSound(): void
}
class Dog extends Animal {
  +bark(): void
}
class Cat extends Animal {
  +purr(): void
}
@enduml

Renders a class diagram with Animal as parent and Dog/Cat as subclasses, each with their own methods listed.

@startuml
[*] --> Idle
Idle --> Running : start
Running --> Paused : pause
Paused --> Running : resume
Running --> [*] : stop
@enduml

Renders a state machine with Idle, Running, and Paused states and transitions labelled start/pause/resume/stop.

Tips

• Use !theme materia or !theme cerulean at the top of your source for cleaner default colours.
• Sequence diagrams support 'autonumber' to auto-number arrows — handy for traceability in specs.
• Add 'skinparam monochrome true' to render in pure black and white for print-friendly documentation.
• Class diagrams can show methods with visibility prefixes: + (public), - (private), # (protected), ~ (package).
• For long sequences, use 'group' / 'end' to box related interactions and improve readability.
• Embed the Copy URL output as  in Markdown — GitHub renders it inline as an image.
• Comment lines start with ' (apostrophe) — useful for documenting which arrow represents which call.

Frequently Asked Questions

Glossary

PlantUML

An open-source DSL (domain-specific language) for declaring UML diagrams as text, then rendering them to images via a Java-based server or online service.

UML (Unified Modeling Language)

A standard family of diagram types (sequence, class, activity, state, etc.) used in software design and documentation.

Sequence diagram

A UML diagram showing time-ordered interactions between actors and components, with vertical lifelines and horizontal arrows representing messages.

Class diagram

A UML diagram showing classes, their attributes and methods, and the relationships (inheritance, association, composition) between them.

State diagram

A UML diagram showing the discrete states an object can be in and the transitions triggered by events or conditions.

Use case diagram

A UML diagram showing actors (users or external systems) and the use cases (capabilities) they interact with, often used in requirements gathering.

Deployment diagram

A UML diagram showing the physical or logical topology of a system — servers, containers, network links — and where components are deployed.

SVG (Scalable Vector Graphics)

An XML-based vector image format that scales without pixelation, ideal for diagrams that must look crisp at any zoom level.

Debounce

A UI technique that delays an action until input has stopped for a set time (here 800 ms), avoiding repeated re-renders while the user is still typing.