FlowPop!: a free online flowchart maker

What you can do with FlowPop!

• Build fast

  Drag shapes in, connect them from the dots on their edges, drop a connector on empty space to create the next shape, or press Tab to add the next step.

• Start from templates

  Begin with a ready-made login, approval, bug triage, support, order or data pipeline flowchart.

• Auto-layout and guides

  Tidy a messy diagram top-to-bottom or left-to-right, with smart alignment guides while you drag.

• Themes and custom colors

  Pick Professional, Ocean, Forest, Dark, Blueprint and more, or define your own colors, fonts and shape styles.

• Save and reload as JSON

  Keep every shape, connector, style and your theme in one file you can open again any time, on any device.

• Export and print with your brand

  Export PNG or SVG, with or without the background, and print or save a PDF with your logo on it.

• Animated GIF walkthroughs

  Turn a flowchart into a GIF that walks through the process step by step, with a live preview and speed, style and size settings.

• Made for phones and tablets

  Drawers for shapes and properties, pinch to zoom, long-press for the right-click menu, and tap-to-connect.

• Images and animated GIFs

  Add pictures and GIFs from a built-in library, any image link or an upload, with frames, filters and motion effects. Connectors can flow, pulse or glow.

• Embed anywhere

  Copy a snippet to show an interactive, zoomable copy of your flowchart on any web page, with a play-through mode.

How to make a flowchart online in 5 steps

1. Pick a starting point. Open a template, or begin with a Start / End shape on a blank canvas.
2. Add the steps. Drag shapes from the left panel. Use Process for actions and Decision for yes/no questions.
3. Connect them. Drag from a dot on a shape's edge to the next shape. Label the arrows leaving a decision with Yes and No.
4. Style it. Choose a theme, set colors and fonts, and tidy everything with Auto-layout.
5. Save or share it. Save as JSON to edit later, or export a PNG, SVG, animated GIF or PDF for slides, documents and wikis.

Want the details? The step-by-step tutorial covers every feature, including keyboard shortcuts and using FlowPop! on a phone.

Flowchart symbols and what they mean

Each shape has a standard meaning. Using them consistently makes a flowchart easy for anyone to read.

Start / End (terminator)

Marks where a process begins or ends. Every flowchart needs at least one Start and one End.

Process

A single step or action, such as “Calculate total” or “Send email”. The most common shape.

Decision

A yes/no or true/false question that splits the flow into branches. Label each outgoing arrow.

Input / Output

Data going into or out of the process, such as user input, a form submission or a printed result.

Subroutine (predefined process)

A call to a predefined routine or a separate flowchart that is described elsewhere.

Document

A single document or report, such as an invoice, printout or generated file.

Database

Stored data: a database or data store that the process reads from or writes to.

Connector

Joins a flow that continues elsewhere, avoiding long crossing arrows. Give matching connectors the same label.

Preparation

A setup step, such as initializing variables or configuring settings before the main work.

Delay

A waiting period before the next step continues, such as “Wait 24 hours”.

Display

Information shown to a person on a screen, such as a message, confirmation or dashboard.

Manual input

Data typed in by hand at a keyboard or form during the process.

Manual step (manual operation)

A step performed by a person rather than automatically, such as a manual review or approval.

Off-page link

A link to another page or diagram. Use it when the flow continues on a different sheet.

Junction

A point where several paths come together or split, often used for “and / or” logic.

Merge

Merges several flows into one, or marks items being combined or stored in order.

Note

A comment or annotation that explains a step. It is not part of the flow itself.

Free flowchart templates

• Login flow

  Credential check with a retry loop.

• Approval process

  Request, review, approve or send back.

• Bug triage

  Decide how urgent a reported bug is.

• Customer support

  Ticket handling with escalation.

• Order fulfillment

  From order to delivery, with backorders.

• Data pipeline

  Ingest, validate, store and report.

Frequently asked questions