README.en-us.md

简体中文 | English

JavaScript diagramming library that uses SVG and HTML for rendering

Tutorials · Examples · API

Features

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

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

# yarn
$ yarn add @antv/x6

CDNs

For learning purposes, you can use the latest version with one of the CDN:

• https://unpkg.com/@antv/x6/dist/x6.js
• https://cdn.jsdelivr.net/npm/@antv/x6/dist/x6.js
• https://cdnjs.cloudflare.com/ajax/libs/antv-x6/1.3.20/x6.js

<script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>

For production, we recommend linking to a specific version number to avoid unexpected breakage from newer versions:

• https://unpkg.com/@antv/[email protected]/dist/x6.js
• https://cdn.jsdelivr.net/npm/@antv/[email protected]/dist/x6.js
• https://cdnjs.cloudflare.com/ajax/libs/antv-x6/1.1.1/x6.js

<script src="https://unpkg.com/@antv/[email protected]/dist/x6.js"></script>

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 from node_modules
import { Graph } from '@antv/x6'
// or use the global variable `X6` exported from CDN links
// const { Graph } = X6

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

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

// Render target node.
const target = graph.addNode({
  x: 420,
  y: 180,
  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
• ChangeLog

App Demos Build with X6

Communication

Welcome to join the X6 Communication Group (Scan the QR Code to Join us). We also welcome the github issues.

Development

This repo is based on lerna with the following structure:

.
├── examples
│   ├── x6-app-dag            # example of dag graph
│   ├── x6-app-draw           # example of flowchart
│   ├── x6-app-er             # example of ER chart
│   └── x6-example-features   # example of basic features
├── packages
│   ├── x6                    # X6
│   ├── x6-react              # wrap X6 with react(reserved)
│   ├── x6-react-components   # react componets to build graph apps
│   ├── x6-react-shape        # support render node with react
│   └── x6-vue-shape          # support render node with vue
└── sites
    ├── x6-sites              # sites and documents
    ├── x6-sites-demos        # demos in documents
    └── x6-sites-demos-helper # tools to build demos

We need to install some necessary global tools before getting started.

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

# install deps and build
$ yarn bootstrap

Then we can cd to dirs to development and debugging.

Such as, we can start examples/x6-example-features locally:

cd examples/x6-example-features

yarn start

When need to fix some bugs of X6, we can start with watch mode:

cd packages/x6

// build esm to "em" dir
yarn build:watch:esm

// build commonjs to "lib" dir
yarn build:watch:cjs

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.

Contributors

License

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