How to Make a Flowchart: Symbols, Arrows and Layout

The shape tells the reader what kind of step it is before they read the label. These eight cover most flowcharts:

• Start / end (a pill shape): where the process begins and ends.
• Process (a rectangle): one action, such as Check stock.
• Decision (a diamond): a question. Each arrow that leaves it carries one answer.
• Input / output (a parallelogram): data that enters or leaves, such as a form.
• Predefined process (a rectangle with double side lines): a step with its own flowchart.
• Document (a rectangle with a wavy bottom): a document the step produces, such as an invoice.
• Database (a cylinder): stored data that a step reads or updates.
• Preparation (a hexagon): a setup step, such as resetting a counter.

They come from ISO 5807, the standard for flowchart symbols, so most readers know them. Use one shape per kind of step throughout, and add a Note as a legend for anything unusual.

Drawing first and thinking later leads to crossing lines and missing branches. Write a plain list first:

1. Name the event that starts the process, and every way it can end.
2. List the main path as actions, one verb and object per line: Validate order, Reserve stock, Ship order.
3. Mark each split as a question with clear answers: Payment approved? Yes or No.
4. For each answer, write where the flow goes next. Every branch must reach an end or rejoin the main path.

The list then becomes the chart: each line is a shape, each question a diamond, and the order of the lines sets the direction of the arrows. A step that needs a long sentence is usually two steps.

A loose line stays put when you move a shape, so the chart breaks at the first edit. Connectors are attached at both ends instead. In the Diagram Editor, select a shape to show its four connection dots and drag from a dot onto another shape: drop on a dot to choose the side, or anywhere on the shape for the nearest dot. On a touch screen, tap a dot, then a dot on the other shape.

• Elbow connectors turn at right angles and suit most flowcharts.
• Straight connectors take the shortest line and suit simple charts.
• Curved connectors bend smoothly and suit informal sketches.

Double-click a connector to label it, and label every arrow that leaves a decision with its answer. Connectors and their labels follow when you move a shape.

• Keep one direction for the main path, top to bottom or left to right, with side branches off to one side.
• Avoid crossing lines: move a shape or swap two branches until none cross.
• Line shapes up: select a row, use Align middle, then Distribute horizontally for even gaps. Grid snap keeps shapes on a 10 px grid.
• Keep labels short: a verb and an object for a step, a question for a decision.
• Use colour for meaning, such as one colour for the steps another team owns, and explain it in a note.

When the chart no longer fits on one screen, split it: move a detailed part into its own chart, and show it in the main one as a Predefined process shape.

Pick the format by where the chart is going:

• PNG for slides, chat and documents that accept only images. Choose 2x or more so the chart stays sharp on high-resolution screens.
• Transparent background when the slide or page has its own colour.
• SVG for web pages and wikis. It stays sharp at any size, and the labels stay real text that can be searched.
• Copy as image to paste a PNG straight into a document or message.

To send part of a large chart, select those shapes and export the selection. Keep the editable version too: Save writes a .diagram.json file you can change later.

A flowchart of an internal process often should not go to a third-party service. The Diagram Editor runs in your browser and stores nothing, so the chart stays on your device.

To send it, use Share. The chart is compressed into the link itself, after the #, which browsers never send to a server, and you can add a password and an expiry time. Above about 100,000 characters of diagram data, send the saved file instead. Either way, the person who opens it can still edit every shape.