Orthogonal edges

The orthogonal router draws horizontal and vertical segments, and turns at the middle of each gap.

8 boxes10 edges0 findings

Edit it

# Orthogonal edges
main grid(columns: 4) {
  parse
  check
  plan
  run { step-1 step-2 step-3 }
}
parse -> check
check -> plan
plan -> run

8 boxes, 10 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": "main",
    "layout": {
      "type": "grid",
      "columns": 4
    },
    "children": [
      {
        "id": "parse"
      },
      {
        "id": "check"
      },
      {
        "id": "plan"
      },
      {
        "id": "run",
        "children": [
          {
            "id": "step-1"
          },
          {
            "id": "step-2"
          },
          {
            "id": "step-3"
          }
        ]
      }
    ]
  },
  "edges": [
    {
      "source": "parse",
      "target": "check"
    },
    {
      "source": "check",
      "target": "plan"
    },
    {
      "source": "plan",
      "target": "run"
    }
  ]
};

const result = layout(input, {"router":"orthogonal","nodeSize":{"width":80,"height":36}});