简体中文 | English

X6 是 AntV 旗下的图编辑引擎

提供简单易用的节点定制能力和开箱即用的交互组件，方便我们快速搭建流程图、DAG 图、ER 图等图应用

教程 • 示例 • API

特性

• 🌱　极易定制：支持使用 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

<scriptsrc="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

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

快速使用

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

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

Step 2: 渲染节点和边。

// 从 node_modules 引入import{Graph}from'@antv/x6'// 从 CND 引入时，我们暴露了 X6 这个全局变量// const { Graph } = X6// 创建 Graph 的实例constgraph=newGraph({container: document.getElementById('container'),grid: true})// 渲染源节点constsource=graph.addNode({x: 300,y: 40,width: 80,height: 40,label: 'Hello',})// 渲染目标节点consttarget=graph.addNode({x: 420,y: 180,width: 80,height: 40,label: 'World',})// 渲染边graph.addEdge({
source,
target,})

渲染结果如下。

使用文档

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

应用案例

如何交流

如果你在使用的过程中碰到问题，可以先通过 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 开源协议。