The Flowchart Maker is 100% client‑side. Each shape carries a type, a label, an absolute x/y centre, a width, a height and fill/border colours, and each connector stores just its source id, target id and label — all small typed objects in the page. A pure engine (flowchartEngine.ts) routes the arrows and serialises the diagram. The chart you see is a live React <svg>; the PNG export serialises that same geometry to an SVG string (native <text>, no <foreignObject>) and draws it onto a local <canvas> with canvas.toBlob, the SVG export is that string saved as a file, and the JSON save is JSON.stringify of the shapes and connectors. “Save to this browser” uses localStorage on your own device only. Nothing is fetched, uploaded, logged or stored on a server, there is no CDN in the processing path, and fonts are your device’s system fonts so nothing is downloaded. The only optional network use is consent‑gated ads. It works offline once cached.

The palette uses the standard flowchart symbols so your diagram reads the way people expect (the conventions codified by ANSI and ISO 5807). A RECTANGLE (process) is a single action or operation. A DIAMOND (decision) asks a question, and the arrow you follow out of it depends on the answer — label those arrows Yes and No. A rounded STADIUM (terminator) marks the Start or End of the flow. A PARALLELOGRAM is input/output — data a step needs or hands off. A CYLINDER represents stored DATA (a database or file). A wavy‑bottom sheet is a DOCUMENT. A small CIRCLE is a connector used to jump between parts of a large chart. Each shape is fully editable — rename it, recolour its fill and border, resize it, and change its stacking order — and connectors between them are drawn by dragging from a shape’s connection dot to another shape.

Connectors are routed live from the current shape positions, so an arrow always updates the moment you drag either end. STRAIGHT routing draws a single line from the boundary of the source shape to the boundary of the target, pointing centre‑to‑centre — compact and good for simple links. ORTHOGONAL (elbow) routing uses only horizontal and vertical segments joined at right angles, leaving each shape from the side that faces the target and entering the target on the opposite side; this is the clean, technical look most flowcharts use and it keeps parallel arrows readable. The tool picks the exit/entry sides automatically from the relative positions of the two shapes and adds a mid‑line elbow. It is honest that this is a fast live router, not a collision‑free path‑finder: it does not steer arrows around other shapes, so if a link crosses a box you can nudge the shapes or switch routing mode.

You can export in three formats, all produced on‑device. PNG renders the exact geometry you see onto a local canvas at 2× on a white background — ideal for pasting into docs, slides or chat. SVG saves the chart as a clean vector with real shapes and <text> nodes, so you can keep editing it in professional design tools, Illustrator or Inkscape. JSON captures the full chart (every shape’s type, label, position, size and colours, plus every connector and its label); “Save” keeps it in this browser’s localStorage, “Download JSON” writes a file, and “Import” loads a JSON file back — the reliable way to move a chart between devices since there is no account or cloud sync. Because everything lives in memory (and optionally localStorage), export or save before you close the tab.