Flowchart Maker

A flowchart is a picture of a procedure: each box is something that happens, each diamond is a question with more than one answer, and the arrows say what follows what. This tool draws one in the browser. Nothing is uploaded, nothing is stored on a server, and there is no account — the chart lives in the page, in a link, and in whichever file you export.

The three shapes

Flowcharts have accumulated a large symbol vocabulary over the years — separate shapes for manual input, magnetic tape, punched cards, off-page connectors. Almost none of it survives in ordinary use, and a chart that reaches for a rare symbol usually needs a caption to explain it. This tool offers the three shapes that carry the meaning:

• Start / end — the rounded stadium. One at the top where the procedure begins, one at the bottom where it finishes. A chart with two ends is fine; a chart with no end usually means a loop you have not drawn yet.
• Step — the rectangle. Something is done: a value is read, a record is saved, a message is sent. If a box's label contains the word "and", it is often two boxes.
• Decision — the diamond. A question, with an arrow leaving for each answer. Label those arrows, not the diamond: "Valid?" on the diamond and yes / no on the two arrows leaving it reads correctly from any direction, where "if valid" written on the diamond does not say what the other arrow means.

Drawing one

The canvas has two modes and the toolbar switches between them. In Move, dragging a box moves it and clicking selects it. In Connect, clicking one box and then another draws an arrow between them, in that order. Switching back to Move is what you do once the arrows are right.

Selecting anything opens a panel under the canvas: a box has a label and a shape, an arrow has a label, and both have a delete button. Renaming a box re-sizes it around the new text, and every arrow touching it re-aims itself — arrows are attached to boxes rather than to positions, so nothing is left pointing at where something used to be.

A box can also be moved from the keyboard. Tab to it and use the arrow keys; hold Shift for single-pixel steps rather than the default sixteen. Delete removes the focused box along with every arrow that touched it.

Layout is yours

There is no automatic arrangement here, and that is deliberate rather than unfinished. An auto-layout engine decides where things go from the structure alone, which is exactly what you want when a program generated the chart and nobody has ever looked at it. It is the wrong answer when a person is drawing: the meaningful part of a hand-drawn chart is often where things sit — the happy path running straight down the middle, the error branch pushed out to one side — and an engine that re-flows on every edit throws that away each time you add a box.

New boxes land below the last one you added, shifted sideways if that spot is taken, and then they stay where you put them.

Three things move the view rather than the chart: dragging the empty background slides everything at once, and the zoom and fit buttons in the corner of the canvas change the magnification. None of them touches a single box's position, so a chart you have arranged carefully cannot be disturbed by looking around it — and the fit button always brings the whole thing back into frame if you lose it off an edge.

Sharing and exporting

The address bar updates as you draw. The whole chart is packed into the part of the URL after the #, which browsers never send to a server — so the link is the chart, and anyone who opens it gets an editable copy rather than a picture. It travels through chat and email like any other link.

SVG is the export to prefer. It is text, it scales to any size without going soft, and it drops into documents, slides and static sites unchanged. PNG is there for the places that will not take an SVG; it is rendered from exactly the same drawing, at twice the on-screen size so the text stays sharp. Both files follow the theme the page is showing, so exporting in dark mode gives you a chart that suits a dark document.

Your working chart is also saved in this browser, so closing the tab and coming back finds it where you left it. That copy never leaves the machine, and it is a convenience rather than a backup — clearing site data clears it too. Export or copy the link for anything you want to keep.