Skip to content

Latest commit

 

History

History
120 lines (90 loc) · 4.78 KB

README.en-us.md

File metadata and controls

120 lines (90 loc) · 4.78 KB

简体中文 | English

Graph Editing Engine Of AntV

JavaScript diagramming library that uses SVG and HTML for rendering

build coverage Language grade: JavaScript NPM Package NPM Downloads

MIT License Language PRs Welcome website

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
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
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

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.

Contributors

License

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