State Machine — Reladraw template

订单状态机. Copy the source, paste into the official playground, done. No coordinates — every position is stated relative to something else.

Preview

NEW PAID SHIPPED DONE CANCELLED

Source (.reladraw)

node new "NEW"
node paid "PAID"  below new
node shipped "SHIPPED"  below paid
node done "DONE"  below shipped
node cancel "CANCELLED"  right of paid
edge new -> paid
edge paid -> shipped
edge shipped -> done
edge new -> cancel
edge paid -> cancel

How to use

  1. Open the Reladraw playground
  2. Paste the source above — the diagram re-solves live
  3. Export SVG from the playground, or render locally: npx reladraw state-machine.reladraw -o out.svg

When to use this template

An order state machine: NEW → PAID → SHIPPED → DONE, with CANCELLED reachable from both NEW and PAID. Use it to pin down lifecycle rules before coding them, and to debug the famous question: which states allow cancellation?

How to customize

  1. Add a refund state. Add node refund "REFUNDED" below cancel and edge cancel -> refund.
  2. Guard a transition. Label the edge: edge shipped -> done "on delivery confirmation".
  3. Add a stuck-state timer. Label: edge new -> cancel "after 24h silent" — guard conditions belong in labels.

FAQ

How do I draw a state machine in Reladraw?

States are nodes, transitions are directed edges with their event or guard as the label. Place the initial state at top and the terminal states at the bottom — this order template follows exactly that convention.

How do I show the initial and final states?

Convention: the first-declared node (nothing above it) is the start; label terminal states in caps or add a filled node labeled END. A small legend line in the diagram title removes any ambiguity.

How do I handle transitions that many states share?

Draw the shared edge from each state — repetition is honest. If three or more states share one exit, consider whether it is really a common error state and draw that state once.

Related templates

Zero Trust AccessK8s NetworkingOAuth 2.0 Flow