What are alt, opt and loop?

alt … else … end is an either/or branch, opt … end is an optional fragment and loop … end repeats. They can be nested; indentation is only for readability.

Can message text contain a colon?

Everything after the first colon is the message text, so "401 Unauthorized" and similar are fine. Avoid semicolons inside the text.

Can numbering start from a value other than 1?

autonumber 10 starts at 10; autonumber 10 5 starts at 10 and increments by 5.

User Login Authentication Sequence Diagram Template

Login sequence diagram with user, web app, auth service and database: submit credentials, look up the user, verify the password, return a token or 401, with alt branches and a note. For API docs and system design; free PNG, Word and PowerPoint export.

Previewed in the “Indigo” theme; you can switch themes in the editor

Open in the editorFree · No sign-up · No watermark

Edit the text, pick a theme, export Word / PowerPoint / PDF

When to use it

API design documents, detailed design specs and the login section of a project report. autonumber numbers every message so the text can refer to "step 3"; alt / else shows the correct-password and wrong-password branches.

Making it yours

For SMS or email code login, replace "Enter username and password" with "Enter phone number" and add a "verify code" exchange between the auth service and the database.
Add social login by declaring participant T as Identity provider and inserting the redirect and callback messages.
Solid arrows ->> are requests, dashed arrows -->> are responses; delete autonumber if you do not want numbers.
Participant names live in participant X as Name; message text is everything after the colon.

Mermaid code

sequenceDiagram
    autonumber
    participant U as User
    participant W as Web app
    participant S as Auth service
    participant D as Database
    U->>W: Enter username and password
    W->>S: POST /login
    S->>D: Look up user
    D-->>S: Return password hash
    alt Password correct
        S-->>W: Return token
        W-->>U: Signed in, go to home
    else Password wrong
        S-->>W: 401 Unauthorized
        W-->>U: Show "wrong username or password"
    end
    Note over W,S: Every later request carries the token in a header

Ask an AI for one with this structure

Send the prompt below to ChatGPT or Claude, then paste the whole reply into the editor; the code inside is detected automatically.

Draw a user login sequence diagram in Mermaid sequenceDiagram syntax with participants User, Web app, Auth service and Database. The user enters credentials, the web app calls the login endpoint, the auth service looks up the user in the database and verifies the password hash; on success it returns a token and the app goes to the home screen, on failure it returns 401 and shows an error. Use alt/else for the two branches and enable autonumber. Output only the mermaid code block.

FAQ

What are alt, opt and loop?: alt … else … end is an either/or branch, opt … end is an optional fragment and loop … end repeats. They can be nested; indentation is only for readability.
Can message text contain a colon?: Everything after the first colon is the message text, so "401 Unauthorized" and similar are fine. Avoid semicolons inside the text.
Can numbering start from a value other than 1?: autonumber 10 starts at 10; autonumber 10 5 starts at 10 and increments by 5.

More in this category

All templates

Updated 2026-09-05