antvis / X6

X6 是 AntV 旗下的图编辑引擎

æ??供了开箱å?³ç”¨çš„交互组件和简å?•æ˜“用的节点定制能力，方便我们快速æ?­å»ºæµ?程图ã€?DAG 图ã€?ER 图等图应用。

简体中文 | English

特性

• 🌱　æž?易定制：支æŒ?使用 SVG/HTML/React/Vue 定制节点样å¼?和交互；
• 🚀　开箱å?³ç”¨ï¼šå†…ç½® 10+ 图编辑é…?套扩展，如框选ã€?对é½?线ã€?å°?地图等；
• 🧲　数æ?®é©±åŠ¨ï¼šåŸºäºŽ MVC 架构，用户更加专注于数æ?®é€»è¾‘和业务逻辑；
• 💯　事件驱动：å?¯ä»¥ç›‘å?¬å›¾è¡¨å†…å?‘生的任何事件。

安装

使用 NPM/Yarn

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

# yarn
$ yarn add @antv/x6

使用 CDN

�以使用下�任�一个最新版本的 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>

在生产环境中，建议使用指定版本å?·çš„链接，以é?¿å…?版本更新带æ?¥çš„æ„?外破å??：

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

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

快速使用

Step 1: 指定渲染图的容器。

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

Step 2: 渲染节点和边。

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

渲染结果如下。

使用文档

• 简介
• 快速上手
• 基础教程
• 进阶实践
• 高级指引
• 更新日志

应用案例

�程图

�程图是常用用于表示业务�程。

• 在线示例：https://x6.antv.vision/apps/draw
• æº?ç ?链接：https://github.com/antvis/x6/tree/master/examples/x6-app-draw

DAG 图

DAG是有�无环图的缩写，它是一个有�，没有环的图形。它最�是计算机领域中一�常�的数�结构。由于其独特的拓扑结构所带�的优良特性，常被用于处�动�规划�导航中寻找最短路径�数�压缩等算法。

• 在线示例：https://x6.antv.vision/apps/dag
• æº?ç ?链接：https://github.com/antvis/x6/tree/master/examples/x6-app-dag

ERD 图

实体关系图 (ERD) 显示了存储在数�库中的实体集之间的关系。实体集是类似实体的集�，这些实体�以定义其属性，通过定义实体�它们的属性并显示它们之间的关系。ER 图�常用�说明了数�库的逻辑结构。

• 在线示例：https://x6.antv.vision/apps/er
• æº?ç ?链接：https://github.com/antvis/x6/tree/master/examples/x6-app-er

如何交�

如果你在使用的过程中碰到问题，å?¯ä»¥å…ˆé€šè¿‡ issues 看看有没有类似的 bug 或者建议。欢迎æ?? issues 交æµ?，也å?¯ä»¥ä½¿ç”¨é’‰é’‰æ‰«æ??下é?¢äºŒç»´ç ?加入X6 交æµ?群。

需è¦?注æ„?的是，æ??问题时请é…?上 CodeSandbox çš„å¤?现代ç ?，方便快速定ä½?和解决问题。

如何开�

我们使用了 lerna �管�项目，目录结构如下：

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

然��以进入到指定项目开�和调试。

如本地å?¯åŠ¨ examples/x6-example-features 示例：

cd examples/x6-example-features

yarn start

修� X6 的 BUG 时�以开� watch 模�，��上��动的本地 DEMO，实时查看修�效果：

cd packages/x6

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

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

如何贡献

如果你在使用的过程中碰到问题，�以先通过 issues 看看有没有类似的 bug 或者建议。

如需æ??交代ç ?，请é?µä»Žæˆ‘们的贡献指å?—。我们会收集贡献者的 Github 头åƒ?到下é?¢è´¡çŒ®è€…清å?•ä¸­ã€‚

å¼€æº?å??è®®

该项目的代ç ?和文档基于 MIT License å¼€æº?å??议。