Drawing a flowchart people can actually follow

• #diagrams
• #design
• #productivity
• #planning
• #in-browser

A good flowchart lets someone follow a process without asking anyone how it works. A bad one is a tangle of boxes and crossing arrows that takes longer to read than a paragraph would. The difference is rarely the tool. It is a few habits that keep the chart simple.

The shapes that matter

There is a long list of standard flowchart symbols, but almost every useful chart needs only four:

Most readers know these without being told. Using extra symbols for documents, databases and manual operations is fine in formal process documentation, but in most charts they add a legend to learn and little else.

One start, clear ends

A chart should have one starting point, so readers know where to begin. It can have several ends, such as "Approved", "Rejected" and "Sent back for changes", but each should say what the outcome is. An end box labelled just "End" wastes the chance to say how things finished.

Write steps as actions

Each rectangle should be one action, written as a verb:

• "Check the invoice total" rather than "Invoice total"
• "Email the customer" rather than "Customer contact"

If a box needs two verbs joined by "and", consider whether it is two steps. If a chart has more than about 15 boxes, consider whether some steps can be grouped, with a separate chart for the detail.

Write decisions as questions

A diamond should hold a question with clear answers, and each arrow out should be labelled with an answer:

• "Over $500?" with arrows labelled Yes and No.
• "Which region?" with arrows labelled North, South and West.

Avoid vague decisions like "Check details". What happens if the details are wrong? A decision with no labelled outcomes leaves the reader to guess.

Keep the flow in one direction

People read top to bottom or left to right. A chart that flows the same way is easy to scan. Some habits that help:

• Main path straight down. Put the common, happy path in a straight line, and branch exceptions off to the side.
• Yes and No in consistent directions. For example, Yes always goes down and No always goes right.
• No crossing lines. If two arrows cross, rearrange the boxes. Crossings are where readers lose their place.

Loops

Many processes repeat: retry a payment, revise a draft, check again. Show a loop with an arrow going back up to an earlier step, ideally on one side of the chart so it is obviously a return. Make sure every loop has a way out, otherwise the chart describes a process that never ends. "Tried three times?" is a common exit condition.

Start in text

The fastest way to draft a flowchart is not to draw it. Write the steps as a list, one per line, with arrows between them:

Order received -> {In stock?}
In stock? -> Pack the order: yes
In stock? -> Order from supplier: no
Order from supplier -> Pack the order
Pack the order -> Ship

Writing it out forces you to name each step and each decision. Text-based flowchart tools then lay out the boxes for you, and changing the process means editing a line rather than redrawing arrows.

When a flowchart is the wrong diagram

Flowcharts show steps in order with decisions. Other questions suit other diagrams:

• Who reports to whom: an org chart.
• How amounts split and flow, such as a budget, energy use or where website visitors go: a Sankey diagram, where the width of each band shows the size of the flow.
• Who does which step: a swimlane chart, which is a flowchart split into a column per person or team.
• A plan over time: a Gantt chart or timeline.

If you find yourself writing numbers on flowchart arrows, you probably want a Sankey diagram. If every box is a person's name, you want an org chart.

Make one

The flowchart maker turns a list of step -> step lines into a laid-out chart, with decision diamonds and loops, ready to download. For amounts flowing between categories, use the Sankey diagram maker, and for team structures, the org chart maker. More diagram types are in the diagrams section.