Features

🌱 　 Easy-to-customize: based on well known SVG/HTML/CSS or React/Vue/Angular to custom nodes and edges
🚀 　 Out-of-the-box: built-in 10+ plugins, such as selection, dnd, redo/undo, snapline, minimap, etc.
🧲 　 Data-driven: base on MVC architecture, you can focus on data logic and business logic
💯 　 Highly-event-driven: you can react on any event that happens inside the graph

Environment Support

Modern browsers and Internet Explorer 11 (with polyfills)
Server-side Rendering

IE / Edge	Firefox	Chrome	Safari
IE11, Edge	last 2 versions	last 2 versions	last 2 versions

Installation

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

# yarn
$ yarn add @antv/x6

Usage

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

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,
})

Links

Documents
Samples
Blog
Versioning Release Note
FAQ
Template
awesome-x6

Development

# install deps and build
$ pnpm install

# enter the specified project development and debugging
cd packages/x6
pnpm run build:watch

# start example to see the effect
cd examples/x6-example-features
pnpm run start

Contributing

To become a contributor, please follow our contributing guide. If you are an active contributor, you can apply to be a outside collaborator.

License

The scripts and documentation in this project are released under the MIT License.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!