poetwolf / x6

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

基于 SVG 和 HTML 渲染的 JavaScript 图表库

简体中文 | English

特性

• 🌱　极易定制：提供基于低学习成本的 SVG/HTML/React/Vue 的节点定制能力；
• 🚀　开箱即用：内置 10+ 图编辑场景的配套扩展，如框选、对齐线、小地图等；
• 🧲　数据驱动：基于 MVC 架构模式，用户更加专注于数据逻辑和业务逻辑；
• 💯　事件驱动：您可以监听图表内发生的任何事件；

安装

NPM/Yarn

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

# yarn
$ yarn add @antv/x6

CDNs

为了学习的目的，您可以使用下面任意一个最新版本的 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

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

在生产环境中，我们建议使用特定版本号的链接，以避免版本更新带来的意外破坏：

• https://unpkg.com/@antv/[email protected]/dist/x6.js
• https://cdn.jsdelivr.net/npm/@antv/[email protected]/dist/x6.js
• https://cdnjs.cloudflare.com/ajax/libs/antv-x6/1.1.1/x6.js

<script src="https://unpkg.com/@antv/[email protected]/dist/x6.js"></script>

用法

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

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

Step 2: 渲染节点和边。

// import from node_modules
import { Graph } from '@antv/x6'
// or use the global variable `X6` exported from CDN links
// const { Graph } = X6

// Create an instance of Graph.
const graph = new Graph({
  container: document.getElementById('container'),
  grid: true
})

// Render source node.
const source = graph.addNode({
  x: 300,
  y: 40,
  width: 80,
  height: 40,
  label: 'Hello',
})

// Render target node.
const target = graph.addNode({
  x: 420,
  y: 180,
  width: 80,
  height: 40,
  label: 'World',
})

// Render edge from source to target.
graph.addEdge({
  source,
  target,
})

文档

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

基于 X6 的应用

流程图

流程图是表示算法、工作流或流程的一种框图表示。

• 在线示例: https://x6.antv.vision/apps/draw
• 源码: https://github.com/antvis/x6/tree/master/examples/x6-app-draw

DAG 图

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

• 在线示例: https://x6.antv.vision/apps/dag
• 源码: https://github.com/antvis/x6/tree/master/examples/x6-app-dag

ERD 图

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

• 在线示例: https://x6.antv.vision/apps/er
• 源码: https://github.com/antvis/x6/tree/master/examples/x6-app-er

社区

欢迎加入X6交流小组(扫描二维码加入)，欢迎给我们提 github issues。

开发

# install yarn and lerna
$ npm install yarn -g
$ npm install lerna -g

# install deps and build
$ yarn bootstrap

# run tests
$ yarn test

# build
$ yarn build

贡献

在获得帮助之前，务必首先查看相关 issues。

要成为贡献者，请遵循我们的贡献指南。

开源协议

该项目下的代码和文档是在 MIT License 下发布。