States and Transitions
A state describes a stable condition, while an arrow describes the event that moves the subject into another condition. Name states with concise nouns or adjectives and transitions with meaningful events.
PlantUML State Diagram Online
Create a PlantUML state diagram online, model lifecycle transitions, preview the state machine, and export PNG or SVG.
PlantUML State Diagram Online Editor
Start with the State Diagram template, edit the PlantUML source, and preview the result live.
Use this focused state diagram tool for quick previews and exports. Open the full editor for AI generation, syntax repair, sharing, and saved projects.
Diagram preview
Create a PlantUML State Diagram Online
Model states, events, transitions, initial and final states, guards, actions, and composite states in an editable PlantUML workspace with live preview and PNG or SVG export.
Built-in State Diagram template
Start from valid PlantUML source designed for a practical state diagram.
Live diagram preview
See the rendered diagram update as you edit the PlantUML source.
Focused state diagram guidance
Learn the syntax and modeling choices used for order lifecycles, authentication sessions, device behavior, workflow engines, UI states, and protocol design.
PNG and SVG export
Download a shareable PNG or scalable SVG from the same source.
No local setup
Create and preview PlantUML without installing Java, Graphviz, or an IDE extension.
Continue in OnUML
Move to the full editor for AI generation, repair, sharing, and saved projects.
How to Create a PlantUML State Diagram
Use the built-in template to create a state diagram for order lifecycles, authentication sessions, device behavior, workflow engines, UI states, and protocol design.
- 01
Start with the built-in State Diagram template.
- 02
Replace the sample states with stable conditions in your system.
- 03
Label transitions with the event, guard, or action that causes each change.
- 04
Check that initial, final, error, and recovery paths are represented.
- 05
Preview and export the state diagram as PNG or SVG.
PlantUML State Diagram Syntax and Use Cases
Learn the core syntax and modeling decisions behind a useful state diagram, then apply them directly in the online editor above.
Initial and Final States
Use [*] as the initial or final marker. An arrow from [*] identifies the starting state, while an arrow into [*] identifies a completed lifecycle.
[*] --> Draft
Draft --> Published : publish
Published --> [*] : archiveGuards and Transition Actions
Label a transition with the common event [guard] / action convention. Square brackets communicate a condition and text after a slash communicates triggered behavior, but PlantUML displays the complete expression as a transition label rather than validating its semantics.
Pending --> Approved : approve [payment valid] / reserve stockComposite States
Use nested state blocks when one high-level state contains its own lifecycle. Composite states help keep a large state machine readable without flattening every internal condition into one level.
PlantUML State Diagram Example
The editable example demonstrates a practical state diagram. Change the source, check the live preview, and export the version you need.
@startuml
[*] --> Pending
Pending --> Paid : payment received
Paid --> Shipped : items dispatched
Shipped --> Delivered : order completed
Delivered --> [*]
Pending --> Cancelled : timeout
Cancelled --> [*]
@endumlRelated PlantUML Tools
Use these related tools when you need a different export format or a full PlantUML editing workflow.
PlantUML Tools
Browse the complete OnUML matrix of online PlantUML tools and converters.
View all PlantUML toolsPlantUML Online Editor
Use the general editor when you want to switch freely between diagram types.
Open the general editorPlantUML Sequence Diagram Online
Create and export a focused sequence diagram with a built-in template.
Create a sequence diagramWhy Use PlantUML for State Diagrams
PlantUML keeps state diagrams in reviewable text, making them easier to update, version, reuse, and export as the design changes.
Start from the right diagram type
Open directly into a State Diagram template instead of adapting an unrelated example.
Keep the model reviewable
Store the diagram as readable text that works well in documentation and version control.
Preview before sharing
Check structure, labels, and relationships before exporting the rendered diagram.
Frequently Asked Questions
What is a PlantUML state diagram online tool?
It is a browser-based editor that starts with a State Diagram template and lets you edit PlantUML source, preview the rendered diagram, and export PNG or SVG without local setup.
What can I model in a state diagram?
Use it to model states, events, transitions, initial and final states, guards, actions, and composite states. Common uses include order lifecycles, authentication sessions, device behavior, workflow engines, UI states, and protocol design.
How do I show the initial state in PlantUML?
Use [*] as the source of the first transition, for example [*] --> Pending. Use [*] as the destination to represent the end of the lifecycle.
Can a PlantUML state contain nested states?
Yes. Define a state with a block and place its internal states and transitions inside it to create a composite state.
Can I export the state diagram as PNG or SVG?
Yes. Preview the diagram, then download PNG for slides and quick sharing or SVG for scalable documentation and web use.
Do I need to install PlantUML, Java, or Graphviz?
No. The online tool uses a server-backed preview, so you can edit and render the diagram directly in the browser.
Need AI-Assisted Diagram Editing?
Open the full OnUML editor for AI generation, syntax repair, sharing, saved projects, and multi-format diagram workflows.