Beauty Diagram
Diagram type

Mermaid state diagram editor

Model state machines with Mermaid syntax and export clear, presentation-ready transitions for workflows, checkout flows, and feature logic.

Use this page to connect a high-intent search query to the right problem-solution narrative.

At a glance

A Mermaid state diagram page for teams modeling finite-state behaviour of a feature or user journey.

What Mermaid state diagrams captureWhen a state diagram is the right fitPairs well with
Rendered proof
State diagram for a simple order lifecycle.
Theme · Brutalist
Open this diagram in editor
submit pay cancel ship START DRAFT SUBMITTED PAID CANCELLED FULFILLED END
View Mermaid sourcePlain-text diagram syntax — copy or edit directly.
diagram.mmd
1stateDiagram-v2
2  [*] --> Draft
3  Draft --> Submitted: submit
4  Submitted --> Paid: pay
5  Submitted --> Cancelled: cancel
6  Paid --> Fulfilled: ship
7  Fulfilled --> [*]
8  Cancelled --> [*]

What Mermaid state diagrams capture

State diagrams show how a single entity moves between states in response to events. They work well for order flows, feature toggles, and UI modes.

  • Start and end states
  • Events that trigger transitions
  • Composite (nested) states

When a state diagram is the right fit

Use a state diagram when the important question is 'what can this entity do next, given where it is?' — not the call order between services.

Pairs well with

State diagrams pair naturally with sequence diagrams. Use state to describe possible modes, and sequence to describe how a single happy path walks through those modes.

FAQ

Mermaid state diagram editor — frequently asked questions

When should I pick a state diagram over a flowchart?

Pick a state diagram when the important question is 'what can this entity do next, given where it is?'. Flowcharts answer 'what are the steps?' — state diagrams answer 'what are the modes?'.

How do I show the start and end of a flow?

Use `[*] --> Draft` to show the initial state and `Finished --> [*]` to terminate. These markers stay visible after beautifying.

Can I model nested states in Mermaid?

Yes. `state Composite { A --> B }` describes composite states, and the editor preserves the nesting so the hierarchy remains readable.