A state diagram shows the different states something can be in and the events or conditions that cause it to move from one state to another. A filled circle marks the starting point; arrows show the transitions; labels on arrows describe what triggers the change.

State diagrams are useful wherever something has a clear lifecycle — a blog post moving from draft to published, a parcel moving from ordered to delivered, a booking moving from pending to confirmed.

stateDiagram-v2
    [*] --> Draft

    Draft --> UnderReview : Submit for
 review
    UnderReview --> Draft : Changes
 requested
    UnderReview --> Scheduled : Approved

    Scheduled --> Published : Publish date reached
    Published --> Archived : Retired

    Archived --> Draft : Revived for update
    Published --> [*]

The diagram makes it immediately clear which transitions are possible and which are not — for example, a post cannot jump from 'Draft' straight to 'Published' without passing through review first.

```mermaid
stateDiagram-v2
    [*] --> Draft

    Draft --> UnderReview : Submit for<br/> review
    UnderReview --> Draft : Changes<br/> requested
    UnderReview --> Scheduled : Approved

    Scheduled --> Published : Publish date reached
    Published --> Archived : Retired

    Archived --> Draft : Revived for update
    Published --> [*]
```

For more state diagram syntax see the state diagram documentation at mermaid.js.org