# AntV X6: an SVG and HTML graph editing engine for flowcharts and DAG editors

> X6 is a TypeScript diagramming library from Ant Group that renders nodes and edges with SVG and HTML. It suits teams building interactive graph editors, and its extension set and MVC model are the parts worth understanding before you install it.

**antvis/X6** — 🚀 JavaScript diagramming library that uses SVG and HTML for rendering.

- Repository: https://github.com/antvis/X6
- Website: https://x6.antv.antgroup.com
- Stars: 6,714 · Forks: 1,893
- Language: TypeScript
- License: MIT
- Published: 2026-09-22 · Updated: 2026-09-22 · Language: en
- Canonical page: https://hysenlabs.com/projects/antvis-x6

## What problem AntV X6 solves, and who it is for

X6 is a graph editing engine, not a charting library. The distinction matters. A charting library takes data and returns a picture. X6 keeps a live document of nodes and edges that a user can create, connect, move and delete, and it renders that document with SVG and HTML. The README frames the goal as making "process relationship data controllable, interactive, and visualized", and lists DAG diagrams, ER diagrams, flowcharts and lineage graphs as the applications it targets.

The audience is therefore front-end engineers building an editor surface: a workflow builder, a data lineage viewer, a schema designer, an internal tool where an operator drags boxes and draws arrows. The repository is TypeScript, and the package ships `lib`, `es`, `dist` and `src` directories, so consumers get both compiled output and the original sources. If you need a static org chart or a one-off visualization, the editing machinery is weight you will not use.

## How X6 renders: SVG, HTML and an MVC split

The README describes the architecture as MVC, with the stated intent that users focus on data and business logic rather than rendering. In practice the graph object is the view and controller: you add nodes and edges to it, and it owns the SVG canvas and the HTML layers that sit above it. The dependency list backs this up. `dom-align` handles positioning of HTML overlays against DOM elements, `mousetrap` provides keyboard shortcut binding, `lodash-es` supplies utilities, and `utility-types` is TypeScript-only. There is no layout engine among the runtime dependencies, which is a deliberate boundary: X6 positions what you tell it to position.

Rendering is split between SVG and HTML on purpose. Edges, and the geometry of nodes, are drawn as SVG, which gives crisp scaling and makes hit-testing and path manipulation tractable. Node content, such as a form, a table or a rich label, can be HTML, which means you can use ordinary DOM and CSS, and the README extends that to React, Vue and Angular components. Customization is exposed through an event system that the README says can listen to any event occurring within the chart. That is the extension point for custom interactions: rather than subclassing a renderer, you subscribe to graph events and mutate the model.

## Installing @antv/x6 and drawing your first edge

The README gives two package managers. Either produces the same package, `@antv/x6`.

```bash
# npm
$ npm install @antv/x6 --save

# yarn
$ yarn add @antv/x6
```

You need a container element with an explicit size. The README uses a div with inline width and height, and notes that without a sized container the canvas has nothing to attach to.

```html
<div id="container" style="width: 600px; height: 400px"></div>
```

Then import the `Graph` class, construct it against that element, and add two nodes and an edge between them. Note that `addEdge` takes the node objects returned by `addNode`, not their ids, in the README's example.

```ts
import { Graph } from '@antv/x6'

const graph = new Graph({
  container: document.getElementById('container'),
  grid: true,
})

const source = graph.addNode({
  x: 300,
  y: 40,
  width: 80,
  height: 40,
  label: 'Hello',
});

const target = graph.addNode({
  x: 420,
  y: 180,
  width: 80,
  height: 40,
  label: 'World',
});

graph.addEdge({
  source,
  target,
});
```

The README states that if this runs, you get a simple flowchart canvas with a grid, two labelled boxes and a connecting line. The `grid: true` option is what draws the background grid. If you want to run the project's own examples rather than write your own, the local development section uses pnpm: `pnpm install` to install and initialize the build, then `pnpm run start:examples`. The repository is a pnpm workspace, so npm and yarn are documented for consuming the package, while pnpm is the tool the maintainers use for the repository itself.

## Where X6 is the wrong choice

The first limitation is stated by omission. The README lists no layout algorithm. If you want a force-directed graph, a layered DAG layout or automatic edge routing, X6 will not compute it for you; the example places nodes at explicit x and y coordinates. You either compute positions yourself or bring another library and feed the results in. For a large imported graph, that is real work.

The second is the size profile. The package ships a UMD bundle at `dist/x6.min.js` and exposes it through both `unpkg` and `jsdelivr` fields, but the README makes no bundle-size claim, and the badge in the repository header is generated by an external service rather than stated as a number. If your application is size-sensitive, measure the bundle yourself rather than trusting a badge.

