Flowchart Maker

What this tool does

The Flowchart Maker is a canvas for drawing clear process diagrams from basic connected shapes. It opens with a small starter chart — a start terminator, a process step and a decision diamond — so the page is useful immediately. You add shapes from a four-type palette, type a label into each, drag them into position, and link them with labelled arrows. The whole diagram has full undo and redo, and exports as a PNG image, a vector SVG, or a JSON project file you can reload and keep editing.

A flowchart shows how something happens, step by step. Each shape has a meaning — a rounded pill for start and end points, a rectangle for an action, a diamond for a decision, a parallelogram for input or output — and arrows show the order. That shared visual language means a flowchart explains a process faster and more precisely than a paragraph of text.

When you would use it

Educators draw flowcharts to teach algorithms, lab procedures or classroom routines, where a diagram makes the order of steps unmistakable. Students map out the logic of a program or an experiment before writing it up, and find errors simply by following the arrows.

Developers sketch the control flow of a function, an onboarding sequence or an API call path — a quick decision diamond often reveals a missing edge case. Planners and operations teams document workflows: how a support ticket is handled, how an order is fulfilled, how an approval moves through a company. Anyone explaining a multi-step process to someone else — a recipe, a troubleshooting guide, a sign-up journey — can hand over a flowchart instead of a wall of instructions.

How to use it

1. The starter flowchart loads automatically. Choose a shape type from the Shape to add menu and click Add shape to drop it on the canvas.
2. Click a shape to select it, then double-click it (or type into the text field) to give it a label.
3. Drag any shape to reposition it; connected arrows follow automatically.
4. To link shapes, switch the mode to Connect arrows, click the source shape, then click the target. An arrow is drawn between their edges.
5. Click an arrow to select it, then type a label such as “Yes” or “No” — this is how you mark the branches leaving a decision diamond.
6. Select any shape or arrow and press Delete selected (or the Delete key) to remove it; deleting a shape also removes its arrows.
7. Use Undo and Redo at any time — every change is recorded.
8. Export with Download PNG, Download SVG, or Save JSON for an editable copy. Load JSON restores a saved flowchart.

Tips for great results

Lay the chart out top to bottom so it reads in the natural direction, and keep arrows flowing the same way to avoid a tangle. Always label the two arrows leaving a decision diamond — an unlabelled branch leaves the reader guessing. Keep shape text to a few words; long labels wrap and crowd the diagram. Give the chart room to breathe by spreading shapes out before you export, so arrows do not cross. Export SVG when the diagram is destined for print or a large screen, since it scales without blurring, and save the JSON as a checkpoint before a big rearrangement so you can undo by reloading.

For a different kind of diagram, the Mind Map Builder is better for branching, free-form idea maps, and the grid generator helps when you are arranging several exported charts on one page.

Privacy

The Flowchart Maker is fully client-side. It is JavaScript running in your browser tab — every shape, arrow, label and JSON file you load stays on your device and is never uploaded, stored remotely or logged. When you close the tab, anything you have not exported is discarded. You can diagram internal processes, confidential workflows and early plans here with confidence that none of it leaves your computer.