Hierarchy Builder
Build org charts, team structures and family trees on an animated canvas - drag, style, import and export
100% free. Runs entirely in your browser - your files and data never leave your device and nothing is uploaded to any server.
Build your hierarchy
Pick a starting point. You can change everything afterwards.
About this tool
A hierarchy builder is for the structures that only make sense as a picture: who reports to whom, how a project breaks into teams and tasks, or how a family connects across generations. This one is a proper canvas rather than a static chart - you zoom, pan and drag, nodes fan out on an automatic tidy layout that never lets two cards overlap, and connections animate as the structure changes. Start from a template or from a single root node, then add children, siblings and parents, restyle the cards, switch the layout between four directions, and export a high-resolution PNG, an SVG you can edit in a vector app, a PDF, or the raw JSON and CSV. Existing data can be imported rather than retyped, and everything happens in your browser - nothing is uploaded and no account is required.
How to use this tool
- Pick a starting pointChoose an organization chart, leadership atlas, startup team, family tree, project, department, school, board or command template - or start from scratch with a single root node.
- Build out the structureSelect any node and add a child, sibling or parent. Fill in the name, role, department, badge and photo, then drag nodes wherever you want them.
- Style it and exportSwitch node style, theme, layout direction and connection lines, then export PNG, JPG, SVG, PDF, JSON or CSV.
Key features
- A real canvas: zoom, pan, pinch, drag nodes, fit to screen and go fullscreen.
- Automatic tidy layout that never overlaps nodes, in four directions, with manual dragging on top when you want it.
- Fifteen colour themes and thirteen node styles, plus per-node accent colours that follow the department.
- Six connection treatments including animated flow lines, dashed, dotted and arrow heads.
- Undo and redo across every structural and style change, with keyboard shortcuts.
- Import an existing structure from CSV or JSON instead of retyping it.
- Everything runs in your browser - no upload, no account, and saved projects stay on your device.
Common uses
- Publishing an org chart for a company handbook or onboarding pack.
- Mapping a reporting structure before a reorganisation.
- Drawing a family tree across three or four generations.
- Breaking a project into departments, teams and tasks.
- Showing a department structure in a slide deck or proposal.
- Turning an HR export of employees and managers into a diagram in one import.
Tips for better results
- Tab adds a child to the selected node and Enter adds a sibling - much faster than the buttons for a big chart.
- Space collapses or expands the node you have selected; the badge shows how many people are hidden.
- Switch to left-to-right for deep structures - they fit a screen far better than top-down.
- Use the search box to jump straight to a person; the canvas centres and highlights them.
- Reset view clears manual drag positions and puts everything back on the automatic layout.
- Turn animations off in the Style panel before working on charts of several hundred nodes.
Mistakes to avoid
- Expecting the top node to be deletable - rename it instead; a chart with no root has nowhere to hang from.
- Importing a CSV where every row has a parent, which leaves no top of the hierarchy and is rejected.
- Assuming saved projects sync between devices. They live in this browser only.
- Exporting the visible area when you wanted the whole chart - use Export full hierarchy for that.
- Dragging nodes and then switching layout direction, which lays everything out fresh and keeps your nudges on top.
Frequently asked questions
Open the tool, pick the Organization chart template, then edit the names and roles. Select any node and use Add child to grow the structure. When it looks right, export it as PNG, PDF or SVG. Nothing is uploaded and no account is needed.
Yes. A CSV with id, parent_id and name columns is enough - role, department and image are optional, and common header names like "Manager ID" or "Job Title" are recognised automatically. The importer reports duplicate ids, unknown parents and missing roots rather than silently reshaping your data.
PNG and JPG at double resolution, SVG for editing in a vector app, PDF sized to your chart, and JSON or CSV for the underlying data. You can export the full hierarchy or just the part currently on screen.
Yes. The layout is a single pass over the tree and positions several hundred nodes in a fraction of a second. For very large charts, collapse branches you are not working on and turn animations off in the Style panel.
Everything runs in your browser. Charts are never uploaded, and saved projects are stored in this browser only - which also means they do not follow you to another device.
Yes - there is a family tree template covering grandparents, parents and children. Add a parent above any node to grow the tree upwards as you trace further back.
Yes. Dragging applies a manual offset on top of the automatic layout, so a node stays where you put it while the rest of the chart keeps tidying itself. Reset view clears those offsets.
Tab adds a child, Enter adds a sibling, Space collapses or expands, Delete removes the selected node, Ctrl/Cmd+Z undoes and Ctrl/Cmd+Shift+Z redoes. Ctrl/Cmd+S saves to this browser.