简体中文 | 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 å¼€æº?å??议。