Mermaid State Diagrams Templates
Mermaid state diagram templates for order lifecycles, form states, and connection handling.
3 templates · Click "Use in Editor" to open any template and customize it instantly. No sign-up required.
Order Lifecycle
E-commerce order state machine from draft through delivery or return.
stateDiagram-v2
[*] --> Draft
Draft --> Submitted : Place order
Submitted --> Processing : Payment confirmed
Submitted --> Cancelled : Cancel
Processing --> Shipped : Ship items
Shipped --> Delivered : Confirm delivery
Delivered --> [*]
Shipped --> Returned : Return request
Returned --> [*]
Cancelled --> [*]UI Form States
Form state machine: pristine → dirty → validating → submit → success/error.
stateDiagram-v2
[*] --> Pristine
Pristine --> Dirty : User types
Dirty --> Validating : Blur / Submit
Validating --> Valid : All rules pass
Validating --> Invalid : Validation error
Invalid --> Dirty : User edits
Valid --> Submitting : Submit
Submitting --> Success : 200 OK
Submitting --> Error : Request failed
Error --> Dirty : Edit & retry
Success --> [*]Connection States
WebSocket/network connection state machine with nested idle/sending/receiving.
stateDiagram-v2
[*] --> Disconnected
Disconnected --> Connecting : connect()
Connecting --> Connected : Success
Connecting --> Disconnected : Timeout
Connected --> Disconnected : Connection lost
state Connected {
[*] --> Idle
Idle --> Sending : send()
Sending --> Idle : Ack received
Idle --> Receiving : Data incoming
Receiving --> Idle : Complete
}