← All diagram types

MERMAID DIAGRAM GUIDE

Mermaid state diagram online editor

Show how an object or workflow changes state in response to events. Create the diagram in Mermaid Studio, preview it instantly, and export it when it is ready to share.

Open the State editor See an example

WHAT IT IS FOR

Make the important relationships clear

Make lifecycle states and the events that move an object between them visible to product, design, and engineering teams.

Design order and payment lifecycles
Document document or account states
Review workflow edge cases

Why use Mermaid Studio?

Write the source as versionable Mermaid code.
Preview changes immediately in the browser.
Export the finished diagram as SVG or PNG.
Start from a related template when you need a head start.

MERMAID EXAMPLE

Start with a working example

Copy the structure, replace the labels with your own domain, and continue in the full editor.

stateDiagram-v2
  [*] --> Draft
  Draft --> Saved: Saved
  Saved --> Shared: Public
  Shared --> Saved: Private
  Saved --> Archived: Archived
  Archived --> [*]

HOW TO START

Create your diagram in four steps

1Define the initial and final states.
2Name each meaningful state clearly.
3Add events that trigger transitions.
4Check invalid, retry, and recovery paths explicitly.

WRITING TIPS

Keep the diagram useful

Use [*] for lifecycle start and end.

Name transition events after the colon.

FAQ

Frequently asked questions

What is a state diagram best for?+

State diagrams are best for objects or workflows whose behavior changes depending on their current state and incoming events.

Can a Mermaid state diagram include transition labels?+

Yes. Add labels to transitions to document the event or condition that causes a state change.

TEMPLATES

Start from a related template

Document lifecycle

Track a document from draft through review, publication, and archive.

Order state machine

Show the states and transitions of an order lifecycle.

RELATED DIAGRAMS

Explore another Mermaid diagram

Mermaid flowchart

Visualize processes, decisions, and system flows with connected nodes.

Mermaid sequence diagram

Map requests, responses, and asynchronous events between services.

Mermaid class diagram

Design domain objects, properties, methods, inheritance, and relationships.

Mermaid ER diagram

Document database entities, fields, relationships, and cardinality.

Mermaid mindmap

Organize ideas and subtopics hierarchically around a central theme.

Mermaid Gantt chart

Plan projects with tasks, milestones, dependencies, and dates.

Ready to make a State?

Open the editor with a working example and adapt it to your project.

Start in Mermaid Studio