User authentication flow (with MFA)

A user authentication flow (login flow) is a flowchart of how a person signs in: open the login page, validate credentials, optionally complete multi-factor authentication (MFA), create a session, and land on the dashboard. Retry loops for invalid credentials or an invalid code are part of the real path, not an edge case — most sign-in attempts that fail, fail there.

People draw this one while designing a sign-in system, while documenting how an existing one already behaves, or to walk a security review through the happy path and the retry paths side by side. The retry loops are usually why the diagram exists at all: prose describes a linear sequence well and describes a loop badly, so the moment a flow doubles back on itself a drawing starts earning its keep.

User authentication flow User Login Page ValidCredenti-als? MFAEnabled? Create Session Enter MFA Code CodeValid? Dashboard No Yes Yes No Yes No
Open in editor

Mermaid source

---
title: User authentication flow
---
graph LR
    User[User] --> Login[Login Page]
    Login --> Creds{Valid Credentials?}
    Creds -->|No| Login
    Creds -->|Yes| MFA{MFA Enabled?}
    MFA -->|No| Session[Create Session]
    MFA -->|Yes| Code[Enter MFA Code]
    Code --> Verify{Code Valid?}
    Verify -->|No| Code
    Verify -->|Yes| Session
    Session --> Dashboard[Dashboard]

Stock Mermaid vs Line9 for authentication flow

Run the same source through the stock Mermaid engine and it often will not look as good. In some cases, Mermaid is able to deliver a usable graph, but not always. On this one:

The same authentication flow through stock Mermaid — one shallow band nearly six times wider than it is tall, with the MFA bypass label stranded over empty canvas
Stock Mermaid · same source View full size ↗

Stock Mermaid returns this graph as a single shallow band 6 times wider than it is tall – an awkward aspect ratio. Since nodes are positioned in a line, the “No” edge from ‘MFA Enabled?’ has to follow a long path to reach ‘Create Session’. Most of the edges into and out of decision diamond don’t attach at shape vertices. Line9 lays out the same source at 1.9:1 across two bands, and the node arrangement enables short edges and better clarity.

For a fuller product comparison — layout, export, CLI, and pricing — see Line9 vs mermaid.live.

Render your own

Paste any Mermaid flowchart into the free online editor — no account needed. Prefer the terminal? Install the line9 CLI (free for personal use).

More scenarios on the Mermaid examples hub.