State Diagram

Free Online State Diagram Maker

Model state machines, lifecycle flows, and system behavior with Mermaid state diagrams.

Try it live 

stateDiagram-v2
    [*] --> Draft

    Draft --> InReview : submit
    InReview --> Draft : request_changes
    InReview --> Approved : approve
    InReview --> Rejected : reject

    Approved --> Published : publish
    Published --> Archived : archive

    Rejected --> Draft : revise
    Archived --> [*]

    state InReview {
        [*] --> WaitingForReviewer
        WaitingForReviewer --> UnderReview : reviewer_assigned
        UnderReview --> [*]
    }

When to use state diagram

UI/UX flows

Model component states like loading, error, success, and empty in your frontend.

Order management

Visualize e-commerce order lifecycle from placed to delivered to refunded.

Auth workflows

Map authentication states: unauthenticated, authenticating, authenticated, expired.

Key syntax

stateDiagram-v2Declare diagram type (use v2)
[*] --> StateInitial transition from start
State --> [*]Final transition to end
A --> B : eventTransition with event label
state Name { }Composite / nested state
note right of SAdd a note to a state

How to create a state diagram with Mermaid

1

Open FlowViz and type stateDiagram-v2.

2

Define the initial state with [*] --> StateName.

3

Add states by simply using them in transitions: StateA --> StateB : event.

4

Label transitions with the event that causes them after the colon.

5

Define terminal states with StateName --> [*].

6

Create composite states with state CompositeName { ... } for nested flows.

7

Export your diagram as SVG.

Start diagramming now

No signup. No install. Just open the editor and start writing.