Flowchart

The strategy layers puts the children in layers in the direction of the edges between them. A cycle turns around, and a nested review stage has its own layers.

10 boxes10 edges0 findings

Edit it

# Flowchart
ci "CI pipeline" layers nested {
  push "git push"
  lint "Lint"
  test "Test"
  build "Build"
  pack "Package"
  review "Review" layers(side: right) nested { approve "Approve" stage "Stage" }
  deploy "Deploy"
}
push -> lint
push -> test
push -> build
lint -> pack
test -> pack
build -> pack
pack -> approve
approve -> stage
stage -> deploy
deploy -> push "next"

10 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": "ci",
    "label": "CI pipeline",
    "layout": "layers",
    "mode": "nested",
    "children": [
      {
        "id": "push",
        "label": "git push"
      },
      {
        "id": "lint",
        "label": "Lint"
      },
      {
        "id": "test",
        "label": "Test"
      },
      {
        "id": "build",
        "label": "Build"
      },
      {
        "id": "pack",
        "label": "Package"
      },
      {
        "id": "review",
        "label": "Review",
        "layout": {
          "type": "layers",
          "side": "right"
        },
        "mode": "nested",
        "children": [
          {
            "id": "approve",
            "label": "Approve"
          },
          {
            "id": "stage",
            "label": "Stage"
          }
        ]
      },
      {
        "id": "deploy",
        "label": "Deploy"
      }
    ]
  },
  "edges": [
    {
      "source": "push",
      "target": "lint"
    },
    {
      "source": "push",
      "target": "test"
    },
    {
      "source": "push",
      "target": "build"
    },
    {
      "source": "lint",
      "target": "pack"
    },
    {
      "source": "test",
      "target": "pack"
    },
    {
      "source": "build",
      "target": "pack"
    },
    {
      "source": "pack",
      "target": "approve"
    },
    {
      "source": "approve",
      "target": "stage"
    },
    {
      "source": "stage",
      "target": "deploy"
    },
    {
      "source": "deploy",
      "target": "push",
      "label": "next"
    }
  ]
};

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