@antv/layout
A collection of graph layout algorithms that turn node-and-edge data into renderable coordinates.
Repository Health
Technical Analysis
@antv/layout is AntV’s collection of basic graph layout algorithms for visualization. It unifies graph data and layout APIs behind a single interface and computes screen coordinates for nodes and edges using a wide range of algorithms — force-directed, dagre, circular, concentric, grid, radial, MDS, Fruchterman, ForceAtlas2, and more.
Built in TypeScript, the library provides both a synchronous runtime and an off-main-thread supervisor that can run heavy force simulations in a Web Worker. It is the layout engine that powers AntV’s G6 graph visualization stack, but can be used standalone in any project that needs to position graph structures.
What You Get
- A broad set of layout algorithms: force, d3-force, ForceAtlas2, Fruchterman, dagre, circular, concentric, grid, radial, MDS, random, and combo-combined
- A unified graph data model and consistent layout API across every algorithm
- A worker-based supervisor for running expensive force simulations off the main thread
- First-class TypeScript types for graphs, layouts, and options
Common Use Cases
- Positioning nodes and edges for interactive graph and network visualizations
- Rendering hierarchical or directed diagrams with layered dagre layouts
- Arranging large graphs with force-directed simulations without blocking the UI thread
Under The Hood
Architecture
The core lives under src/algorithm, where each layout (e.g. force, d3-force, dagre, circular, concentric, grid, radial, mds, fruchterman, force-atlas2) extends shared bases in base-layout.ts and base-simulation.ts. A registry.ts catalogs available layouts, model defines the graph data abstraction, and runtime/ provides a context plus a supervisor that offloads iterative simulations to worker.ts for off-main-thread execution. The public surface is re-exported from src/index.ts.
Tech Stack
Written predominantly in TypeScript (~83% of the repo) and bundled with Rollup, with Vite and Jest configured for development and testing. It targets both browser and worker environments and ships a documentation site built with MDX under site/.
Code Quality
The repo includes a __tests__/ suite wired through Jest, a perf/ directory for benchmarking, and Codecov coverage reporting in CI. Algorithms are cleanly separated by directory and share common base classes, keeping each layout self-contained and testable.
API Design
Every layout follows the same pattern — instantiate a layout with options, then run it against a graph model to receive positioned nodes — which makes swapping algorithms low-friction. Consistent naming across layouts, TypeScript typings, and a dedicated docs site with an API reference lower the learning curve, though understanding the tuning parameters of force-based layouts still takes some familiarity with the underlying algorithms.
