@antv/layout

AntV Layout

Basic layout algorithms for visualization

@antv/layout is a collection of basic layout algorithms. It ships with a wide range of layouts, unifies graph data and layout APIs, and turns graph structures into renderable coordinates.

Highlights

• Coverage: common graph layouts (force, dagre, radial, grid, combo)
• Built for visualization: real-world scenarios and workflows
• Performance: fast defaults + optional WebWorker offloading
• Integration: easy to plug into your rendering pipeline
• TypeScript & docs: typed APIs with complete documentation

Layouts

Layout	Preview	Description
ForceAtlas2		Force-directed layout for large graphs with acceleration options (e.g. Barnes–Hut).
Force		Highly configurable force model for fine-grained tuning and process control.
Fruchterman		Classic force-directed layout for small/medium graphs with balanced distribution.
D3Force		d3-force style simulation wrapper for composing link/manyBody/collide forces.
D3Force3D		3D force layout based on d3-force-3d with z-axis forces and z output.
Dagre		Layered directed layout for DAGs, workflows, and dependency graphs.
AntVDagre		Production-oriented hierarchical layout with spacing, alignment, and path info.
Circular		Place nodes on a circle (or spiral) with ordering, angle, and radius controls.
Concentric		Layer nodes by an importance score (default: degree), pulling higher scores inward.
Radial		Focus-centered rings based on shortest-path distance for relationship exploration.
Grid		Stable grid placement for predictable layouts like cards, lists, and matrices.
MDS		Multidimensional scaling to match ideal distances and produce a balanced global structure.
ComboCombined		Composite layout for combos/subgraphs with per-level strategies and consistent bounds/spacing.

Installation

npm install @antv/layout

Quick Start

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();

Worker support

Set enableWorker: true to run layouts in a WebWorker when supported. See the docs for worker setup and layout configuration details.

Contributing

Contributions are welcome. See CONTRIBUTING.md for guidelines and local workflows.

License

MIT licensed. See LICENSE for details.