Online Flowchart Maker

A flowchart maker that works the way you think

Most flowchart software makes you drag shapes onto a canvas, draw connectors by hand, and then spend more time aligning boxes than thinking about the process itself. This online flowchart maker takes a different approach: you describe the steps as short lines of text, and the layout engine places every shape and arrow for you. Change a label, insert a step in the middle, or add a new branch, and the whole chart reflows instantly.

Because the source is text, your flowchart is easy to version, share, and reuse. You can paste it into a pull request, keep it next to your documentation, or send it to a colleague who can edit it in seconds. When you are happy with the result, export a high-resolution PNG for slides and documents, or a scalable SVG that stays sharp at any size.

How to make a flowchart online in four steps

1. Start with the example. The editor above loads a simple order-processing flow. Read through it — each line connects two steps with an arrow.
2. Describe your nodes. Give every step a short ID and a label, such as B[Receive order]. The brackets choose the shape: square brackets for a process box, curly braces for a decision diamond, and ([ ]) for a rounded start or end terminal.
3. Connect the steps. Use --> to draw an arrow. Add a label to any arrow with pipes, like C -->|Yes| D, which is perfect for decision branches.
4. Export and share. Click Export PNG or Export SVG to download the chart, or Copy code to save the text version for later edits.

Flowchart shapes and syntax cheat sheet

Standard flowchart symbols each carry a meaning, and using them consistently makes your diagram much easier to read. Here are the shapes you will use most often:

• Terminal (start/end): A([Start]) — a rounded pill shape that marks where the process begins and ends.
• Process: B[Do something] — a rectangle for any action or task.
• Decision: C{Question?} — a diamond with two or more labelled exits, usually Yes and No.
• Input/output: D[/Enter details/] — a parallelogram for data going in or out.
• Subprocess: E[[Run payroll]] — a box with double sides for a step that has its own detailed flowchart.
• Database: F[(Customers)] — a cylinder for stored data.

flowchart LR
    A([Start]) --> B[/Enter email/]
    B --> C{Valid?}
    C -->|No| B
    C -->|Yes| D[(Save user)]
    D --> E([Done])

Change the direction and group steps

The first line of the code sets the direction of the chart. flowchart TD runs top to bottom, which suits long procedures. Switch it to flowchart LR for a left-to-right layout that fits nicely in slides and wide documents, or use BT and RL for the reverse directions.

For larger processes, group related steps with subgraph. A subgraph draws a labelled frame around its nodes — handy for showing which team, system or phase owns each part of the workflow, similar to a swimlane diagram. Close each group with end, and connect nodes across groups exactly as you would anywhere else.

What can you use a flowchart for?

Flowcharts are one of the most versatile diagram types because almost every activity can be described as a sequence of steps and decisions. Some popular uses include:

• Business processes: onboarding, approvals, order fulfilment and customer support escalation paths.
• Software and algorithms: planning program logic, documenting API flows, and explaining edge cases before you write code.
• Education: teaching problem-solving, visualising a science experiment, or breaking down an essay structure.
• Troubleshooting guides: step-by-step decision trees that help support teams and customers fix problems quickly.
• Personal planning: decisions such as choosing a university course, planning a move or comparing job offers.

Tips for clear, readable flowcharts

A good flowchart can be understood at a glance. Keep each label short — ideally a verb and an object, like “Send invoice”. Use one start point and clearly marked end points, and make sure every decision diamond has a labelled exit for each possible answer. If a chart grows past twenty or thirty steps, split it into several smaller flowcharts and link them with subprocess boxes; readers will thank you.

Finally, stay consistent with direction. Most people read top-to-bottom or left-to-right, so avoid arrows that loop back across the whole page unless they represent a genuine retry or feedback loop, like the restock step in the example above.

Flowcharts vs. other diagrams

A flowchart shows how a process moves from step to step. If instead you want to show how ideas relate to each other, try the concept map generator. To describe how users interact with a system, a use case diagram is a better fit, and if you are designing database tables, our ER diagram tool lets you make an ERD online with the same text-based workflow. Comparing groups and overlaps? Use the Venn diagram maker.

Frequently asked questions