# 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>

// 从 node_modules 引入
import { Graph } from '@antv/x6'
// 从 CND 引入时，我们暴露了 X6 这个全局变量
// const { Graph } = X6

// 创建 Graph 的实例
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,
})

.
├── examples
│   ├── x6-app-dag            # dag 图示例
│   ├── x6-app-draw           # 流程图示例
│   ├── x6-app-er             # ER 图示例
│   └── x6-example-features   # 特性演示示例
├── packages
│   ├── x6                    # X6
│   ├── x6-react              # X6 的 React 封装（预留）
│   ├── x6-react-components   # 配套 React 组件库
│   ├── x6-react-shape        # 支持使用 React 渲染节点
│   └── x6-vue-shape          # 支持使用 Vue 渲染节点
└── sites
    ├── x6-sites              # 官网和文档
    ├── x6-sites-demos        # 文档中嵌入的 DEMO
    └── x6-sites-demos-helper # 构建文档 DEMO 的工具

# 全局安装 yarn 和 lerna 工具
$ npm install yarn -g
$ npm install lerna -g

# 安装项目依赖和初始化构建
$ yarn bootstrap

cd examples/x6-example-features

yarn start

cd packages/x6

// esm 模式，动态构建 es 产物
yarn build:watch:esm

// commonjs 模式，动态构建 lib 产物
yarn build:watch:cjs