Sketching States and Flows
Programs aren't static — they move through different states as users interact with them. Understanding these states and the flows between them helps you build more robust software and anticipate problems before they occur.
What Is State?
State is the current condition of your program at any moment. A login form might be in states like: "empty," "filled," "submitting," "success," or "error." A file download might be: "not started," "downloading," "complete," or "failed."
Identifying states helps you think through what your program needs to handle. Each state might require different behavior, different displays, or different error handling.
What Is Flow?
Flow is the path users take through your application — the sequence of states from start to finish. The "happy path" is when everything works perfectly. But real users encounter errors, change their minds, and do unexpected things.
Mapping flows helps you anticipate these scenarios before you start coding.
A Simple Flow Example
Consider a stock price fetcher:
Stock Fetcher Flow:
1. Start → Waiting for input
2. User enters symbol → Validating input
3. Input valid?
- No → Show error, return to step 1
- Yes → Calling API
4. API responds?
- Error → Show error message, offer retry
- Success → Parsing response
5. Parse successful?
- Error → Show error message
- Success → Display result
6. Done → Waiting for next input or exit
This flow reveals decisions you need to make: What happens on invalid input? How do you handle network errors? Can users retry?
Happy Path vs Error Paths
The happy path is the ideal scenario where everything works. But robust software handles the unhappy paths too:
- Invalid user input
- Network failures
- Unexpected API responses
- Missing data
- Timeouts
When sketching flows, deliberately think about what could go wrong at each step. This isn't pessimism — it's preparation.
Using AI to Map States
AI can help you think through states and flows:
"What are the possible states for a file upload feature?"
"Help me map the user flow for a login system, including error cases"
"What edge cases should I consider for a form that accepts user input?"
The AI will suggest states and transitions you might have missed, making your mental model more complete.
Flows Become Code Structure
Once you've mapped your flows, they naturally guide your code structure. Each state might become a function. Each transition might become a conditional check. The flow diagram becomes a blueprint for implementation.
This planning work feels slow, but it makes coding faster. You're not figuring out the logic while writing code — you've already figured it out.