267d986764
* trigger semantic release... * chore(release): @antv/x6-plugin-export@1.0.0@1.0.0 [skip ci] * chore(release): @antv/x6@1.0.0@1.0.0 [skip ci] * chore(release): @antv/x6-common@1.0.0@1.0.0 [skip ci] * chore(release): @antv/x6-geometry@1.0.0@1.0.0 [skip ci] * chore(release): @antv/x6-plugin-clipboard@1.0.0@1.0.0 [skip ci] * chore(release): @antv/x6-plugin-dnd@1.0.0@1.0.0 [skip ci] * chore(release): @antv/x6-plugin-history@1.0.0@1.0.0 [skip ci] * chore(release): @antv/x6-plugin-keyboard@1.0.0@1.0.0 [skip ci] * chore(release): @antv/x6-plugin-minimap@1.0.0@1.0.0 [skip ci] * chore(release): @antv/x6-plugin-scroller@1.0.0@1.0.0 [skip ci] * chore(release): @antv/x6-plugin-selection@1.0.0@1.0.0 [skip ci] * chore(release): @antv/x6-plugin-snapline@1.0.0@1.0.0 [skip ci] * chore(release): @antv/x6-plugin-stencil@1.0.0@1.0.0 [skip ci] * chore(release): @antv/x6-plugin-transform@1.0.0@1.0.0 [skip ci] * chore(release): @antv/x6-react-components@1.0.0@1.0.0 [skip ci] * chore(release): @antv/x6-react-shape@1.0.0@1.0.0 [skip ci] * chore(release): @antv/x6-vue-shape@1.0.0@1.0.0 [skip ci] * chore(release): @antv/x6-build-tools@1.0.0@1.0.0 [skip ci] * finalize release [skip ci] Co-authored-by: bubkoo <bubkoo@users.noreply.github.com> Co-authored-by: x6-bot <x6-bot@users.noreply.github.com> Co-authored-by: x6-bot[bot] <71382382+x6-bot[bot]@users.noreply.github.com>
简体中文 | 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
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.