Flowchart Designer

Flowchart Designer gives you five shape palettes — General, Business, Software, Mind Map and Notes — covering terminators, decisions, data stores, predefined processes, sticky notes and group frames. Click or drag a shape onto the canvas, then drag the small dot on its edge to draw a connection to another shape. Double-click any shape or connection to type directly onto it. The panel on the right sets fill, border and text colour for whatever is selected, plus label, line style, routing and arrowheads for connections. Undo, redo, zoom, grid snapping and a title field live in the toolbar above the canvas.

The canvas is one SVG element; panning and zooming change its viewBox rather than redrawing content at a different scale, so shapes stay sharp at any zoom. Every move, text edit or style change is recorded so Ctrl+Z and Ctrl+Shift+Z step backward and forward through your work. "Save file" writes your shapes, connections and their positions to a JSON file you can reopen later with "Import", and the browser also keeps a rolling autosave in local storage between visits. "Export PNG" draws the diagram onto a canvas element at double resolution for a sharp downloadable image.

Everything runs locally in this browser tab, so nothing is uploaded anywhere — which also means the autosave only exists on this device and browser, so export a JSON file for anything you'd be upset to lose. The elbow-style connection routing draws simple right-angle paths rather than steering around other shapes, so a busy diagram with many crossing lines may need some manual tidying. Very large diagrams, several hundred shapes and up, can feel less responsive since the canvas redraws on each edit rather than updating only the part that changed.