Skip to content

antvis/X6

Folders and files

NameName
Last commit message
Last commit date

Latest commit

3265fe5 · Jan 31, 2023
Dec 12, 2022
Nov 9, 2022
Jan 17, 2023
Jan 31, 2023
Dec 25, 2022
Jan 31, 2023
Nov 3, 2022
Jan 6, 2020
Mar 23, 2021
Nov 2, 2022
Jan 6, 2020
Dec 5, 2022
Dec 12, 2022
Nov 3, 2022
Nov 25, 2022
Dec 5, 2022
Dec 5, 2019
Nov 2, 2022
Nov 2, 2022
Jan 30, 2023
Jan 28, 2023
Jan 1, 2023
Nov 29, 2022
Jan 4, 2023
Mar 21, 2022
Dec 18, 2020
Nov 29, 2022
Dec 25, 2022
Dec 26, 2022
Dec 12, 2022
Dec 16, 2022
Apr 1, 2022
Nov 9, 2022

Repository files navigation

简体中文 | English

flow

X6 是 AntV 旗下的图编辑引擎

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

build NPM Package NPM Downloads

MIT License Language PRs Welcome website

特性

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

兼容环境

  • 现代浏览器
  • 支持服务端渲染。
Firefox
Firefox
Chrome
Chrome
Safari
Safari
last 2 versions last 2 versions last 2 versions

安装

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

# yarn
$ yarn add @antv/x6

示例

<div id="container" style="width: 600px; height: 400px"></div>
import { Graph } from '@antv/x6'

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

链接

本地开发

# 安装项目依赖和初始化构建
$ pnpm install

# 进入到指定项目开发和调试
cd packages/x6
pnpm run build:watch

# 启动 example 查看效果
cd examples/x6-example-features
pnpm run start

参与共建

如果希望参与到 X6 的开发中,请遵从我们的贡献指南。如果你贡献度足够活跃,你可以申请成为社区协作者。

Contributors

开源协议

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