简体中文 | English

Graph Editing Engine Of AntV

JavaScript diagramming library that uses SVG and HTML for rendering

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.