---
title: "ELK"
language: "en"
canonical: "https://x6.antv.antgroup.com/en/examples/showcase/practices/elk/"
version: "3.x"
---

# ELK

[Live example](https://x6.antv.antgroup.com/en/examples/showcase/practices/elk/)

[Resource index](/llms.txt)

Provide a DOM element with `id="container"`. The original example source follows.

## Source

```ts
import exampleData from '../../../data/elkdata.json'
import { Graph, Cell } from '@antv/x6'
import ELK, { ElkNode, ElkEdge, ElkExtendedEdge } from 'elkjs/lib/elk.bundled.js'

Graph.registerNode(
  'elk-node',
  {
    inherit: 'rect',
    attrs: {
      body: {
        fill: '#EFF4FF',
        stroke: '#5F95FF',
        strokeWidth: 1,
      },
      label: {
        refX: 0,
        refY: -4,
        textAnchor: 'start',
        textVerticalAnchor: 'bottom',
        fontSize: 10,
      },
    },
    ports: {
      groups: {
        port: {
          position: {
            name: 'absolute',
          },
          attrs: {
            portBody: {
              magnet: 'passive',
              fill: '#5F95FF',
              refWidth: '100%',
              refHeight: '100%',
            },
          },
          markup: [
            {
              tagName: 'rect',
              selector: 'portBody',
            },
          ],
        },
      },
    },
  },
  true,
)

Graph.registerEdge(
  'elk-edge',
  {
    inherit: 'edge',
    attrs: {
      line: {
        stroke: '#A2B1C3',
        strokeWidth: 1,
        targetMarker: {
          name: 'block',
          width: 4,
          height: 4,
        },
      },
    },
  },
  true,
)

interface Position {
  x: number
  y: number
}

const portIdToNodeIdMap: Record<string, string> = {}
const cells: Cell[] = []

const graph = new Graph({
  container: document.getElementById('container')!,
  interacting: false,
})

const elk = new ELK()

const addChildren = (children: ElkNode[], pos?: Position) => {
  children.forEach((child) => {
    const position = {
      x: (child.x || 0) + (pos ? pos.x : 0),
      y: (child.y || 0) + (pos ? pos.y : 0),
    }
    let label: string = ''
    if (typeof child.labels === 'string') {
      label = child.labels
    } else if (Array.isArray(child.labels) && child.labels[0]) {
      label = child.labels[0].text
    }
    const node = graph.createNode({
      shape: 'elk-node',
      id: child.id,
      position,
      label,
      size: {
        width: child.width || 0,
        height: child.height || 0,
      },
      ports: {
        items: (child.ports || []).map((item) => {
          portIdToNodeIdMap[item.id] = child.id
          return {
            id: item.id,
            group: 'port',
            args: {
              x: item.x,
              y: item.y,
            },
            size: {
              width: item.width || 0,
              height: item.height || 0,
            },
          }
        }),
      },
    })

    cells.push(node)

    if (child.children) {
      addChildren(child.children, position)
    }

    if (child.edges) {
      addEdges(child.edges, position)
    }
  })
}

const addEdges = (edges: ElkEdge[], pos?: Position) => {
  edges.forEach((edge: ElkExtendedEdge) => {
    const { bendPoints = [] } = edge.sections[0]

    if (pos) {
      bendPoints.map((bendPoint: Position) => {
        bendPoint.x += pos.x
        bendPoint.y += pos.y
      })
    }

    const sourcePortId = edge.sources[0]
    const targetPortId = edge.targets[0]
    const sourceNodeId = portIdToNodeIdMap[sourcePortId]
    const targetNodeId = portIdToNodeIdMap[targetPortId]

    cells.push(
      graph.createEdge({
        shape: 'elk-edge',
        source: {
          cell: sourceNodeId,
          port: sourcePortId,
        },
        target: {
          cell: targetNodeId,
          port: targetPortId,
        },
        vertices: bendPoints,
      }),
    )
  })
}

Promise.resolve(exampleData)
  .then((data) => {
    elk.layout(data).then((res) => {
      addChildren(res.children || [])
      addEdges(res.edges || [])
      graph.resetCells(cells)
      graph.zoomToFit({
        padding: 20,
        maxScale: 1,
      })
    })
  })
```

## examples/data/elkdata.json

```json
{
  "id": "n0",
  "children": [
    {
      "id": "n1",
      "labels": "DatagramReader",
      "ports": [
        {
          "id": "p1",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "EAST",
            "port.index": "0"
          }
        },
        {
          "id": "p2",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "EAST",
            "port.index": "1"
          }
        },
        {
          "id": "p3",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "EAST",
            "port.index": "2"
          }
        },
        {
          "id": "p4",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "WEST",
            "port.index": "3"
          }
        }
      ],
      "layoutOptions": {
        "portConstraints": "FIXED_ORDER"
      },
      "width": 55.0,
      "height": 40.0
    },
    {
      "id": "n2",
      "labels": [
        {
          "text": "Ramp",
          "layoutOptions": {
            "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
          },
          "width": 50.0,
          "height": 12.0
        }
      ],
      "ports": [
        {
          "id": "p1_g837978",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "WEST",
            "port.index": "0"
          }
        },
        {
          "id": "p2_g739884",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "WEST",
            "port.index": "1"
          }
        },
        {
          "id": "p3_g539420",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "EAST",
            "port.index": "2"
          }
        }
      ],
      "layoutOptions": {
        "portConstraints": "FIXED_ORDER"
      },
      "width": 55.0,
      "height": 40.0
    },
    {
      "id": "n3",
      "labels": [
        {
          "text": "QueueControl",
          "layoutOptions": {
            "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
          },
          "width": 100.0,
          "height": 12.0
        }
      ],
      "ports": [
        {
          "id": "p1_g572291",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "WEST",
            "port.index": "0"
          }
        },
        {
          "id": "p2_g653563",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "WEST",
            "port.index": "1"
          }
        },
        {
          "id": "p3_g722216",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "WEST",
            "port.index": "2"
          }
        },
        {
          "id": "p4_g748499",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "WEST",
            "port.index": "3"
          }
        },
        {
          "id": "p5",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "EAST",
            "port.index": "4"
          }
        },
        {
          "id": "p6",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "EAST",
            "port.index": "5"
          }
        },
        {
          "id": "p7",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "EAST",
            "port.index": "6"
          }
        }
      ],
      "layoutOptions": {
        "portConstraints": "FIXED_ORDER"
      },
      "width": 55.0,
      "height": 40.0
    },
    {
      "id": "n4",
      "labels": [
        {
          "text": "Display",
          "layoutOptions": {
            "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
          },
          "width": 35.0,
          "height": 12.0
        }
      ],
      "ports": [
        {
          "id": "p1_g255145",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "WEST",
            "port.index": "0"
          }
        }
      ],
      "layoutOptions": {
        "portConstraints": "FIXED_ORDER"
      },
      "width": 35.0,
      "height": 27.0
    },
    {
      "id": "n5",
      "labels": [
        {
          "text": "Interface - fast",
          "layoutOptions": {
            "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
          },
          "width": 10.0,
          "height": 12.0
        }
      ],
      "ports": [
        {
          "id": "p1_g820682",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "WEST",
            "port.index": "0"
          }
        },
        {
          "id": "p2_g506569",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "EAST",
            "port.index": "1"
          }
        }
      ],
      "children": [
        {
          "id": "n6",
          "labels": [
            {
              "text": "Sleep",
              "layoutOptions": {
                "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
              },
              "width": 50.0,
              "height": 12.0
            }
          ],
          "ports": [
            {
              "id": "p1_g582202",
              "width": 7,
              "height": 7,
              "layoutOptions": {
                "port.side": "WEST",
                "port.index": "0"
              }
            },
            {
              "id": "p2_g036217",
              "width": 7,
              "height": 7,
              "layoutOptions": {
                "port.side": "EAST",
                "port.index": "1"
              }
            },
            {
              "id": "p3_g791687",
              "width": 7,
              "height": 7,
              "layoutOptions": {
                "port.side": "SOUTH",
                "port.index": "2"
              }
            }
          ],
          "layoutOptions": {
            "portConstraints": "FIXED_ORDER"
          },
          "width": 50.0,
          "height": 35.0
        }
      ],
      "layoutOptions": {
        "portConstraints": "FIXED_ORDER"
      },
      "edges": [
        {
          "id": "e15",
          "sources": ["p1_g820682"],
          "targets": ["p1_g582202"]
        },
        {
          "id": "e16",
          "sources": ["p2_g036217"],
          "targets": ["p2_g506569"]
        }
      ]
    },
    {
      "id": "n7",
      "labels": [
        {
          "text": "Interface - slow",
          "layoutOptions": {
            "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
          },
          "width": 100.0,
          "height": 12.0
        }
      ],
      "ports": [
        {
          "id": "p1_g261431",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "WEST",
            "port.index": "0"
          }
        },
        {
          "id": "p2_g518944",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "EAST",
            "port.index": "1"
          }
        }
      ],
      "children": [
        {
          "id": "n8",
          "labels": [
            {
              "text": "Sleep",
              "layoutOptions": {
                "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
              },
              "width": 50.0,
              "height": 12.0
            }
          ],
          "ports": [
            {
              "id": "p1_g587373",
              "width": 7,
              "height": 7,
              "layoutOptions": {
                "port.side": "WEST",
                "port.index": "0"
              }
            },
            {
              "id": "p2_g014361",
              "width": 7,
              "height": 7,
              "layoutOptions": {
                "port.side": "EAST",
                "port.index": "1"
              }
            },
            {
              "id": "p3_g749816",
              "width": 7,
              "height": 7,
              "layoutOptions": {
                "port.side": "SOUTH",
                "port.index": "2"
              }
            }
          ],
          "layoutOptions": {
            "portConstraints": "FIXED_ORDER"
          },
          "width": 50.0,
          "height": 35.0
        }
      ],
      "layoutOptions": {
        "portConstraints": "FIXED_ORDER"
      },
      "edges": [
        {
          "id": "e17",
          "sources": ["p1_g261431"],
          "targets": ["p1_g587373"]
        },
        {
          "id": "e18",
          "sources": ["p2_g014361"],
          "targets": ["p2_g518944"]
        }
      ]
    },
    {
      "id": "n9",
      "labels": [
        {
          "text": "Counter - q1",
          "layoutOptions": {
            "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
          },
          "width": 55.0,
          "height": 12.0
        }
      ],
      "ports": [
        {
          "id": "p1_g650325",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "WEST",
            "port.index": "0"
          }
        },
        {
          "id": "p2_g732355",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "WEST",
            "port.index": "1"
          }
        },
        {
          "id": "p3_g158827",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "EAST",
            "port.index": "2"
          }
        }
      ],
      "layoutOptions": {
        "portConstraints": "FIXED_ORDER"
      },
      "width": 55.0,
      "height": 35.0
    },
    {
      "id": "n10",
      "labels": [
        {
          "text": "Counter - q2",
          "layoutOptions": {
            "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
          },
          "width": 55.0,
          "height": 12.0
        }
      ],
      "ports": [
        {
          "id": "p1_g006148",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "WEST",
            "port.index": "0"
          }
        },
        {
          "id": "p2_g008338",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "WEST",
            "port.index": "1"
          }
        },
        {
          "id": "p3_g606176",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "EAST",
            "port.index": "2"
          }
        }
      ],
      "layoutOptions": {
        "portConstraints": "FIXED_ORDER"
      },
      "width": 55.0,
      "height": 35.0
    },
    {
      "id": "n11",
      "labels": [
        {
          "text": "channel1",
          "layoutOptions": {
            "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
          },
          "width": 50.0,
          "height": 12.0
        }
      ],
      "ports": [
        {
          "id": "p1_g044769",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "WEST",
            "port.index": "0"
          }
        }
      ],
      "children": [
        {
          "id": "n12",
          "labels": [
            {
              "text": "Counter",
              "layoutOptions": {
                "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
              },
              "width": 75.0,
              "height": 12.0
            }
          ],
          "ports": [
            {
              "id": "p1_g924853",
              "width": 7,
              "height": 7,
              "layoutOptions": {
                "port.side": "WEST",
                "port.index": "0"
              }
            },
            {
              "id": "p2_g825798",
              "width": 7,
              "height": 7,
              "layoutOptions": {
                "port.side": "WEST",
                "port.index": "1"
              }
            },
            {
              "id": "p3_g627665",
              "width": 7,
              "height": 7,
              "layoutOptions": {
                "port.side": "EAST",
                "port.index": "2"
              }
            }
          ],
          "layoutOptions": {
            "portConstraints": "FIXED_ORDER"
          },
          "width": 55.0,
          "height": 35.0
        },
        {
          "id": "n13",
          "labels": [
            {
              "text": "RecordAssembler",
              "layoutOptions": {
                "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
              },
              "width": 100.0,
              "height": 12.0
            }
          ],
          "ports": [
            {
              "id": "p1_g710134",
              "width": 7,
              "height": 7,
              "layoutOptions": {
                "port.side": "WEST",
                "port.index": "0"
              }
            },
            {
              "id": "p2_g774554",
              "width": 7,
              "height": 7,
              "layoutOptions": {
                "port.side": "WEST",
                "port.index": "1"
              }
            },
            {
              "id": "p3_g935869",
              "width": 7,
              "height": 7,
              "layoutOptions": {
                "port.side": "EAST",
                "port.index": "2"
              }
            }
          ],
          "layoutOptions": {
            "portConstraints": "FIXED_ORDER"
          },
          "width": 10.0,
          "height": 40.0
        },
        {
          "id": "n14",
          "labels": [
            {
              "text": "Display",
              "layoutOptions": {
                "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
              },
              "width": 50.0,
              "height": 12.0
            }
          ],
          "ports": [
            {
              "id": "p1_g849516",
              "width": 7,
              "height": 7,
              "layoutOptions": {
                "port.side": "WEST",
                "port.index": "0"
              }
            }
          ],
          "layoutOptions": {
            "portConstraints": "FIXED_ORDER"
          },
          "width": 35.0,
          "height": 27.0
        }
      ],
      "layoutOptions": {
        "portConstraints": "FIXED_ORDER"
      },
      "edges": [
        {
          "id": "e19",
          "sources": ["p1_g044769"],
          "targets": ["p2_g825798"]
        },
        {
          "id": "e20",
          "sources": ["p3_g627665"],
          "targets": ["p1_g710134"]
        },
        {
          "id": "e21",
          "sources": ["p1_g044769"],
          "targets": ["p2_g774554"]
        },
        {
          "id": "e22",
          "sources": ["p3_g935869"],
          "targets": ["p1_g849516"]
        }
      ]
    },
    {
      "id": "n15",
      "labels": [
        {
          "text": "channel2",
          "layoutOptions": {
            "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
          },
          "width": 50.0,
          "height": 12.0
        }
      ],
      "ports": [
        {
          "id": "p1_g598580",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "WEST",
            "port.index": "0"
          }
        }
      ],
      "children": [
        {
          "id": "n16",
          "labels": [
            {
              "text": "Counter",
              "layoutOptions": {
                "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
              },
              "width": 75.0,
              "height": 12.0
            }
          ],
          "ports": [
            {
              "id": "p1_g439211",
              "width": 7,
              "height": 7,
              "layoutOptions": {
                "port.side": "WEST",
                "port.index": "0"
              }
            },
            {
              "id": "p2_g586159",
              "width": 7,
              "height": 7,
              "layoutOptions": {
                "port.side": "WEST",
                "port.index": "1"
              }
            },
            {
              "id": "p3_g324437",
              "layoutOptions": {
                "port.side": "EAST",
                "port.index": "2"
              }
            }
          ],
          "layoutOptions": {
            "portConstraints": "FIXED_ORDER"
          },
          "width": 55.0,
          "height": 35.0
        },
        {
          "id": "n17",
          "labels": [
            {
              "text": "RecordAssembler",
              "layoutOptions": {
                "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
              },
              "width": 100.0,
              "height": 12.0
            }
          ],
          "ports": [
            {
              "id": "p1_g816526",
              "width": 7,
              "height": 7,
              "layoutOptions": {
                "port.side": "WEST",
                "port.index": "0"
              }
            },
            {
              "id": "p2_g800534",
              "width": 7,
              "height": 7,
              "layoutOptions": {
                "port.side": "WEST",
                "port.index": "1"
              }
            },
            {
              "id": "p3_g930851",
              "width": 7,
              "height": 7,
              "layoutOptions": {
                "port.side": "EAST",
                "port.index": "2"
              }
            }
          ],
          "layoutOptions": {
            "portConstraints": "FIXED_ORDER"
          },
          "width": 10.0,
          "height": 40.0
        },
        {
          "id": "n18",
          "labels": [
            {
              "text": "Display",
              "layoutOptions": {
                "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
              },
              "width": 50.0,
              "height": 12.0
            }
          ],
          "ports": [
            {
              "id": "p1_g183964",
              "width": 7,
              "height": 7,
              "layoutOptions": {
                "port.side": "WEST",
                "port.index": "0"
              }
            }
          ],
          "layoutOptions": {
            "portConstraints": "FIXED_ORDER"
          },
          "width": 35.0,
          "height": 27.0
        }
      ],
      "layoutOptions": {
        "portConstraints": "FIXED_ORDER"
      },
      "edges": [
        {
          "id": "e23",
          "sources": ["p1_g598580"],
          "targets": ["p2_g586159"]
        },
        {
          "id": "e24",
          "sources": ["p3_g324437"],
          "targets": ["p1_g816526"]
        },
        {
          "id": "e25",
          "sources": ["p1_g598580"],
          "targets": ["p2_g800534"]
        },
        {
          "id": "e26",
          "sources": ["p3_g930851"],
          "targets": ["p1_g183964"]
        }
      ]
    },
    {
      "id": "n19",
      "labels": [
        {
          "text": "MonitorValue - q1 length",
          "layoutOptions": {
            "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
          },
          "width": 150.0,
          "height": 12.0
        }
      ],
      "ports": [
        {
          "id": "p1_g445341",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "WEST",
            "port.index": "0"
          }
        }
      ],
      "layoutOptions": {
        "portConstraints": "FIXED_ORDER"
      },
      "width": 55.0,
      "height": 40.0
    },
    {
      "id": "n20",
      "labels": [
        {
          "text": "MonitorValue - q2 length",
          "layoutOptions": {
            "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
          },
          "width": 150.0,
          "height": 12.0
        }
      ],
      "ports": [
        {
          "id": "p1_g930680",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "port.side": "WEST",
            "port.index": "0"
          }
        }
      ],
      "layoutOptions": {
        "portConstraints": "FIXED_ORDER"
      },
      "width": 55.0,
      "height": 40.0
    }
  ],
  "edges": [
    {
      "id": "e0",
      "sources": ["p3"],
      "targets": ["p2_g739884"]
    },
    {
      "id": "e1",
      "sources": ["p3_g539420"],
      "targets": ["p2_g653563"]
    },
    {
      "id": "e2",
      "sources": ["p5"],
      "targets": ["p1_g255145"]
    },
    {
      "id": "e3",
      "sources": ["p6"],
      "targets": ["p1_g820682"]
    },
    {
      "id": "e4",
      "sources": ["p7"],
      "targets": ["p1_g261431"]
    },
    {
      "id": "e5",
      "sources": ["p6"],
      "targets": ["p2_g732355"]
    },
    {
      "id": "e6",
      "sources": ["p2_g506569"],
      "targets": ["p1_g650325"]
    },
    {
      "id": "e7",
      "sources": ["p7"],
      "targets": ["p2_g008338"]
    },
    {
      "id": "e8",
      "sources": ["p2_g518944"],
      "targets": ["p1_g006148"]
    },
    {
      "id": "e9",
      "sources": ["p2_g506569"],
      "targets": ["p1_g044769"]
    },
    {
      "id": "e10",
      "sources": ["p2_g518944"],
      "targets": ["p1_g598580"]
    },
    {
      "id": "e11",
      "sources": ["p3_g158827"],
      "targets": ["p1_g445341"]
    },
    {
      "id": "e12",
      "sources": ["p1_g445341"],
      "targets": ["p3_g722216"]
    },
    {
      "id": "e13",
      "sources": ["p3_g606176"],
      "targets": ["p1_g930680"]
    },
    {
      "id": "e14",
      "sources": ["p1_g930680"],
      "targets": ["p1_g572291"]
    }
  ]
}
```