Flowchart Maker
Build a flowchart by adding boxes and connecting them. The layout is computed for you, so there is nothing to drag and nothing to align. Start from a blank chart or load one of the sorting algorithms.
Click a box in the chart to edit it.
How to use it
- Add boxes with the buttons on the right: start and end are pills, process is a rectangle, decision is a diamond.
- Click a box in the chart to rename it, change its shape, add a note, or delete it.
- Connect two boxes with the from/to selectors. Label the branches out of a decision, usually yes and no.
- Arrows that point back up the chart are drawn dashed, so loops are visible at a glance.
- Warnings appear under the chart for common mistakes: a decision with one exit, an unreachable box, a missing start.
- Copy the chart as JSON to save it or paste it into a tutorial page.
Common questions
What do the different flowchart shapes mean?+
A rounded pill is a terminal, meaning start or end. A rectangle is a process: a step that does something. A diamond is a decision, which asks a yes/no question and has one arrow leaving it per answer. A parallelogram is input or output. These shapes come from the ANSI and ISO 5807 flowchart conventions and are near-universal.
How do you draw a loop in a flowchart?+
A loop is an arrow that points back to an earlier box. There is no special symbol for it: a while loop is a decision box whose 'yes' branch runs the body and then returns to the decision, and whose 'no' branch continues past it. This tool draws those back edges dashed and routes them down the side so they do not cross the main flow.
Can a flowchart show recursion?+
Not directly. A flowchart describes one pass through a procedure, and recursion means the procedure invokes itself, which the notation has no symbol for. The usual convention is to draw a single call and show the recursive step as an ordinary process box, which is how the merge sort and quick sort charts here are drawn.
Why can I not drag the boxes around?+
Positions are computed rather than stored. The tool works out how many layers deep the chart is, places each box on its layer, and routes the arrows. That means a chart can never end up overlapping or tangled, and adding a box in the middle rearranges everything automatically instead of requiring you to move the rest by hand.