How to draw a flow chart: symbols, conventions, and examples

Designers often use flow charts to visualise, plan, and communicate aspects of the design process, or to map user journeys in a clear, step-by-step format. The following article outlines the rules for drawing flowcharts and helps students understand how these planning diagrams are useful for designers.

What are flow charts used for?

• Mapping user flows – showing how users navigate through an app or website, or use a product
• Identifying problems – revealing bottlenecks, problems, or confusing aspects of a design process
• Planning the construction process – ensuring all stages of manufacture are thought through
• Team alignment – ensuring everyone understands the expected process

By breaking down complex interactions into simple visual diagrams, flowcharts make it easier to spot issues early and create more intuitive designs.

How to draw a flow chart: basic symbols

• Oval/Ellipse: Start and end points
• Rectangle: Process or action steps
• Diamond: Decision points (yes/no questions – these can be used to to insert quality control checks into a construction process, for example)

Flow Direction

• Flow should generally move from top to bottom and left to right
• Use arrows to show the direction of flow
• Flowlines should connect to boxes/circles etc, not to other flowlines
• Avoid crossing flowlines where possible

Decision Rules

• Decision diamonds must have exactly two exit paths (typically “Yes” and “No”)
• Label all decision paths clearly
• Each decision should ask only one question

Structure

• Every flowchart needs exactly one start point and at least one end point
• Keep the flow logical and easy to follow
• Align symbols in rows and columns when possible

Best Practices

• Use consistent symbol size and spacing
• Keep text inside symbols brief and clear
• Maintain consistent terminology throughout
• Test flowchart by following each possible path
• Use standard symbols that others will recognize
• Avoid unnecessary complexity