We Map Every New Product's User Flow Before Writing a Line of Code

The Problem

User flows are the most skipped step in product development.

Everyone agrees you should map the user journey before building. Almost nobody does it. Why? Because the flow mapping process itself is friction:

1. Book a meeting with 3 people (PM, designer, developer)
2. Open Miro or FigJam
3. Spend 30 minutes debating what the first screen should be
4. Spend 45 minutes dragging boxes and connecting arrows
5. Realize you forgot the error states
6. Add those. Rearrange everything because now it doesn't fit
7. Export a screenshot that's outdated by next week

Total: 2 hours, 3 people, 6 person-hours. For a diagram that'll be wrong by Wednesday.

At Artificial-Lab (our venture studio), we run 7-day product sprints. Day 1 is research and mapping. We can't afford 6 person-hours on a Miro session. But we also can't afford to skip flow mapping — products built without user flows have 3x more rework in the build phase.

The Solution

The create-workflow-diagram skill turns plain-text journey descriptions into visual flow diagrams. Describe the user's path — including branches, decisions, and error states — and get back a PNG diagram plus a markdown spec that developers can build from.

90 seconds. One person. Complete flow.

The Process (with code/config snippets)

Here's a real example from a recent sprint — an onboarding flow for a SaaS analytics tool:

Create a user flow diagram:

Title: New User Onboarding — Analytics Dashboard

Flow:
1. Landing Page → Click "Start Free Trial"
2. Sign Up Form (email + password)
   - Error: Invalid email → Show validation, stay on form
   - Error: Password too weak → Show requirements
   - Success → Email verification
3. Email Verification
   - Click link in email → Verified
   - No click after 5 min → Resend prompt
   - Error: Link expired → Generate new link
4. Profile Setup (name, company, role)
   - Skip option → Go to workspace with defaults
   - Complete → Workspace setup
5. Workspace Setup (connect data source)
   - Option A: Connect Google Analytics → OAuth flow
   - Option B: Upload CSV → File parser
   - Option C: Skip → Sample data loaded
6. Dashboard → First insight shown
   - If sample data: show "Connect real data" banner
   - If real data: show "Your first insight" highlight
7. Onboarding Complete → Dismiss checklist

Color coding:
- Green: Happy path
- Red: Error states
- Yellow: Decision points
- Blue: Actions
- Gray: Skip paths

The agent generates both outputs:

PNG Diagram: A clean, color-coded flow with:

• Rounded rectangles for screens/states
• Diamonds for decision points
• Red-bordered boxes for error states
• Arrows with labels showing the trigger/condition
• Color legend in the corner

Markdown spec for developers:

## Onboarding Flow — Technical Spec

### Screen 1: Sign Up
- **Route:** `/signup`
- **Fields:** email (required, validated), password (required, min 8 chars)
- **Actions:**
  - Submit → POST /api/auth/signup
  - Success → redirect /verify-email
  - 400 (invalid email) → inline error "Please enter a valid email"
  - 400 (weak password) → inline error with requirements list
  - 409 (email exists) → inline error "Account exists. Log in?"

### Screen 2: Email Verification
- **Route:** `/verify-email`
- **Trigger:** Check email_verified field via polling (5s interval)
- **Actions:**
  - Verified → redirect /setup/profile
  - After 60s → show "Didn't get it? Resend" button
  - Resend → POST /api/auth/resend-verification
  - Link clicked but expired → show "Link expired" + auto-resend

### Screen 3: Profile Setup
- **Route:** `/setup/profile`
- **Fields:** name (required), company (optional), role (select)
- **Actions:**
  - Submit → PUT /api/user/profile → redirect /setup/workspace
  - Skip → PUT /api/user/profile {defaults: true} → redirect /setup/workspace

The developer gets a diagram for understanding the overall flow AND a spec for building each screen. Both from the same plain-text input.

The Results

In our 7-day sprint framework, Day 1 includes flow mapping for every new feature. Before this agent, Day 1 was mostly meetings. Now it's mostly building. The flow diagrams are ready before the standup ends.

The biggest impact is on error states. When you map flows in a meeting, people think about the happy path. Error states get "we'll handle those later" treatment — which means they get handled in production by confused users. When the agent generates a flow, it includes every branch you described. You're forced to think about errors upfront because the input format demands it.

Try It Yourself

Describe any user journey in plain text. Be explicit about:

• Each step/screen
• Decision points (what choices does the user have?)
• Error states (what can go wrong at each step?)
• Skip paths (what can the user bypass?)

The agent gives you a PNG diagram for stakeholder communication and a markdown spec for developer implementation. Both from the same source.

Map the flow before you write the code. It takes 90 seconds. Skipping it costs you 3x that in rework.

User flows aren't documentation. They're the blueprint. We stopped building houses without blueprints.