Flowchart Maker — How to Draw Algorithm Flowcharts Online
Flowcharts are the standard notation for mapping algorithms and processes visually. The free flowchart maker on PublicSoftTools lets you drag and drop nodes, draw connecting arrows, and edit labels entirely in your browser — no account or software required.
Standard Flowchart Shapes
| Shape | Symbol | When to use it |
|---|---|---|
| Process | Rectangle | An action, computation, or step — e.g. "Compute sum", "Increment i" |
| Decision | Diamond | A yes/no branch point — e.g. "i < n?", "x > 0?". Two outgoing arrows (Yes, No) |
| Terminal | Rounded rectangle | Start and End points of the flowchart. Every flowchart needs exactly one of each |
| I/O | Parallelogram | Input from the user or output to the screen — e.g. "Read x", "Print result" |
How to Use the Flowchart Maker
- Open the flowchart maker. A sample algorithm is pre-loaded to show the conventions.
- Click Reset to clear the canvas, or modify the example to suit your algorithm.
- Click Add > Terminal, then click on the canvas to place a Start node. Double-click it and type "Start".
- Add more nodes (Process, Decision, I/O) and position them by dragging.
- Click Connect, then click the source node, then the target node to draw an arrow.
- Double-click any node to edit its label. Click a node or arrow and press Delete to remove it.
Common Algorithm Patterns
| Pattern | Flowchart structure |
|---|---|
| Sequence | A chain of Process nodes connected top to bottom. No branches. |
| If/else | A Decision diamond with two outgoing arrows labelled Yes and No, each leading to a separate process path, both merging back at a join point. |
| While loop | A Decision diamond at the top. The Yes branch leads to the loop body and loops back to the diamond. The No branch exits. |
| For loop | An initialisation Process, then a Decision for the condition, then the loop body, then an increment Process that loops back to the Decision. |
| Function call | Represented as a Process node. In detailed diagrams, a predefined process shape (rectangle with double vertical lines) is conventional but a plain rectangle works in most contexts. |
Advanced Workflows
Drawing loops with back-edges
A loop requires an arrow that points backward (upward) in the flowchart — called a back-edge. In the tool, connect the bottom of the loop body back to the condition Decision diamond at the top. The arrow will draw as a straight line regardless of direction, so place the Decision node clearly above the loop body to make the flow visually obvious.
Labelling Decision branches
Decision diamonds have two outgoing arrows. By convention, the Yes (or True) branch goes downward and the No (or False) branch goes sideways. To label arrows, plan your layout so the Yes path is the primary flow and the No path branches to a separate column. This convention makes the flowchart easier to read at a glance.
Representing nested conditions
For nested if/else (or switch/case), chain multiple Decision diamonds. Each diamond handles one condition level. Keep the nesting shallow on the canvas by spreading diamonds horizontally — deep vertical nesting becomes hard to follow with crossing arrows.
Planning before drawing
For complex algorithms, sketch the structure on paper first: count how many Decision points and loops you need, estimate the canvas layout, and identify where back-edges will go. Placing nodes on the canvas is fast; untangling a crossed-arrow mess after the fact takes longer than planning upfront.
Common Questions
How many nodes can I add?
There is no hard node limit. The canvas is 680 × 540 pixels in the viewBox, but nodes can be placed anywhere within those bounds. Very dense flowcharts (20+ nodes) become hard to read — consider splitting them across multiple diagrams.
Can I use this for pseudocode?
Yes. Node labels are freeform text. You can write pseudocode-style labels like "for i = 1 to n" in a Process node or "sum > threshold?" in a Decision diamond. This bridges pseudocode and standard flowchart notation.
What is the difference between a flowchart and a mind map?
A flowchart models sequential process logic with ordered steps and decision branches — ideal for algorithms, workflows, and procedures. A mind map is a radial diagram for brainstorming and organising ideas without a fixed direction of flow. Use the mind map maker for brainstorming; use the flowchart maker for algorithm design.
Draw Your Flowchart
Drag-and-drop nodes, connect with arrows, and edit labels. Free and instant — no account needed.
Open Flowchart Maker