Login and auth flow template: free, editable diagram
Credentials, MFA, session, and lockout paths. This starter has 12 steps and 3 decision points. Open it as a real canvas with shapes and arrows you can restyle, extend and share, then turn the action steps into tasks.
Free. No account needed. Saved in this browser until you sign up.
What is in this template
12 steps, 3 of them decisions, in diagram order. Rename, remove or add branches once it is on your canvas.
- 1User opens sign-in
- 2Enter email and password
- 3Verify credentials
- 4Credentials valid?
- 5Request MFA code
- 6Too many attempts?
- 7Show error and let the user retry
- 8Lock account and email user
- 9Code correct?
- 10Issue session and refresh token
- 11Show error and allow another code
- 12Land in the app
Get the Mermaid source
Mermaid source
flowchart TD
start([icon:user User opens sign-in]) ==> form[icon:mail Enter email and password]
form ==> verify[icon:key Verify credentials]
verify ==> valid{Credentials valid?}
valid ==>|yes| mfa[icon:fingerprint Request MFA code]
valid -->|no| attempts{Too many attempts?}
attempts -->|no| retry([icon:alert-circle Show error and let the user retry])
attempts -->|yes| lock[icon:lock Lock account and email user]
mfa ==> code{Code correct?}
code ==>|yes| session[icon:shield-check Issue session and refresh token]
code -->|no| badcode([icon:alert-circle Show error and allow another code])
session ==> app([icon:layout-dashboard Land in the app])
classDef tone-accent fill:#fae8ff
class start,app tone-accent
classDef tone-info fill:#dbeafe
class form,verify,mfa,session tone-info
classDef tone-warning fill:#fef3c7
class valid,attempts,code tone-warning
classDef tone-neutral fill:#e5e7eb
class retry,badcode tone-neutral
classDef tone-danger fill:#fee2e2
class lock tone-dangerPaste it into the free Mermaid editor or your own docs.
Questions
- What is the login and auth flow template?
- Credentials, MFA, session, and lockout paths. It is a starting diagram you adapt to your own process.
- Can I edit it?
- Yes. It opens as normal shapes and bound arrows: rename steps, add branches, restyle, and collaborate live once you have an account.
- Do I need an account?
- No. You can open it in a guest canvas saved in your browser. Create an account to keep it and share it.