Sign-up Flow Diagram — User Registration Example

Q: How do I diagram my own registration flow?

Start at the form and chain what your backend does: User -> Web App -> Auth Service -> "Users DB": check & insert.

Diagram source. Edit it live in the browser

title User Registration Flow

type actor User
type database "Users DB"

User -> Web App: fill signup form
Web App -> Auth Service: POST /register
Auth Service -> "Users DB": check email exists
"Users DB" -> Auth Service: email available
Auth Service -> "Users DB": insert new user
Auth Service -> Email Service: send verification email
Email Service -> User: verification link
Auth Service -> Web App: 201 Created
Web App -> User: check your email

What this diagram shows

See the gap between 'check email exists' and 'insert new user'? Two signups landing in that gap at the same moment is the classic duplicate-account bug. On a diagram the gap is two arrows wide and hard to miss. In code it's an easy Tuesday-afternoon oversight.

The verification email gets its own service box on purpose. It fails independently, and it's where signups quietly go to die.

Step-by-step flow breakdown

User fills the formThe user submits email, password, and any required profile fields.

Client-side validationThe web app checks the form before sending it, then calls POST /register.

Duplicate checkThe auth service checks whether the email is already registered.

Email availableIf no existing account is found, registration proceeds.

User createdA new user record is inserted into the database.

Verification email sentThe email service sends a verification link to the new user.

Confirmation shownThe web app tells the user their account was created and to check their inbox.

When to use this flow diagram

Hunting duplicate-account bugs. The race is visible right here.
Onboarding funnels. A slow email provider shows up as drop-off, and this shows why.
Compliance write-ups about what happens to a new user's data.
Explaining signup to a new teammate in thirty seconds.

Common variations

Add password hashing explicitly

Add Auth Service -> Auth Service: hash password before the insert, if you want it on the record.

Social sign-up

Branch to a provider: User -> Web App -> OAuth Provider: sign up with Google. The OAuth example covers the rest.

Require email verification before login

Add User -> Auth Service: click verification link, then Auth Service -> "Users DB": mark email verified.

Related flow diagram examples

Frequently asked questions

What does a sign-up flow diagram show?

Each step a new account goes through: validation, the duplicate check, the database insert, the verification email.

How do I diagram my own registration flow?

Start at the form and chain what your backend does: User -> Web App -> Auth Service -> "Users DB": check & insert.

Can I use this for free?

Yes. Adjust the steps to your own signup and export it. No account needed.

User Registration / Sign-up Flow