The third is that X6 is a browser-oriented editing engine. Server-side rendering is listed as a feature, and the build includes `@napi-rs/canvas` among the dev dependencies, which is consistent with headless canvas work in the test or build pipeline. But the README does not document a supported server-rendering API, so if your use case is generating diagram images in a backend job, verify that path exists in the current documentation before you commit to it. A pure image-generation pipeline is a better fit for a rendering library than for an editing engine.

## X6 against G6 and maxGraph

The related searches surface two comparisons people actually make: AntV G6 and maxGraph. G6 is a different AntV project with a different center of gravity. G6 is aimed at graph analysis and visualization, where the graph is data to be explored and the layout is usually computed for you. X6 is aimed at graph editing, where the graph is a document the user manipulates and the layout is usually theirs to decide. If your product is a dashboard that reveals clusters in a network, G6's model fits better. If your product is an editor where a person wires boxes together, X6's model fits better. They come from the same organization, but they are not interchangeable, and picking the wrong one means fighting the architecture.

maxGraph is a different kind of alternative: it is a continuation of the older mxGraph lineage, which means an established API surface and a long history of embeddable diagram editors. The practical difference is the rendering and component story. X6 renders with SVG and HTML and explicitly supports React, Vue and Angular components as node content, so a node can be a real component from your application. That integration style is the reason to choose X6 over a canvas-based editor toolkit when your UI is already component-driven.

## Maintenance, licence and the cost of upgrading

The repository is not archived, and the last push was on 2026-08-11. The most recent release listed is v3.1.7 on 2026-03-18, preceded by 3.1.6 on 2026-02-04 and v3.1.5 on 2026-01-27. That is a patch-level cadence over the first quarter, with repository activity continuing past the last tagged release. One inconsistency is worth noting: the `package.json` in the repository reads version 3.1.8, which is ahead of the newest release in the release list. If you are pinning a version, check the registry rather than the repository file.

X6 is MIT licensed, and the LICENSE file sits at the repository root alongside `SECURITY.md`, `CONTRIBUTING.md` and a code of conduct. MIT is permissive, so the usual obligations apply: keep the copyright notice and the licence text with distributions. This is not legal advice, and if you are embedding the library in a product with unusual distribution terms, have counsel read the file.

The upgrade cost is the extension surface. The README advertises "10+" built-in extensions including lasso selection, alignment lines and minimap, and it does not enumerate the rest or state a compatibility policy across major versions. Before you build on an extension, confirm it exists in the version you installed. The changelog file at the repository root is the place to check what moved between releases.

## Conclusion

Adopt X6 if you are building a browser-based graph editor and want SVG and HTML rendering with a built-in extension set, and if your team can work inside an MVC model where the graph is the view. Do not adopt it if you need a static charting library or a server-side graph layout engine, because it is an editing engine first. Before committing, verify three things against your own target browsers: that the server-side rendering path produces the output you need, that the extensions you plan to use cover your interactions (lasso selection, alignment lines and minimap are named in the README, but the full list is not), and that the version you pin matches the one you evaluated, since the package.json in the repository reads 3.1.8 while the most recent release note is v3.1.7 from 2026-03-18.

## FAQ

### How do I install AntV X6?

Install the package with npm using `npm install @antv/x6 --save`, or with yarn using `yarn add @antv/x6`. The README documents both, and the local development section of the repository uses pnpm for the project itself.

### Does AntV X6 compute graph layouts automatically?

The README lists no layout algorithm, and the runtime dependencies contain no layout engine. The getting-started example places nodes at explicit x and y coordinates, so positioning is left to the application.

### Can I use AntV X6 with React, Vue or Angular?

The README states that node styles and interactions can be customized using SVG, HTML, React, Vue or Angular. That is the documented integration path for component frameworks.

### What licence does AntV X6 use?

X6 is MIT licensed, and the LICENSE file is at the repository root. The README ends with a link to it.

### What is the difference between AntV X6 and AntV G6?

They come from the same organization but target different work. X6 is described as a graph editing engine for building editors, while G6 is the other AntV graph project people compare it against for visualization and analysis.

## Sources

- [antvis/X6 on GitHub](https://github.com/antvis/X6)
- [License: MIT](https://github.com/antvis/X6/blob/master/LICENSE)
- [Project website](https://x6.antv.antgroup.com)
- [README](https://github.com/antvis/X6/blob/master/README.md)
- [Releases](https://github.com/antvis/X6/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/antvis-x6