Tidy tree

The strategy tree packs each subtree by its shape. A small team fits under the edge of a large one, so the chart is narrower than with linked grids.

20 boxes19 edges0 findings

Edit it

# Tidy tree
ceo "CEO" tree {
  cto "CTO" tree {
    platform "Platform" tree {
      infra "Infra" tree {
        network "Network"
        storage "Storage"
        compute "Compute"
      }
    }
    web "Web" tree { web-ui "UI" web-api "API" }
  }
  cfo "CFO" tree { finance "Finance" }
  coo "COO" tree {
    ops "Operations" tree {
      warehouse "Warehouse" tree {
        north "North"
        south "South"
        east "East"
        west "West"
      }
    }
    support "Support"
  }
}

20 boxes, 19 edges. The audit finds no defect.

The input

The same layout in TypeScript. The input is plain data, so it can come from JSON.

import { layout } from "ireko";

const input = {
  "root": {
    "id": "ceo",
    "label": "CEO",
    "layout": "tree",
    "children": [
      {
        "id": "cto",
        "label": "CTO",
        "layout": "tree",
        "children": [
          {
            "id": "platform",
            "label": "Platform",
            "layout": "tree",
            "children": [
              {
                "id": "infra",
                "label": "Infra",
                "layout": "tree",
                "children": [
                  {
                    "id": "network",
                    "label": "Network"
                  },
                  {
                    "id": "storage",
                    "label": "Storage"
                  },
                  {
                    "id": "compute",
                    "label": "Compute"
                  }
                ]
              }
            ]
          },
          {
            "id": "web",
            "label": "Web",
            "layout": "tree",
            "children": [
              {
                "id": "web-ui",
                "label": "UI"
              },
              {
                "id": "web-api",
                "label": "API"
              }
            ]
          }
        ]
      },
      {
        "id": "cfo",
        "label": "CFO",
        "layout": "tree",
        "children": [
          {
            "id": "finance",
            "label": "Finance"
          }
        ]
      },
      {
        "id": "coo",
        "label": "COO",
        "layout": "tree",
        "children": [
          {
            "id": "ops",
            "label": "Operations",
            "layout": "tree",
            "children": [
              {
                "id": "warehouse",
                "label": "Warehouse",
                "layout": "tree",
                "children": [
                  {
                    "id": "north",
                    "label": "North"
                  },
                  {
                    "id": "south",
                    "label": "South"
                  },
                  {
                    "id": "east",
                    "label": "East"
                  },
                  {
                    "id": "west",
                    "label": "West"
                  }
                ]
              }
            ]
          },
          {
            "id": "support",
            "label": "Support"
          }
        ]
      }
    ]
  }
};

const result = layout(input, {"router":"orthogonal","nodeSize":{"width":88,"height":32},"spacing":16});