简体中文 | English

X6 是 AntV 旗下的图编辑引擎

�??供简�?�易用的节点定制能力和开箱�?�用的交互组件，方便我们快速�?�建�?程图�?DAG 图�?ER 图等图应用

特性

• 🌱 　�?易定制：支�?使用 SVG/HTML/React/Vue/Angular 定制节点样�?和交互
• 🚀 　开箱�?�用：内置 10+ 图编辑�?套扩展，如框选�?对�?线�?�?地图等
• 🧲 　数�?�驱动：基于 MVC 架构，用户更加专注于数�?�逻辑和业务逻辑
• 💯 　事件驱动：完备的事件系统，�?�以监�?�图表内�?�生的任何事件

兼容环境

• 现代�?览器
• 支�?�?务端渲染。

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

链接

• 文档
• 示例
• �?�客
• 更新日志
• 常�?问题
• �?现模�?�
• awesome-x6

本地开�?�

# 安装项目�?赖和�?始化构建
$ pnpm install

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

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

�?�与共建

如果希望�?�与到 X6 的开�?�中，请�?�从我们的贡献指�?�。如果你贡献度足够活跃，你�?�以申请�?为社区�??作者。

开�?�??议

该项目的代�?和文档基于 MIT License 开�?�??议。