Arrows follow their boxes
This is the one thing that separates a flowchart from a drawing, and the reason a diagram drawn in a paint program stops being worth editing after ten minutes. Here an arrow stores the two boxes it joins, never a pair of coordinates — so dragging a step across the canvas re-routes every connector attached to it, and they keep touching its edge instead of pointing at where it used to be.
Where an arrow meets a shape is worked out from the shape itself. A diamond is met on its slanted face and an oval on its curve, rather than at the corner of an invisible bounding box, which is the giveaway of a diagram tool that treats every shape as a rectangle.
The five shapes and what each one means
Flowchart notation is older than the software industry and worth following, because a reader who knows it can follow your diagram without a legend. A rounded stadium is where the process starts or ends. A plain rectangle is a step that does something. A diamond is a question, and every arrow leaving it should carry a label — yes, no, over 30 days — or the reader cannot tell which branch is which.
A parallelogram is data going in or coming out: a form submitted, a file written, an email sent. A small circle is a connector, used to carry a line to another part of a chart that has grown too wide for one flow. Double-click any arrow to put a label on it.
Export, and where the chart lives
SVG for anything going into a document, a slide or a wiki — it is drawn from the shapes themselves, so it stays sharp printed or projected at any size, and the text in it stays selectable and searchable. PNG for pasting into a chat or a ticket, where SVG is often rejected; it is rendered at twice the on-screen size and cropped to the diagram, so there is no band of empty canvas around it.
The chart is kept in this browser’s local storage, on this device. There is no account and no server copy, which means nobody else can open it and also that clearing site data or moving to another machine loses it. Export anything you want to keep. Ctrl+Z and Ctrl+Shift+Z work throughout, and a whole drag counts as one step rather than two hundred.
Frequently asked questions
How do I connect two boxes?
Choose the arrow tool, click the box the arrow starts from, then click the box it points at. The line follows your pointer in between, and Esc cancels it. Arrows between the same pair in the same direction are refused, since that is a mis-click.
How do I put a label on an arrow?
Double-click the arrow and type. Labels matter most on the arrows leaving a diamond, where without a yes and a no the reader cannot tell the branches apart.
Is my chart saved when I close the tab?
Yes, in this browser on this device. It is not on a server, so clearing site data or opening the page elsewhere gives you an empty canvas. Export what you need.
Can two people edit the same chart?
No. Live collaboration needs a server relaying every change, which would mean your diagram leaving your machine. This is a single-person editor by design.
What happens to the arrows if I delete a box?
They go with it, because an arrow with nothing at one end would point at the corner of the canvas. One undo brings the box and all of its arrows back together.
PNG or SVG for a document?
SVG. It scales without softening and its text stays selectable, so a reader can search the diagram. Use PNG only where SVG is not accepted, such as most chat apps.
Something wrong with this tool, or an idea for it? Tell us