User Onboarding Flow — Reladraw template

注册转化流程. Copy the source, paste into the official playground, done. No coordinates — every position is stated relative to something else.

Preview

Landing Sign up Verify email Upgrade Drop-off 18%

Source (.reladraw)

node land "Landing"
node signup "Sign up"  below land
node verify "Verify email"  below signup
node pay "Upgrade"  below verify
node drop "Drop-off"  right of verify
edge land -> signup
edge signup -> verify
edge verify -> pay
edge verify -> drop  "18%"

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 user-flow.reladraw -o out.svg

When to use this template

An onboarding funnel with the drop-off made visible: landing → signup → email verify → upgrade, plus an explicit exit. Use it in growth reviews and product docs — drawing the leak as a node makes the metric discussion concrete.

How to customize

  1. Split the funnel by platform. Duplicate the signup step: node signup-ios "Sign up (iOS)" right of signup and route landing edges to both.
  2. Add a re-engagement loop. Add node email "Win-back email" below drop and a return edge edge email -> pay from: bottom.
  3. Show percentages on every step. Add labels: edge signup -> verify "82%" — funnel reviews live on these numbers.

FAQ

How do I make a user flow diagram?

Each screen or state is a node; each user action is an edge with the action or rate as its label. Place steps in the order users hit them — this onboarding template is a complete paste-ready example.

How do I show where users drop off?

Draw a node for the exit state and give the edge a percentage label, like the Drop-off node in this template. Making the leak a real box forces the metric into every conversation.

Can Reladraw do decision branches, like A/B tests?

Yes — two edges out of one node, each labeled with the branch. Place both targets explicitly (one below-left, one below-right) so the branch reads clearly.

Related templates

Event-Driven ArchitectureCDN Edge ArchitectureDatabase Replication