1 Star 0 Fork 53

shiyutian / X6

forked from antv / X6 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

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 图可视化交流群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 开源协议。

MIT License Copyright (c) 2021 Alipay.inc Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

X6 是 AntV 旗下的图编辑引擎,提供了开箱即用的交互组件和简单易用的节点定制能力,方便我们快速搭建流程图、DAG 图、ER 图等图应用。 展开 收起
TypeScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
TypeScript
1
https://gitee.com/shiyutian/X6.git
git@gitee.com:shiyutian/X6.git
shiyutian
X6
X6
master

搜索帮助

14c37bed 8189591 565d56ea 8189591