UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

PlantUML Renderer

Write PlantUML diagrams and preview them as SVG — sequence, class, activity, and more.

About PlantUML Renderer

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 PlantUML Renderer

  • 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 PlantUML Renderer

  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 to use PlantUML Renderer

  • 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

Sequence diagram

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

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

Class diagram with inheritance

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

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

State diagram

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

Output: 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 ![diagram](url) 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

Is my diagram data private?▾
No — the diagram source is encoded and sent to plantuml.com for SVG rendering. Avoid including sensitive, confidential, or proprietary information.
What diagram types are supported?▾
All PlantUML diagram types: sequence, use case, class, activity, state, component, deployment, object, network, and more, using standard PlantUML syntax.
Does this work offline?▾
No. Rendering requires a request to the PlantUML online server. The local encoder works offline, but the SVG preview requires an internet connection.
How do I use the shareable URL?▾
Click Copy URL to get a direct link to the plantuml.com SVG. This URL can be pasted into a GitHub README as an image tag and will render inline.
What is the source size limit?▾
PlantUML server accepts diagrams up to several kilobytes. Very large or complex diagrams with hundreds of nodes may time out or return an error from the server.

Explore the category

Mermaid Live Editor Write Mermaid diagram syntax and see a live SVG preview — flowcharts, sequence, Gantt, class, ER, and state diagrams. HTTP Status Lookup Search HTTP status codes and names with class-based filters and notes. OG Tag Generator Generate Open Graph meta tags with preview-friendly fields and copy-ready output. Twitter Card Generator Generate Twitter/X card tags and preview social metadata quickly. JSON to CSharp Class Convert JSON payload samples into C# class models with inferred nested types. Box Shadow Generator Tune blur, spread, offsets, color, and inset shadows with an instant CSS preview.
Mermaid vs PlantUML vs Graphviz: Diagrams as Code Compared Three popular diagram-as-code tools, three different philosophies. We compare syntax, layout engines, output quality, and which one fits you May 2026 · 9 min

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.