Mermaid for
State diagrams
Define how things move from one state to the next
Model the lifecycle of anything that changes state, such as an order, a user session, a support ticket, or a service.
What is a state diagram?
A state diagram shows the states a system can be in, the transitions between them, and the events or conditions that trigger each transition. It is based on the finite state machine from automata theory. The UML state machine diagram builds on David Harel’s statecharts (1987), which added nesting and concurrency.
State diagrams are useful anywhere behavior depends on the current state: a shopping cart, a support ticket, a deployment, or a login session. In Mermaid, you write them as text with stateDiagram-v2, using to mark the start and end. Mermaid supports composite (nested) states, choice points, forks and joins, concurrent regions, and notes.
What you can map
with a
state diagram
Order and transaction lifecycles
User session and authentication states
CI/CD pipeline stage transitions
Support ticket workflows
Feature flag states
UI component and interaction states
Device or service health states
Order and transaction lifecycles
User session and authentication states
CI/CD pipeline stage transitions
Support ticket workflows
Feature flag states
UI component and interaction states
Device or service health states
Who uses state diagrams
on Mermaid
Business Analysts
Document business process states, like contract status or approval workflows, in a format developers and stakeholders can both validate.
When a state diagram is
the right call
Less time syncing, more time building
One shared canvas for mapping ideas, collaborating live, and keeping teams on the same page, literally.
FAQ
Common questions about building state diagrams in Mermaid.
