All templates
Flowchart template
User signup flow
Signup with email verification and error paths.
Every product has a signup flow, and almost every team discovers — usually during an incident or a conversion review — that nobody has an accurate picture of it. This template gives you that picture in ten nodes: the form, validation with its retry loop, account creation, email verification, and the resend path where many real users quietly get stuck.
When to use this template
- Onboarding reviews — walk product, design, and engineering through what actually happens after "Create account", including the failure paths.
- Conversion debugging — every decision diamond in this diagram is a place users drop off. Annotate each branch with real numbers and the weakest step becomes obvious.
- Developer documentation — drop the diagram into your README or internal wiki so new engineers see the flow before they touch the auth code.
How to adapt it
Start by renaming the nodes to your real steps. Common extensions:
- Add a social login branch (Google/GitHub) parallel to the email path.
- Insert a CAPTCHA or fraud check between submission and account creation.
- Replace the dashboard redirect with your onboarding checklist to extend the diagram into activation territory.
Because the visual editor writes clean Mermaid, you can make these changes by dragging nodes around — no syntax required — and still get version-control friendly text out.
Mermaid code
Copy it anywhere Mermaid is supported — GitHub, Notion, or your docs.
flowchart TD
A[Visitor opens signup page] --> B[Submit email + password]
B --> C{Input valid?}
C -->|No| D[Show validation errors]
D --> B
C -->|Yes| E[Create account]
E --> F[Send verification email]
F --> G{Email verified?}
G -->|Yes| H[Redirect to dashboard]
G -->|No| I[Show resend option]
I --> F
Frequently asked questions
- What does a user signup flow diagram show?
- It maps every step a new user takes from opening the signup page to landing in the app: form submission, validation, account creation, email verification, and the loops users fall into when something fails. It makes hidden states — like the resend-verification loop — visible to the whole team.
- When should I use a flowchart instead of a sequence diagram for signup?
- Use a flowchart when you care about decisions and branches (valid input? email verified?). Use a sequence diagram when you care about which systems talk to each other in what order — for example documenting the API calls between your frontend, backend, and email provider.
- How do I customize this template for my own product?
- Open it in the editor and rename the nodes to match your steps — add social login, phone verification, or an onboarding checklist. Visual edits regenerate clean Mermaid code, so you can paste the result straight into your docs or README.
- Can I use this Mermaid code in GitHub or Notion?
- Yes. GitHub, GitLab, Notion, Obsidian, and most modern doc tools render Mermaid natively. Copy the code block on this page into a ```mermaid fence and it will render wherever Mermaid is supported.