User Sign-up Flowchart with Email and Social Login

Mermaid code

flowchart TD
    A[Visitor clicks Sign up] --> B{Email or social?}
    B -- Email --> C[Enter email and password]
    C --> D[Send verification email]
    D --> E{Link clicked within 24h?}
    E -- No --> F[Resend or expire]
    F --> D
    E -- Yes --> G[Email verified]
    B -- Social --> H[Redirect to provider]
    H --> I{Consent granted?}
    I -- No --> A
    I -- Yes --> G
    G --> J[Set up profile]
    J --> K[Land on dashboard]

Paste this into any tool that renders Mermaid, or into the editor to change the theme and export PNG or SVG. Syntax reference: Flowchart guide.

What this diagram shows

The first diamond, Email or social?, splits the flow into two branches that rejoin at Email verified. The email branch contains a loop: an unclicked link goes to Resend or expire and back to Send verification email. The social branch handles denied consent by returning the visitor to the start rather than to an error screen, which is the behavior most identity providers expect.

How to adapt it

• Add a Captcha passed? diamond before Send verification email if bot sign-ups are a problem.
• Insert Choose workspace between Set up profile and Land on dashboard for multi-tenant products.
• Replace 24h with your real link expiry and add a Too many resends exit from Resend or expire.
• Wrap the email branch in a subgraph labeled Email path if the diagram is going into a design review alongside screen mockups.

FAQ