@antv/x6
JavaScript diagramming library that uses SVG and HTML for rendering.
Last updated 4 hours ago by bubkoo .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @antv/x6 
SYNC missed versions from official npm registry.

X6 是 AntV 旗下的图编辑引擎

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

MIT License Language PRs Welcome website build coverage Language grade: JavaScript

NPM Package NPM Downloads NPM Dependencies Dependency Status devDependencies Status

简体中文 | English

特性

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

使用文档

应用案例

流程图

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

draw

DAG 图

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

dag

ERD 图

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

er

如何交流

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

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

X6 图可视化交流群

如何开发

我们使用了 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 开源协议。

Current Tags

  • 1.0.0-beta.5                                ...           beta (2 months ago)
  • 1.12.16                                ...           latest (4 hours ago)

200 Versions

  • 1.12.16                                ...           4 hours ago
  • 1.12.14                                ...           a day ago
  • 1.12.13                                ...           2 days ago
  • 1.12.12                                ...           2 days ago
  • 1.12.11                                ...           3 days ago
  • 1.12.10                                ...           3 days ago
  • 1.12.9                                ...           3 days ago
  • 1.12.8                                ...           4 days ago
  • 1.12.7                                ...           4 days ago
  • 1.12.6                                ...           4 days ago
  • 1.12.5                                ...           4 days ago
  • 1.12.4                                ...           5 days ago
  • 1.12.3                                ...           5 days ago
  • 1.12.2                                ...           5 days ago
  • 1.12.1                                ...           11 days ago
  • 1.12.0                                ...           12 days ago
  • 1.11.6                                ...           12 days ago
  • 1.11.3                                ...           13 days ago
  • 1.8.1                                ...           13 days ago
  • 1.11.2                                ...           14 days ago
  • 1.11.1                                ...           14 days ago
  • 1.11.0                                ...           17 days ago
  • 1.10.2                                ...           17 days ago
  • 1.10.1                                ...           17 days ago
  • 1.10.0                                ...           17 days ago
  • 1.9.3                                ...           20 days ago
  • 1.9.2                                ...           20 days ago
  • 1.9.1                                ...           21 days ago
  • 1.9.0                                ...           21 days ago
  • 1.8.0                                ...           21 days ago
  • 1.7.12                                ...           25 days ago
  • 1.7.11                                ...           a month ago
  • 1.7.10                                ...           a month ago
  • 1.7.9                                ...           a month ago
  • 1.7.8                                ...           a month ago
  • 1.7.7                                ...           a month ago
  • 1.7.6                                ...           a month ago
  • 1.7.5                                ...           a month ago
  • 1.7.4                                ...           a month ago
  • 1.7.3                                ...           a month ago
  • 1.7.2                                ...           a month ago
  • 1.7.1                                ...           a month ago
  • 1.6.3                                ...           a month ago
  • 1.5.1                                ...           a month ago
  • 1.5.0                                ...           a month ago
  • 1.4.2                                ...           a month ago
  • 1.4.1                                ...           a month ago
  • 1.4.0                                ...           a month ago
  • 1.3.20                                ...           a month ago
  • 1.3.19                                ...           a month ago
  • 1.3.18                                ...           a month ago
  • 1.3.17                                ...           a month ago
  • 1.3.16                                ...           2 months ago
  • 1.3.15                                ...           2 months ago
  • 1.3.12                                ...           2 months ago
  • 1.3.11                                ...           2 months ago
  • 1.3.10                                ...           2 months ago
  • 1.3.9                                ...           2 months ago
  • 1.3.8                                ...           2 months ago
  • 1.3.7                                ...           2 months ago
  • 1.3.6                                ...           2 months ago
  • 1.3.5                                ...           2 months ago
  • 1.3.4                                ...           2 months ago
  • 1.3.3                                ...           2 months ago
  • 1.3.2                                ...           2 months ago
  • 1.3.1                                ...           2 months ago
  • 1.3.0                                ...           2 months ago
  • 1.2.3                                ...           2 months ago
  • 1.2.2                                ...           2 months ago
  • 1.2.1                                ...           2 months ago
  • 1.1.3                                ...           2 months ago
  • 1.1.2                                ...           2 months ago
  • 1.1.1                                ...           2 months ago
  • 1.1.0                                ...           2 months ago
  • 1.0.9                                ...           2 months ago
  • 1.0.8                                ...           2 months ago
  • 1.0.7                                ...           2 months ago
  • 1.0.6                                ...           2 months ago
  • 1.0.5                                ...           2 months ago
  • 1.0.4                                ...           2 months ago
  • 1.0.3                                ...           2 months ago
  • 1.0.2                                ...           2 months ago
  • 1.0.1                                ...           2 months ago
  • 1.0.0                                ...           2 months ago
  • 0.13.7                                ...           2 months ago
  • 1.0.0-beta.5                                ...           2 months ago
  • 0.13.5                                ...           2 months ago
  • 0.13.4                                ...           2 months ago
  • 0.13.3                                ...           2 months ago
  • 0.13.2                                ...           2 months ago
  • 0.13.1                                ...           2 months ago
  • 0.13.0                                ...           2 months ago
  • 0.12.1                                ...           3 months ago
  • 0.12.0                                ...           3 months ago
  • 0.11.0                                ...           3 months ago
  • 0.10.80                                ...           3 months ago
  • 1.0.0-beta.3                                ...           3 months ago
  • 1.0.0-beta.2                                ...           3 months ago
  • 1.0.0-beta.1                                ...           3 months ago
  • 0.10.78-beta.2                                ...           3 months ago
  • 0.10.76                                ...           3 months ago
  • 0.10.72                                ...           3 months ago
  • 0.10.71                                ...           4 months ago
  • 0.10.70                                ...           4 months ago
  • 0.10.69                                ...           4 months ago
  • 0.10.68                                ...           4 months ago
  • 0.10.67                                ...           4 months ago
  • 0.10.66                                ...           4 months ago
  • 0.10.64                                ...           5 months ago
  • 0.10.63                                ...           5 months ago
  • 0.10.62                                ...           5 months ago
  • 0.10.60                                ...           5 months ago
  • 0.10.59                                ...           5 months ago
  • 0.4.9                                ...           5 months ago
  • 0.10.58                                ...           5 months ago
  • 0.10.57                                ...           5 months ago
  • 0.10.56                                ...           5 months ago
  • 0.10.55                                ...           5 months ago
  • 0.10.54                                ...           5 months ago
  • 0.10.53                                ...           5 months ago
  • 0.10.52                                ...           5 months ago
  • 0.10.51                                ...           6 months ago
  • 0.10.50                                ...           6 months ago
  • 0.10.49                                ...           6 months ago
  • 0.10.48                                ...           6 months ago
  • 0.10.47                                ...           6 months ago
  • 0.10.46                                ...           6 months ago
  • 0.10.45                                ...           6 months ago
  • 0.10.44                                ...           6 months ago
  • 0.10.43                                ...           6 months ago
  • 0.10.42                                ...           6 months ago
  • 0.10.41                                ...           6 months ago
  • 0.10.40                                ...           6 months ago
  • 0.10.39                                ...           6 months ago
  • 0.10.38                                ...           6 months ago
  • 0.10.37                                ...           6 months ago
  • 0.10.36                                ...           6 months ago
  • 0.10.35                                ...           6 months ago
  • 0.10.34                                ...           6 months ago
  • 0.10.33                                ...           6 months ago
  • 0.10.32                                ...           6 months ago
  • 0.10.31                                ...           6 months ago
  • 0.10.30                                ...           6 months ago
  • 0.10.29                                ...           6 months ago
  • 0.10.28                                ...           6 months ago
  • 0.10.27                                ...           6 months ago
  • 0.10.26                                ...           7 months ago
  • 0.10.25                                ...           7 months ago
  • 0.10.24                                ...           7 months ago
  • 0.10.23                                ...           7 months ago
  • 0.10.22                                ...           7 months ago
  • 0.10.21                                ...           7 months ago
  • 0.10.20                                ...           7 months ago
  • 0.10.19                                ...           7 months ago
  • 0.10.18                                ...           7 months ago
  • 0.10.17                                ...           7 months ago
  • 0.10.16                                ...           7 months ago
  • 0.10.15                                ...           7 months ago
  • 0.10.14                                ...           7 months ago
  • 0.10.13                                ...           7 months ago
  • 0.10.12                                ...           7 months ago
  • 0.10.11                                ...           7 months ago
  • 0.10.10                                ...           7 months ago
  • 0.10.9                                ...           7 months ago
  • 0.10.8                                ...           7 months ago
  • 0.10.7                                ...           7 months ago
  • 0.10.6                                ...           7 months ago
  • 0.10.5                                ...           7 months ago
  • 0.10.4                                ...           7 months ago
  • 0.10.3                                ...           7 months ago
  • 0.10.2                                ...           7 months ago
  • 0.10.1                                ...           7 months ago
  • 0.10.0                                ...           7 months ago
  • 0.9.1                                ...           7 months ago
  • 0.9.0                                ...           7 months ago
  • 0.4.8                                ...           7 months ago
  • 0.4.7                                ...           9 months ago
  • 0.4.6                                ...           9 months ago
  • 0.3.5                                ...           9 months ago
  • 0.3.4                                ...           9 months ago
  • 0.3.3                                ...           9 months ago
  • 0.3.2                                ...           10 months ago
  • 0.3.1                                ...           10 months ago
  • 0.3.0                                ...           10 months ago
  • 0.2.7                                ...           a year ago
  • 0.2.6                                ...           a year ago
  • 0.2.5                                ...           a year ago
  • 0.2.4                                ...           a year ago
  • 0.2.3                                ...           a year ago
  • 0.2.2                                ...           a year ago
  • 0.2.1                                ...           a year ago
  • 0.2.0                                ...           a year ago
  • 0.1.7                                ...           a year ago
  • 0.1.6                                ...           a year ago
  • 0.1.5                                ...           a year ago
  • 0.1.4                                ...           a year ago
  • 0.1.3                                ...           a year ago
  • 0.1.2                                ...           a year ago
  • 0.1.1                                ...           a year ago
  • 0.1.0                                ...           a year ago

Copyright 2014 - 2017 © taobao.org |