Org Chart Maker

Org Chart Maker is a free, browser-based tool for creating hierarchical organizational charts. Add people or roles as nodes, set their reporting relationships, colour-code by team or department, and export the result as a PNG image or PDF document.

It handles any tree structure: flat teams with one leader, deep reporting chains, or multi-root charts where several independent teams are shown side by side. Clicking any node reveals a selection panel with quick actions — add a direct report, edit, remove, or delete an entire branch. The chart auto-saves every change in your browser.

Typical uses: company structures, project team hierarchies, department maps, responsibility matrices, reporting line diagrams, and training materials.

• Add the first node with the "Add Node" button. Leave "Reports To" empty to make it a root (top-level) node.
• Add direct reports by clicking a node to select it, then clicking "Add Direct Report" in the panel below the chart — or hover the node and click the + icon that appears.
• Edit any node by clicking the pencil icon on hover, or "Edit" in the selected-node panel. You can change the name, role, department, reporting line, and colour.
• Remove a node (promoting its children to its parent) with "Remove", or delete an entire subtree with "Delete Branch".
• Zoom using the + / − buttons, reset to 100% with 1:1, or click Fit to make the full chart visible at once. Scroll to pan around large charts.
• Export PNG or PDF — both capture the full chart canvas at 2× resolution. Use "JSON" to copy all data; "Import" to restore it on any device.

Nodes are stored as a flat array with parentId references. On each render, this is converted to a tree structure in memory, then a recursive layout algorithm computes every node's x and y position.

The layout uses the Reingold–Tilford variant: first, each subtree's width is computed bottom-up (subtreeWidth = max(nodeWidth, sum of children widths + gaps)). Then nodes are placed top-down — each parent is horizontally centred over its children by offsetting it by (subtreeWidth − nodeWidth) / 2. This produces compact, non-overlapping trees without deep recursion.

Connector lines use elbow routing: each line goes vertically from the parent's bottom-center to a midpoint Y, then horizontally to the child's X, then vertically to the child's top-center. This avoids diagonal crossing lines that are hard to follow in dense charts.

The chart is rendered as absolutely-positioned div nodes over an SVG connector layer, all inside a scrollable container with a CSS scale() transform for zoom. Export uses html2canvas at 2× DPR scale fed into jsPDF, both loaded on-demand via dynamic import(). State persists to localStorage via Alpine.js reactive watchers.