User Onboarding Flowchart
The code
flowchart TD
A[Landing page] --> B{Has account?}
B -- Yes --> C[Log in]
B -- No --> D[Sign up]
D --> E[Verify email]
E --> F{Verified?}
F -- Yes --> G[Complete profile]
F -- No --> H[Resend link]
H --> E
C --> G
G --> I[Create first project]
I --> J((Activated))
How this template works
This template models the most common SaaS onboarding journey: a visitor arrives, either signs in or creates an account, verifies their email, completes a profile, and reaches the moment that matters — activation. It is a practical starting point for product managers who need to document the funnel, and for engineers who want a shared picture of where users can fall out of the process.
The syntax is worth studying line by line. The first line, flowchart TD, declares the diagram type and sets the direction to top-down. Rectangles such as A[Landing page] are process steps, and the text inside the square brackets becomes the label. The diamond shapes, written with curly braces like B{Has account?}, are decision points — exactly where a flowchart earns its keep. Edges carry optional labels with the double-dash syntax: B -- Yes --> C draws an arrow from B to C with the word “Yes” attached. The loop H --> E is what makes this a realistic flow rather than a happy-path sketch: when verification fails, the user is sent back to check their inbox again. Finally, J((Activated)) uses double parentheses, which renders a stadium-shaped node that visually marks the finish line.
Two gotchas trip people up when editing this template. First, if a label contains parentheses, brackets, or other shape characters, wrap the whole label in quotes — A["Sign up (free)"] — or the parser will misread where the node ends. Second, every node id must be unique; reusing E for a second step silently merges the two nodes into one, which is a confusing bug to debug on a small screen.
To adapt this flow, start by renaming the labels to match your real product steps, then delete any branches you do not have. If your onboarding has no email verification, remove nodes E, F, and H and connect D directly to G. Open this template in the editor to try your changes instantly — rendering happens locally in your browser, so you can iterate as fast as you can type.
Related templates you may find useful: the order fulfillment flowchart for e-commerce processes, the incident response flowchart for on-call runbooks, and the CI/CD pipeline flowchart for delivery workflows. For the full syntax reference, see the flowchart diagram guide.
Variations to try
- Replace the email verification loop with an SMS one-time passcode step for mobile-first products.
- Wrap steps D through H in a subgraph named "Account creation" to visually group the signup stage.
- Change the first line to `flowchart LR` for a horizontal layout that reads better on wide screens.
