@antv/x6

JavaScript diagramming library that uses SVG and HTML for rendering.

Usage no npm install needed!

<script type="module">
  import antvX6 from 'https://cdn.skypack.dev/@antv/x6';
</script>

README

简体中文 | English

X6 是 AntV 旗下的图编辑引擎

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

教程示例API

build coverage Language grade: JavaScript NPM Package NPM Downloads

MIT License Language PRs Welcome website

特性

  • 🌱 极易定制:支持使用 SVG/HTML/React/Vue 定制节点样式和交互
  • 🚀 开箱即用:内置 10+ 图编辑配套扩展,如框选、对齐线、小地图等
  • 🧲 数据驱动:基于 MVC 架构,用户更加专注于数据逻辑和业务逻辑
  • 💯 事件驱动:完备的事件系统,可以监听图表内发生的任何事件

安装

使用 NPM/Yarn

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

# yarn
$ yarn add @antv/x6

使用 CDN

可以使用下面任意一个最新版本的 CDN 地址:

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

快速使用

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

渲染结果如下。

HelloWorld

使用文档

应用案例

Flow Dag MindMap BPMN Class ORG ER SwimLane Tree ELK

如何交流

如果你在使用的过程中碰到问题,可以先通过 issues 看看有没有类似的 bug 或者建议。欢迎提 issues 交流,也可以使用钉钉扫描下面二维码加入X6 交流群

需要注意的是,提问题时请配上 CodeSandbox 的复现代码,方便快速定位和解决问题。

X6 图可视化交流群1 X6 图可视化交流群2 X6 图可视化交流群3

如何开发

我们使用了 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 头像到下面贡献者清单中。

Contributors

开源协议

该项目的代码和文档基于 MIT License 开源协议。