Mermaid exampleState Diagram

User Session Lifecycle State Diagram with Idle and Expiry

Session handling is a state machine whether or not you draw it as one. Teams that skip the diagram end up with an isLoggedIn boolean and a dozen special cases around it. This state diagram names every state a session can be in and every event that moves it.

  • session state diagram
  • login state machine
  • mermaid stateDiagram-v2 example
  • composite state mermaid
User Session Lifecycle State Diagram with Idle and Expiry

submit credentials

invalid credentials

refresh token valid

refresh token revoked

token issued

token lifetime reached

user logs out

Anonymous

Authenticating

Active

no activity 15 min

user input

no activity 30 min

re-enter password

Working

Idle

Locked

Expired

LoggedOut

Server rejects requests with 401
until the client refreshes or re-authenticates.

Open in editor → 21 linesrenders in GitHub, Notion, Obsidian

Mermaid code

stateDiagram-v2
    [*] --> Anonymous
    Anonymous --> Authenticating : submit credentials
    Authenticating --> Anonymous : invalid credentials
    Authenticating --> Active : token issued
    state Active {
        [*] --> Working
        Working --> Idle : no activity 15 min
        Idle --> Working : user input
        Idle --> Locked : no activity 30 min
        Locked --> Working : re-enter password
    }
    Active --> Expired : token lifetime reached
    Active --> LoggedOut : user logs out
    Expired --> Authenticating : refresh token valid
    Expired --> Anonymous : refresh token revoked
    LoggedOut --> [*]
    note right of Expired
        Server rejects requests with 401
        until the client refreshes or re-authenticates.
    end note

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

What this diagram shows

From the start marker the session is Anonymous. Submitting credentials moves it to Authenticating, which either returns to Anonymous or proceeds to Active. Active is a composite state with its own substates: Working, Idle after 15 minutes without input, and Locked after 30 minutes, which needs the password again. Any substate can leave Active when the token lifetime is reached (Expired) or when the user logs out (LoggedOut). From Expired, a valid refresh token goes back through Authenticating; a revoked one drops to Anonymous. The note on Expired records what the server does meanwhile.

Composite states are the feature that makes this a state diagram rather than a flowchart: the three idle-related substates share the two exit transitions without repeating them.

How to adapt it

  • Change the two timeouts in the transition labels to your values and add a Warning substate before Locked if the UI shows a countdown.
  • Add a Suspended state reachable from Active with the label admin action if operators can revoke sessions.
  • Remove the Locked substate for consumer apps that never ask for the password again mid-session.
  • Add a second note on Authenticating listing the factors checked (password, TOTP) if you support two-factor login.

FAQ

How do transitions out of a composite state work?

An edge from the composite state itself (Active --> Expired) applies from any substate inside it. That is why Working, Idle, and Locked do not each need their own Expired edge.

Can I add a note to a state?

Yes: note right of StateName (or left of) followed by lines of text and end note. Notes are good for recording what the system does while in that state.