简体中ちゅう文ぶん | 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 开源协议。