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

# yarn
$ yarn add @antv/x6

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

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

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

// 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,
})

.
├── 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

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

# install deps and build
$ yarn bootstrap

cd examples/x6-example-features

yarn start

cd packages/x6

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

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