🔄 Mermaid

State diagram

Capture every state and transition of a system

Open this example in the editor Generate one with AI

What is a State diagram?

A state diagram shows the states an object can be in and the events that move it between them: order lifecycles, document workflows, UI states, connection handling. Essential whenever “what state are we in?” matters.

Live example

Mermaid code

stateDiagram-v2
    [*] --> Draft
    Draft --> Review : submit
    Review --> Draft : request changes
    Review --> Approved : approve
    Approved --> Published : publish
    Published --> Archived : archive
    Archived --> [*]

Live example

When to use it

Model order, ticket or document lifecycles

Design UI component and connection states

Specify business rules around status transitions

Basic syntax

.mmd

stateDiagram-v2
    [*] --> Idle
    Idle --> Active : start
    Active --> [*] : stop

Questions about this diagram

What is the difference with a flowchart?

A flowchart follows a process from start to finish. A state diagram describes all possible states of one thing and which events cause transitions — including cycles and error states.

Does Mermaid support nested states?

Yes — stateDiagram-v2 supports composite (nested) states, forks, joins, choices and notes for realistic state machines.

Explore other diagram types

🔀 Flowchart 💬 Sequence diagram 🧩 Class diagram 🗄️ Entity-relationship diagram 📅 Gantt chart 🥧 Pie chart 🧠 Mind map 🌿 Git graph 🕰️ Timeline 🚶 User journey 🎯 Quadrant chart

Create your State diagram now

Describe it in plain language — the AI writes the Mermaid code for you.

Open Mermaid Studio