Tree Builder - Free Online Org Chart & Hierarchy Diagram Generator

1. 1

   1. Paste or Write Your JSON

   Provide a root object with a name field and an optional children array. Each child can itself have a name, type, and further children - nest as deep as your hierarchy requires.

2. 2

   2. Load a Sample or Org Template

   Not sure about the JSON shape? Click "Sample" for a fully populated example tree, or "Org Template" for a minimal company-structure starting point you can edit in place.

3. 3

   3. Enable Live Preview

   With Live Preview on, the tree rebuilds automatically 300ms after you stop typing, so you can iterate on your JSON and watch the diagram update in real time.

4. 4

   4. Choose a Layout

   Vertical layout reads top-to-bottom like a classic org chart. Horizontal layout reads left-to-right, useful for wide trees with many levels. Radial layout arranges the tree in a circular pattern, good for compact, symmetrical hierarchies.

5. 5

   5. Pick a Color Scheme

   Choose Default, Pastel, Vibrant, or Grayscale - each maps node types (root, department, team, person, branch, leaf) to a coordinated color palette automatically.

6. 6

   6. Collapse, Reorder, and Refine

   Click any node in the diagram to collapse or expand its subtree. Use the sibling list panel to drag-and-drop reorder nodes at the same level without editing raw JSON.

7. 7

   7. Export or Share

   Export the finished diagram as a scalable SVG for print or presentations, export the underlying JSON to reuse in your own project, or copy a share link that reproduces the exact tree, layout, and color scheme.

Every tree is a nested JSON object. At minimum, each node needs a name. Optional fields give you more control over appearance and grouping:

{
  "name": "CEO",
  "type": "root",
  "children": [
    {
      "name": "CTO",
      "type": "department",
      "children": [
        { "name": "Frontend Lead", "type": "team",
          "children": [
            { "name": "Alice", "type": "person" },
            { "name": "Bob", "type": "person" }
          ]
        }
      ]
    },
    { "name": "CFO", "type": "department" }
  ]
}

• name - required. The label displayed inside the node.
• type - optional. One of root, branch, leaf, department, team, or person; controls the node's color under the active color scheme.
• color - optional. A hex color that overrides the color-scheme default for that specific node.
• attributes - optional. A key/value object of extra metadata to display alongside the node name.
• children - optional. An array of nested nodes using the same structure, recursively.

This tool renders your tree entirely client-side using react-d3-tree. Your JSON - which may contain real org structures, employee names, or internal project data - is never uploaded to a server for parsing or rendering.

• Tree parsing and rendering happen entirely in your browser
• No account or signup required to build or export a tree
• Share links encode the tree data directly in the URL fragment, not on a server
• Exported SVG and JSON files contain only what you typed or generated
• Safe for internal org charts and structures not yet ready for public sharing