Tree Diagram Generator Free Online Tool 2026

Last updated March 22, 2026

Tree Diagram Generator Examples

The Tree Diagram Generator creates visual tree diagrams from hierarchical data. Below are practical examples for file systems, organizational charts, data structures, and decision trees.

Indented Text Input Format

// Input (indented text — 2 spaces per level):
Company
  Engineering
    Frontend
      Alice
      Bob
    Backend
      Carol
      Dave
    DevOps
      Eve
  Marketing
    Content
      Frank
    Design
      Grace
  Finance
    Accounting
      Henry

// Generates a tree diagram with Company as root,
// departments as branches, and employees as leaves

File System Tree

// Input:
project/
  src/
    components/
      Button.tsx
      Input.tsx
      Modal.tsx
    pages/
      Home.tsx
      About.tsx
      Contact.tsx
    utils/
      api.ts
      helpers.ts
  public/
    images/
    fonts/
  package.json
  tsconfig.json
  README.md

// ASCII tree output (for terminal/README):
project/
├── src/
│   ├── components/
│   │   ├── Button.tsx
│   │   ├── Input.tsx
│   │   └── Modal.tsx
│   ├── pages/
│   │   ├── Home.tsx
│   │   ├── About.tsx
│   │   └── Contact.tsx
│   └── utils/
│       ├── api.ts
│       └── helpers.ts
├── public/
│   ├── images/
│   └── fonts/
├── package.json
├── tsconfig.json
└── README.md

JSON Input Format

// JSON input for tree diagram:
{
  "name": "CEO",
  "children": [
    {
      "name": "CTO",
      "children": [
        { "name": "Engineering Lead", "children": [
          { "name": "Frontend Dev" },
          { "name": "Backend Dev" }
        ]},
        { "name": "QA Lead" }
      ]
    },
    {
      "name": "CFO",
      "children": [
        { "name": "Controller" },
        { "name": "Analyst" }
      ]
    },
    {
      "name": "CMO",
      "children": [
        { "name": "Marketing Manager" }
      ]
    }
  ]
}

Decision Tree

// Decision tree for user authentication:
Is user logged in?
  Yes → Has valid session?
    Yes → Allow access
    No → Redirect to login
  No → Is registration required?
    Yes → Show registration form
    No → Allow guest access

// ASCII representation:
Is user logged in?
├── Yes → Has valid session?
│   ├── Yes → Allow access
│   └── No → Redirect to login
└── No → Is registration required?
    ├── Yes → Show registration form
    └── No → Allow guest access

Class Hierarchy (OOP)

// Object-oriented class hierarchy:
Animal
  Mammal
    Dog
      Labrador
      Poodle
    Cat
      Persian
      Siamese
    Horse
  Bird
    Eagle
    Parrot
  Fish
    Salmon
    Tuna

// ASCII tree:
Animal
├── Mammal
│   ├── Dog
│   │   ├── Labrador
│   │   └── Poodle
│   ├── Cat
│   │   ├── Persian
│   │   └── Siamese
│   └── Horse
├── Bird
│   ├── Eagle
│   └── Parrot
└── Fish
    ├── Salmon
    └── Tuna

Binary Search Tree

// Binary search tree with values:
//        8
//       / \
//      3   10
//     / \    \
//    1   6    14
//       / \   /
//      4   7 13

// Input format:
8
  3 (left)
    1 (left)
    6 (left)
      4 (left)
      7 (right)
  10 (right)
    14 (right)
      13 (left)

Sitemap Tree

// Website sitemap as tree:
Home (/)
  About (/about)
    Team (/about/team)
    History (/about/history)
  Products (/products)
    Category A (/products/category-a)
      Product 1 (/products/category-a/product-1)
      Product 2 (/products/category-a/product-2)
    Category B (/products/category-b)
  Blog (/blog)
    Post 1 (/blog/post-1)
    Post 2 (/blog/post-2)
  Contact (/contact)

// ASCII tree:
Home (/)
├── About (/about)
│   ├── Team (/about/team)
│   └── History (/about/history)
├── Products (/products)
│   ├── Category A (/products/category-a)
│   │   ├── Product 1
│   │   └── Product 2
│   └── Category B (/products/category-b)
├── Blog (/blog)
│   ├── Post 1
│   └── Post 2
└── Contact (/contact)

Dependency Tree

// npm package dependency tree:
my-app
  react@18.2.0
    loose-envify@1.4.0
      js-tokens@4.0.0
  react-dom@18.2.0
    react@18.2.0 (deduped)
    scheduler@0.23.0
  typescript@5.0.0
  vite@4.3.0
    esbuild@0.17.0
    rollup@3.21.0

ASCII Tree Characters Reference

// Standard ASCII tree characters:
├── (tee)        — node with siblings below
└── (corner)     — last node in a group
│   (pipe)       — vertical line (continuation)
    (spaces)     — indentation for last child's subtree

// Example:
root
├── child1
│   ├── grandchild1
│   └── grandchild2
├── child2
└── child3
    └── grandchild3

Generate ASCII Tree in Code

// JavaScript function to generate ASCII tree
function printTree(node, prefix = '', isLast = true) {
  const connector = isLast ? '└── ' : '├── ';
  console.log(prefix + connector + node.name);
  const childPrefix = prefix + (isLast ? '    ' : '│   ');
  if (node.children) {
    node.children.forEach((child, i) => {
      const last = i === node.children.length - 1;
      printTree(child, childPrefix, last);
    });
  }
}

// Usage:
const tree = {
  name: 'root',
  children: [
    { name: 'child1', children: [
      { name: 'grandchild1' },
      { name: 'grandchild2' }
    ]},
    { name: 'child2' }
  ]
};
printTree(tree, '', true);

Common Use Cases

• Visualize project file and folder structure for README files
• Create organizational charts for teams and companies
• Map website sitemaps and navigation hierarchies
• Diagram class inheritance hierarchies in OOP design
• Visualize decision trees for algorithms and workflows
• Show package dependency trees for debugging
• Represent binary search trees and other data structures
• Document API resource hierarchies

Enter your hierarchical data in indented text or JSON format, choose your layout and style, and export the tree diagram as SVG or PNG.