Organization chart

Linked grids make a tree. Each team is as wide as its subtree, so no two teams overlap.

10 boxes9 edges0 findings

Edit it

# Organization chart
ceo "CEO" grid(columns: 3) {
  cto "CTO" grid(columns: 3) {
    platform "Platform"
    product "Product"
    data "Data"
  }
  cfo "CFO" { finance "Finance" }
  coo "COO" grid(columns: 2) { ops "Operations" support "Support" }
}

10 boxes, 9 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": {
      "type": "grid",
      "columns": 3
    },
    "children": [
      {
        "id": "cto",
        "label": "CTO",
        "layout": {
          "type": "grid",
          "columns": 3
        },
        "children": [
          {
            "id": "platform",
            "label": "Platform"
          },
          {
            "id": "product",
            "label": "Product"
          },
          {
            "id": "data",
            "label": "Data"
          }
        ]
      },
      {
        "id": "cfo",
        "label": "CFO",
        "children": [
          {
            "id": "finance",
            "label": "Finance"
          }
        ]
      },
      {
        "id": "coo",
        "label": "COO",
        "layout": {
          "type": "grid",
          "columns": 2
        },
        "children": [
          {
            "id": "ops",
            "label": "Operations"
          },
          {
            "id": "support",
            "label": "Support"
          }
        ]
      }
    ]
  }
};

const result = layout(input, {"router":"orthogonal"});