Introduction

@antv/layout is a layout algorithm library for graph visualization. It ships with a wide range of layouts, unifies graph data and layout APIs, and turns graph structures into renderable coordinates. TypeScriptWebWorker

Layouts at a glance

TypeLayoutLayout
Force (iterative)ForceAtlas2
Large graphs with acceleration support.
Force
Rich parameters and fine-grained control.
Fruchterman
Classic force layout for small/medium graphs.
D3Force
A wrapper around d3-force simulation.
D3Force3D
3D force layout with z output.
Hierarchy/flowDagre
Directed hierarchical layout with labels/placeholders.
AntVDagre
Production-grade Dagre variant.
Circular/radialCircular
Circular/spiral distribution with ordering controls.
Concentric
Layer by concentric value.
Radial
Radial structure centered on a focus node.
Regular/initGrid
Stable grid positions.
Random
Random coordinates for placeholders.
OthersMDS
Distance-constraint-driven dimensionality reduction.
Composite/ComboComboCombined
Multi-level composite layout with combo bounds.
Minimal example

Here is a minimal layout run using CircularLayout:

import { CircularLayout } from '@antv/layout';

const data = {
  nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }],
  edges: [
    { source: 'node1', target: 'node2' },
    { source: 'node2', target: 'node3' },
  ],
};

async function run() {
  const layout = new CircularLayout({ center: [200, 200], radius: 150 });

  await layout.execute(data);

  layout.forEachNode((node) => {
    console.log(node.id, node.x, node.y);
  });
}

run();

Get started