Events and transitions
Label transitions with the command, event, or condition that moves the subject between states.
Lifecycle and transition modeling
Mermaid State Diagram Online Editor
Create a Mermaid state diagram online to describe lifecycle states, transitions, event or condition labels, choices, and terminal outcomes. Preview and export SVG or PNG.
Build a Mermaid state diagram online
Edit an order lifecycle with events, a choice, and terminal outcomes while checking that every transition remains understandable.
Build a Mermaid state diagram online
Changes render automatically in the preview.
state-diagram.mmd9 lines
Live previewWaiting
Make lifecycle rules visible before implementation
State diagrams show what can happen next, which event causes a transition, and where an object or workflow can begin and end.
Choices and terminal states
Represent labeled conditional outcomes, branching decisions, and explicit entry or completion points.
Live Mermaid preview
See the rendered result update as you edit and keep syntax feedback beside the source.
No local setup
Work in a modern browser without installing Mermaid CLI, a desktop app, or an editor extension.
Continue in OnUML
Move the current source into the full editor for AI generation, repair, sharing, and saved projects.
How to create a Mermaid state diagram
Define stable states first, then add only valid transitions and label the events or conditions that cause them.
- 01
Choose one subject whose lifecycle the diagram will explain.
- 02
List stable states rather than temporary implementation actions.
- 03
Add transitions and label them with meaningful events, commands, or condition text.
- 04
Mark initial, terminal, choice, and composite states where they change the lifecycle meaning.
- 05
Look for unreachable states and missing recovery paths before exporting.
Mermaid state diagram syntax and lifecycle design
A useful state diagram distinguishes durable states from actions and makes invalid or missing transitions visible during design review.
Model stable conditions as states
A state should describe a condition that remains true until an event occurs. Put actions and commands on transitions instead of turning each action into a state.
Name transition triggers
Labels such as submit, approve, timeout, or cancel explain why the lifecycle moves and expose missing business rules.
Use choices for conditional outcomes
A choice node can show different next states with readable condition labels. Mermaid displays these labels but does not execute or validate the conditions.
State diagram vs flowchart
Use a state diagram for the lifecycle of one subject. Use a flowchart for steps, decisions, and work moving through a process.
Mermaid state diagram example
The example follows a draft through submission and review, then branches to approval or revision after rejection.
stateDiagram-v2
[*] --> Draft
Draft --> Submitted : submit
Submitted --> Review
state Review <<choice>>
Review --> Approved : valid
Review --> Rejected : invalid
Approved --> [*]
Rejected --> Draft : reviseCompare state modeling
Mermaid vs PlantUML state diagrams
Compare syntax, nested states, lifecycle notation, and the modeling depth available in each text-based diagram tool.
Read the state diagram comparison →Related Mermaid tools
Continue with the general editor, browse this release’s tool directory, or compare the diagram with a related modeling view.
Mermaid Online Editor
Write Mermaid source, preview the result, and export SVG or PNG.
Open tool →Mermaid Sequence Diagram Online Editor
Document messages between users, services, APIs, and databases over time.
Open tool →Mermaid ER Diagram Online Editor
Model database entities, attributes, keys, and cardinality with Mermaid ER syntax.
Open tool →Frequently asked questions
What is a Mermaid state diagram online editor?
It is a browser tool for writing stateDiagram-v2 syntax, previewing lifecycle transitions, and exporting the result as SVG or PNG.
How do I show the initial state?
Use [*] as the source of a transition into the first state. Use [*] as a target to represent a terminal outcome.
Can I label state transitions?
Yes. Add a colon after the target state and write an event, command, or condition as display text. Mermaid does not execute or validate that label.
Can Mermaid show decision points?
Yes. Declare a state with the <<choice>> stereotype and connect it to outcomes labeled with the relevant conditions.
Can I export a state diagram as SVG or PNG?
Yes. Validate the live preview, then download SVG for scalable use or PNG for common image workflows.
What is the difference between a state diagram and a flowchart?
A state diagram explains valid lifecycle transitions for one subject. A flowchart explains steps and decisions in a process.