Guide · Open source

How to use G6: install, build a graph and render it

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

G6 is an open-source graph visualization engine from antvis, written in TypeScript and released under the MIT licence. It is for developers who want to draw networks of connected things, such as relationships between people, accounts or devices, inside a web app. By the end of this guide you will have installed G6, created a Graph instance with data and a force layout, and know where to look next.

G6antvis/G6 · ★ 12.4k · MIT Install options & downloads

Quick start

1Install the package. Run npm install @antv/g6 in your project. You need Node.js and npm or Yarn.
2Add a container. Place a div with an id in your HTML and give it a size in CSS.
3Import Graph. Import Graph from '@antv/g6' in your JavaScript or TypeScript file.
4Prepare your data. Build a data object with nodes and edges arrays that describe your relationships.
5Configure the graph. Pass container, data, a layout such as force, and behaviors to new Graph().
6Render. Call graph.render() to draw the graph in the container.

What G6 is and who it is for

G6 is a graph visualization engine. According to its README, it provides basic capabilities for drawing, layout, analysis, interaction, animation, themes and plugins, so you can build your own graph visualization and analysis applications.

G6 is a library for developers, not a finished tool. If you need a graph product you can use without writing code, it is the wrong choice. It is a good fit for frontend developers building interactive network or relationship diagrams in TypeScript or JavaScript projects.

Interactive network or relationship diagrams in a web app
Graph layouts such as force-directed arrangements
Canvas, SVG or WebGL rendering from one library
Server-side rendering of graphs with Node.js

Install G6 with npm or Yarn

G6 is usually installed through a package manager such as npm or Yarn. You need Node.js and npm or Yarn available in your project. Run the install command in your project folder.

The package is published as @antv/g6.

npm install @antv/g6

Create a container element on the page

G6 draws into an HTML element. Add a div with an id to your page, and give it a width and height in your CSS so the canvas has space to render. The id is the value you will pass to G6 as the container.

<div id="container"></div>

Create a Graph with data, a layout and behaviors

Import Graph from G6 and create an instance. The data object holds nodes and edges arrays. The layout option sets how nodes are arranged; the example uses a force layout. The behaviors option lists user interactions, here dragging the canvas and dragging nodes. Replace the empty arrays with your own data.

The node palette option colours nodes by a field in your data, here cluster. Call graph.render() to draw the result.

container: the id of your div
data: an object with nodes and edges
layout: for example { type: 'force' }
behaviors: for example ['drag-canvas', 'drag-node']
render(): draws the graph

import { Graph } from '@antv/g6';

const data = {
  nodes: [
    /* your nodes data */
  ],
  edges: [
    /* your edges data */
  ],
};

const graph = new Graph({
  container: 'container',
  data,
  node: {
    palette: {
      type: 'group',
      field: 'cluster',
    },
  },
  layout: {
    type: 'force',
  },
  behaviors: ['drag-canvas', 'drag-node'],
});

graph.render();

Know what G6 includes

The README lists built-in elements, interactions, layouts, plugins and themes. Check the official manual and examples for the full options for each one, since the README only summarises them.

Rich elements: built-in node, edge and Combo UI elements with style configuration and data callbacks
Interactions: more than 10 built-in behaviors and a set of events for custom ones
Layouts: more than 10 common graph layouts, some using GPU and Rust parallel computing
Plugins: built-in plugin functionality with extensibility
Themes: light and dark themes, with over 20 community palettes based on the AntV colour scheme
Rendering: Canvas, SVG and WebGL, plus server-side rendering with Node.js, and WebGL-based 3D plugin packages
React: support for React nodes

Find documentation, examples and help

The official site at g6.antv.antgroup.com has a Quick Start, an examples gallery and an API reference. If you hit a problem, the README asks you to open an issue with minimal sample code that reproduces it. Ideas can be discussed on GitHub Discussions or in the DingTalk group.

What people use it for

Showing relationships between people or accounts in an analysis dashboard
Visualising device networks with a force-directed layout
Building an interactive graph explorer where users drag nodes and canvas
Embedding graph views in a React application using React nodes

Frequently asked questions

Is G6 free to use?

G6 is released under the MIT licence, according to the README and the repository's licence file. You can use, modify and distribute it under those terms. Read the LICENSE file for the full text.

What do I need to install G6?

The README lists Node.js and npm or Yarn as the prerequisites. Install the package with npm install @antv/g6.

Is G6 a graph tool I can use without coding?

No. G6 is a library for developers. Setup and customisation require writing JavaScript or TypeScript, so it is not a finished application.

Does G6 support server-side rendering?

The README says G6 supports server-side rendering of graphs with Node.js, alongside Canvas, SVG and WebGL rendering options.

What are alternatives to G6?

The source names Cytoscape.js, D3.js, vis.js and Sigma.js as comparable projects. Each has its own API and strengths, so compare them against your data size and rendering needs.

Why is my graph not showing?

Check that the container div exists with the same id you passed to Graph, and that it has a width and height. The README also advises that, for help, you open an issue with minimal sample code that reproduces the problem.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

G6 suits frontend developers who need interactive network diagrams with layouts, interactions and several rendering options in a TypeScript or JavaScript project. Pick something else if you want a finished graph tool without coding, or if you only need a simple static chart, where a lighter charting library would be less work.

Install options & downloads