1. Load a shape
First visit opens a tour: Harbor & Co, Northstar Commerce, or a smaller starter (startup, agency, nonprofit). Or start blank.
Private org charts · positions stay seats
See the company.
Keep the names on this device.
OrgFlow is an interactive org chart for positions, people and scenarios. Drag a card onto a new manager or a sibling, filter by group and site, save a named view, then export a board pack, A3 pages or a shareable HTML snapshot — all in the browser you already have open.
No account on the public site. Harbor & Co loads as a local sample. Clearing site data removes the workspace, so export a JSON backup first.
How a planning session goes
This page is the product documentation. The planner is app.html. On GitHub Pages the app is static: nothing is posted unless you download a file. A separate Node host can share one org among signed-in members.
2. Edit Current or a scenario
Drag a card onto a new manager, or onto a sibling to reorder. ⌘/Ctrl-click to bulk-edit. Vacant seats stay on the tree. Create a scenario so Current is untouched.
3. Export what you need
PNG or per-group ZIP for slides. Board-pack or Print / A3 PDF for a pack. Shareable HTML that opens without OrgFlow. File → Save keeps a JSON file up to date.
Built for the messy middle of planning
Positions are not people. Vacant seats stay on the chart. Scenarios copy Current instead of overwriting it.
Drag reporting and order
Drop a card onto another manager to re-parent. Drop onto a sibling to reorder. Cycles are blocked. Undo puts it back.
Faces and richer cards
Optional local photos, location, cost center and job family on the card and in the position drawer.
Undo and local history
⌘Z or Ctrl+Z for this session. Earlier versions stay in this browser without photos or logos, so storage stays small.
Board-pack and A3 PDF
A cover sheet plus the current chart, or tiled A3 landscape pages of the visible view — generated as a JPEG PDF with no extra library.
Shareable HTML
A self-contained snapshot that opens as a file. The workspace JSON is inside, ready to restore in OrgFlow.
Dotted lines
Matrix reporting is a second manager on the position. It draws dashed; it does not change the tree layout.
Tour and templates
First Light, Lumen Studio and Cedar & Kind sit beside Harbor & Co and Northstar Commerce.
Stacked teams
Last-level managers stack reports in a column under the manager, with a left-side trunk from the card’s middle. Move siblings up or down. Spacing and the dotted canvas are yours to change.
Card display
Long names wrap and the card grows with them. Hide FTE, site, group, type, approval or hiring. Create a tag like Engineer, Graduate or Intern. Heads can show people, span and vacancy counts.
Group and site chips
Turn a group or location off to take it off the chart and the register. Blank values sit under No group / No site. Filters persist with the current view.
Bulk edit
⌘/Ctrl-click or Shift-click cards, or use checkboxes on Positions, then apply type, group, site or approval to the selection.
Named views
Save filter, zoom and card-display presets on the workspace. They restore with the JSON backup.
Path to the top
Hover a card or search a name to highlight the reporting chain to the root. The rest of the chart dims.
One File menu
New, Open, Save and Save as… live together, with ⌘S / ⌘O shortcuts, recent files and drag-and-drop to open. A status chip shows whether your work is in a file or only in this browser. The public site never uploads your roster.
Private by default
Logos and photos are resized locally. The public site hosts the program only — not your roster.
In the planner
Filters on the chart do not change Compare. Loading a sample resets chips so a leftover filter cannot hide the new tree. Named views remember the chips you want.
- ReportingSolid line = manager on the position. Dashed line = optional dotted-line manager. Drag onto a card to change the solid line; drop on a sibling to reorder.
- PeopleA filled seat has a person. Recruiting and vacant seats have no person record. Unassigning keeps the person in the directory.
- ScenariosCreate a named copy of Current (or of another scenario). Compare is ID-matched, full snapshots, all dates.
- Filters and viewsA tidy, collapsible filters panel shows what is active at a glance. Type, hiring, approval, group and site chips apply to the chart and the Positions register. Search and hover highlight the path to the top. Save a named view for a board pack or a team slice.
- Filter barActive search, chips and the date filter stay pinned above the chart, the register and Compare — with a one-click “clear all”.
- DatesThe date filter is off until you turn it on. Future-dated roles stay visible otherwise.
- BackupWorkspace JSON is the portable copy: every scenario, branding, palette, named views and the current view. File → Save overwrites the linked file when the browser allows it. CSV is the active scenario only.
Two full companies, plus smaller starters
Open the app and pick a sample or template on the Start page. Harbor & Co is 17 seats with an FY27 growth scenario. Northstar Commerce is 14 seats with Peak season.
First Light
Startup · 8 seats. Product Manager dotted-line to Head of Engineering. One recruiting engineer.
Lumen Studio
Agency · 9 seats. Producer dotted-line to Creative Director.
Cedar & Kind
Nonprofit · 7 seats. Partnerships dotted-line to the Executive Director.
Ways to run OrgFlow
The public site never sees your roster. The desktop build is a double-click app with no installer. The Node host is optional, and it is a different process — not GitHub Pages.
This site
In the browser
Open app.html on this site. Names, photos and reporting lines stay in localStorage on this device. No login. No backend.
python3 -m http.server 4173
This device
Desktop app
A Windows .exe, macOS .app, or Linux AppImage. Double-click to open — no installer, no Program Files. The workspace stays on this computer.
Optional
Enterprise host
One shared workspace on your machine or in a VPC. Sign-in, admin / editor / viewer, optional subtree scope, audit log, and MCP read tools. Keycloak is not required locally.
npm run start:enterprise
Open the planner in this origin.
Same folder as this page. On the public site, data stays in this browser. Use File → Save or Download backup before you clear site data.