Need help with x6?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

antvis
2.6K Stars 620 Forks MIT License 5.6K Commits 93 Opened issues

Description

🚀 JavaScript diagramming library that uses SVG and HTML for rendering.

Services available

!
?

Need anything else?

Contributors list

简体中文 | 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 地址:

  • 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

在生产环境中,建议使用指定版本号的链接,以避免版本更新带来的意外破坏:


快速使用

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

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 图可视化交流群1 X6 图可视化交流群2

如何开发

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.