X6

JavaScript diagramming library that uses SVG and HTML for rendering.

Features

• 🌱　easy-to-customize: based on well known SVG/HTML/CSS or React 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

Installation

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

# yarn
$ yarn add @antv/x6

Usage

Step 1: specify a container the render the diagram.

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

Step 2: render nodes and edges.

import { Graph } from '@antv/x6'

// Create an instance of Graph.
const graph = new Graph({
  container: document.getElementById('container'),
})

// Render source node.
const source = graph.addNode({
  x: 60,
  y: 60,
  width: 80,
  height: 40,
  label: 'Hello',
})

// Render target node.
const target = graph.addNode({
  x: 240,
  y: 240,
  width: 80,
  height: 40,
  label: 'World',
})

// Render edge from source to target.
graph.addEdge({
  source,
  target,
})

Documentation

• About
• Getting started
• Basic usage
• Advanced practice
• Senior guidance

Development

# install yarn and lerna
$ npm install yarn -g
$ npm install lerna -g

# install deps and build
$ yarn bootstrap

# run tests
$ yarn test

# build
$ yarn build

Experience Improvement Program Description

In order to serve the users better, x6 will send the URL and version information back to the AntV server:

https://kcart.alipay.com/web/bi.do

Except for URL and x6 version information, no other information will be collected. You can also turn it off with the following code:

import { Config } from '@antv/x6'

Config.track(false)

Contributing

Please let us know how can we help. Do check out issues for bug reports or suggestions first.

To become a contributor, please follow our contributing guide.