What is a flowchart?

Thinking in pictures

A flowchart is a visual diagram that represents a process as a sequence of steps connected by arrows. Each step is drawn as a shape, and the arrows show the flow: the order in which steps execute.

Flowcharts have been used since the 1920s in industrial engineering, but they became essential to computing in the 1940s when Herman Goldstine and John von Neumann drew them in 1947 to plan programs for the IAS computer they were building at Princeton.

A flowchart is to a program what a blueprint is to a building: a visual plan that shows the structure before you build.

Why flowcharts matter

You might think: "I can just write code. Why draw a picture first?"

Because flowcharts help you:

1. Think before you code: Diagramming forces you to understand the logic before writing a single line.
2. Spot missing cases: A flowchart makes gaps in your logic visible. That edge case you'd miss in code? It's obvious when a branch leads nowhere.
3. Communicate with non-developers: Product managers, designers, and clients can read a flowchart. They can't read Ruby.
4. Debug complex logic: When a multi-step process has a bug, tracing through a flowchart is faster than reading nested conditionals.
5. Document decisions: Six months from now, a flowchart explains why the code works the way it does.

The basic elements

Every flowchart is built from just a few shapes. Here are the four essential ones:

1. Terminal (rounded rectangle)

flowchart TB
  S([START])

Marks the beginning or end of a process. Every flowchart has one START and at least one END.

2. Process (rectangle)

flowchart TB
  P[Calculate total]

Represents an action or operation: something that does work. In code, this maps to a statement or method call.

3. Decision (diamond)

flowchart TB
  D{age >= 18?}
  D -->|Yes| Y[ ]
  D -->|No| N[ ]

Represents a question with two or more outcomes. This maps directly to if/else in code. Each exit path must be labeled.

4. Flow arrow

flowchart LR
  A[ ] --> B[ ]

Connects shapes and shows the direction of execution. Arrows always point from one step to the next.

Your first flowchart: login

Let's draw a simple login process:

flowchart TB
  S([START]) --> I[Enter email and password] --> V{Valid credentials?}
  V -->|Yes| R[Redirect to dashboard] --> E1([END])
  V -->|No| X["Show error "Invalid login""] --> E2([END])

Now compare this to the Rails code:

class Auth::SessionsController < ApplicationController
  def create
    result = Auth::AuthenticateUserService.call(
      email: params[:email],
      password: params[:password]
    )

    if result.success                             # Decision diamond
      reset_session
      session[:user_id] = result.user.id
      redirect_to post_sign_in_path(result.user)  # Yes branch
    else
      flash.now[:alert] = result.error            # No branch (.now: this render only)
      render :new, status: :unprocessable_content
    end
  end
end

See how the flowchart and the code have the same structure? That's the power of flowcharts: they make code structure visible.

Flowcharts vs. other diagrams

Flowcharts are one of many diagram types. Here's when to use which:

Flowcharts excel at answering: "What happens step by step?"

A Rails request as a flowchart

Every Rails request follows a flow:

flowchart TB
  R([Request arrives]) --> RT[Router matches route] --> C[Controller action] --> B{before_action passes?}
  B -->|Yes| M[Model query] --> V[View render] --> H([HTML sent])
  B -->|No| X[Redirect or halt]

This mental model (Router → Controller → Model → View) is the foundation of every Rails application.

Reading a flowchart: the rules

1. Start at START: always begin at the terminal marked START.
2. Follow the arrows: never jump between shapes without an arrow.
3. At decisions, choose a path: read the question, follow the labeled exit (Yes/No, True/False).
4. Process boxes execute: when you reach a process box, that action happens.
5. Stop at END: when you reach a terminal marked END, the process is complete.

Golden rule: If you can't trace a clear path from START to END, the flowchart (and likely the code) has a bug.

Summary