System architecture

Nested containers hold services. Extra edges connect services in different containers.

16 boxes5 edges0 findings

Edit it

# System architecture
system "System" grid(columns: 2, header: 28) nested {
  edge "Edge" grid(header: 28) nested { cdn "CDN" gateway "Gateway" }
  services "Services" grid(header: 28) nested {
    auth "Auth"
    orders "Orders"
    billing "Billing"
    search "Search"
  }
  data "Data" grid(columns: 3, header: 28) nested {
    postgres "Postgres"
    redis "Redis"
    kafka "Kafka"
  }
  observability "Observability" grid(header: 28) nested {
    logs "Logs"
    metrics "Metrics"
  }
}
gateway -> auth
gateway -> orders
orders -> postgres "writes"
billing -> kafka "events"
search -> redis

16 boxes, 5 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": "system",
    "label": "System",
    "mode": "nested",
    "layout": {
      "type": "grid",
      "columns": 2,
      "header": 28
    },
    "children": [
      {
        "id": "edge",
        "label": "Edge",
        "mode": "nested",
        "layout": {
          "type": "grid",
          "header": 28
        },
        "children": [
          {
            "id": "cdn",
            "label": "CDN"
          },
          {
            "id": "gateway",
            "label": "Gateway"
          }
        ]
      },
      {
        "id": "services",
        "label": "Services",
        "mode": "nested",
        "layout": {
          "type": "grid",
          "header": 28
        },
        "children": [
          {
            "id": "auth",
            "label": "Auth"
          },
          {
            "id": "orders",
            "label": "Orders"
          },
          {
            "id": "billing",
            "label": "Billing"
          },
          {
            "id": "search",
            "label": "Search"
          }
        ]
      },
      {
        "id": "data",
        "label": "Data",
        "mode": "nested",
        "layout": {
          "type": "grid",
          "columns": 3,
          "header": 28
        },
        "children": [
          {
            "id": "postgres",
            "label": "Postgres"
          },
          {
            "id": "redis",
            "label": "Redis"
          },
          {
            "id": "kafka",
            "label": "Kafka"
          }
        ]
      },
      {
        "id": "observability",
        "label": "Observability",
        "mode": "nested",
        "layout": {
          "type": "grid",
          "header": 28
        },
        "children": [
          {
            "id": "logs",
            "label": "Logs"
          },
          {
            "id": "metrics",
            "label": "Metrics"
          }
        ]
      }
    ]
  },
  "edges": [
    {
      "source": "gateway",
      "target": "auth"
    },
    {
      "source": "gateway",
      "target": "orders"
    },
    {
      "source": "orders",
      "target": "postgres",
      "label": "writes"
    },
    {
      "source": "billing",
      "target": "kafka",
      "label": "events"
    },
    {
      "source": "search",
      "target": "redis"
    }
  ]
};

const result = layout(input);