The Org Chart Maker is 100% client‑side. Every person — name, title, colour and optional photo — is a small typed object in a single tree held in the page, and a pure engine (orgChartEngine.ts) computes the tidy layout and connector paths. A photo you add is read with FileReader, downscaled on a local <canvas> and stored as a data URI inside that node; it is never sent anywhere. The chart you see is a live React <svg>; the PNG export serialises the same geometry to an SVG string (native <text> and <image>, deliberately no <foreignObject>) and draws it onto a local <canvas> with canvas.toBlob, the SVG export is that string saved as a file, and JSON / CSV / text are built in memory. “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. The only optional network use is consent‑gated ads. It works offline once cached.

Positions are computed, not stored: a pure “leaf‑slot” pass (a compact, guaranteed‑non‑overlapping variant of the Reingold–Tilford idea) walks the tree, gives every leaf or collapsed node one horizontal slot, and centres each parent over the span of its children, while depth maps to the vertical axis. Because a parent never extends beyond its children’s span and each leaf owns a distinct slot, subtrees can never collide, and the layout re‑runs after every edit so the chart always stays tidy. Since positions are derived from structure, you change the shape rather than the pixels: drag a card onto another to re‑parent it (dropping onto its own descendant is blocked, so you can’t create a cycle), add reports and peers, or collapse a manager to hide a whole team. You can also switch between elbow and straight connectors, and pan, zoom and fit‑to‑view to explore.

The Data panel accepts two quick formats. CSV expects one person per row as name,title,manager: a blank or unknown manager becomes a top‑level person, and everyone else attaches under the manager named in the third column (matched by name, case‑insensitive; self‑loops and cycles are dropped). Indented text expects one person per line as “Name, Title”, where indenting with spaces or a tab makes that line a report of the line above — the outdented line is the top of the chart. If several people end up without a manager, they are wrapped under a synthetic “Organization” root. One click builds the chart, and the same panel copies the current chart back out as CSV or as indented text. For a full round‑trip that also keeps colours and photos, use JSON save / download / import.

You can export in several formats, all produced on‑device. PNG renders the exact geometry you see — cards, connectors and composited avatars — onto a local canvas at 2× on a white background, ideal for slides, docs or chat. SVG saves the chart as a clean vector with real <text> and <image> nodes (avatars embedded as base64), so you can keep editing it in professional design tools, Illustrator or Inkscape. JSON captures the full tree (names, titles, colours, photos and collapse state); “Save” keeps it in this browser’s localStorage, “JSON” downloads a file, and Import loads one back — the reliable way to move a chart between devices since there is no account or cloud sync. You can also copy the structure out as CSV or indented text. Because everything lives in memory (and optionally localStorage), export or save before you close the tab.