简体中文 | [English](/README.en-us.md)
X6 是 AntV 旗下的图编辑引擎
提供简单易用的节点定制能力和开箱即用的交互组件，方便我们快速搭建流程图、DAG 图、ER 图等图应用
## 特性
- 🌱 极易定制：支持使用 SVG/HTML/React/Vue/Angular 定制节点样式和交互
- 🚀 开箱即用：内置 10+ 图编辑配套扩展，如框选、对齐线、小地图等
- 🧲 数据驱动：基于 MVC 架构，用户更加专注于数据逻辑和业务逻辑
- 💯 事件驱动：完备的事件系统，可以监听图表内发生的任何事件
## 兼容环境
- 现代浏览器和 IE11（需要 polyfills）
- 支持服务端渲染。
| [
](http://godban.github.io/browsers-support-badges/)
IE / Edge | [
](http://godban.github.io/browsers-support-badges/)
Firefox | [
](http://godban.github.io/browsers-support-badges/)
Chrome | [
](http://godban.github.io/browsers-support-badges/)
Safari |
| --- | --- | --- | --- |
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions |
## 安装
```shell
# npm
$ npm install @antv/x6 --save
# yarn
$ yarn add @antv/x6
```
## 示例
```html
```
```ts
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,
})
```
## 链接
- [文档](https://x6.antv.vision/zh/docs/tutorial/about)
- [示例](https://x6.antv.vision/zh/examples/gallery)
- [博客](https://www.yuque.com/antv/x6/gcinvi)
- [更新日志](https://www.yuque.com/antv/x6/bbfu6r)
- [常见问题](https://www.yuque.com/antv/x6/be9pfx)
- [CodeSanbox 模板](https://codesandbox.io/s/qosj0?file=/src/app.tsx)
## 本地开发
```shell
# 全局安装 yarn 和 lerna 工具
$ npm install yarn -g
$ npm install lerna -g
# 安装项目依赖和初始化构建
$ yarn bootstrap
# 进入到指定项目开发和调试
cd packages/x6
yarn build:watch
# 启动 example 查看效果
cd examples/x6-example-features
yarn start
```
## 参与共建
如果希望参与到 X6 的开发中，请遵从我们的[贡献指南](/CONTRIBUTING.zh-CN.md)。如果你贡献度足够活跃，你可以申请成为社区协作者。
## 开源协议
该项目的代码和文档基于 [MIT License](/LICENSE) 开源协议。