How to use the org chart maker
- Type your organization as a list, one box per line. The person at the top goes first with no indent. Indent each line more than the line above to place it under that line, using spaces or a tab. Any steady amount of indent works.
- Add a title or team after a | sign, for example Dee Okafor | VP Sales. The part before the bar is the name in bold, and the part after it appears underneath.
- The chart draws as you type. If a line cannot be placed, the message names the line. Add a title for the chart if you like, and choose whether to show the second line and whether the chart is fitted to the page width.
- Use Download PNG or Download SVG to save the chart, or Copy outline to copy a clean version of your list.
A company of six
The sample has Maria Lopez, CEO, at the top. Under her are Ken Ito, VP Engineering, with Ana Silva and Raj Patel reporting to him, and Dee Okafor, VP Sales, with Sam Cole reporting to her. That is 6 boxes on 3 levels.
With boxes 176 units wide and 24 units between them, the two engineers sit 200 units apart, Ken is centered between them, Dee and her report start 420 units from the left edge, and Maria is centered over Ken and Dee. The finished chart is 616 units wide and 296 units tall.
How the chart is laid out
The chart is drawn top to bottom. People with no reports sit side by side, and each manager is centered over the first and last person who reports to them. The width a manager needs is the larger of their own box and the total width of their team, so teams never overlap. Order follows your list, so reorder the lines to change the order on the chart.
If your list has several lines with no indent, each one starts a separate tree and the trees are drawn side by side, which is useful for several departments or for people who do not report to anyone on the chart. Boxes are shaded by level so the layers are easy to see.
Tips for a readable chart
Keep names and titles short. Names longer than about 22 characters and titles longer than about 26 characters are shortened on the picture, and the whole text appears as hover text. Large teams of 8 or more people under one manager make the chart wide, and splitting them into sub-teams with an extra level keeps it readable.
Pair the chart with a plan. The Gantt chart maker shows who does what and when, and a Kanban board tracks the work itself. To draw a family instead of a company, see the family tree maker.
Privacy and limits
Everything happens in your browser. Names are never sent anywhere, and they are escaped before going into the picture, so markup typed into a name appears as plain text. A chart can have up to 300 boxes and 14 levels, and very large charts are refused with a message rather than freezing the page.
Assumptions and limits
- Each box has exactly one parent, so a person who reports to two managers must be placed under one of them. Dotted-line relationships are not drawn.
- The chart is top to bottom only. Side-to-side layouts and manual dragging of boxes are not offered.
- A line must have a name before the | sign. A second line of text after the bar is optional.
- Lines may be indented by any consistent number of spaces, and a tab counts as four spaces. Mixing very different indents on neighboring lines can group people differently than you expect, so check the result.
Frequently asked questions
How do I show that two people report to the same manager?
Put both lines directly under the manager with the same indent. They will appear side by side under that box.
Can I draw more than one top-level box?
Yes. Start several lines with no indent. Each starts its own tree and the trees are placed next to each other.
Can I edit the chart after downloading the SVG?
Yes. The SVG opens in vector editors, and the boxes and text are separate shapes you can move or restyle. The PNG is a fixed picture.
Is my staff list uploaded anywhere?
No. The chart is calculated and drawn in your browser tab, and the downloads are made on your device.