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
Warningsubstate beforeLockedif the UI shows a countdown. - Add a
Suspendedstate reachable fromActivewith the labeladmin actionif operators can revoke sessions. - Remove the
Lockedsubstate for consumer apps that never ask for the password again mid-session. - Add a second note on
Authenticatinglisting 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.