简体中ちゅう文ぶん | English

X6 是ぜ AntV 旗下きか的てき图编辑引擎

提供ていきょう简单易えき用よう的てき节点定じょう制せい能力のうりょく和わ开箱即そく用よう的てき交互こうご组件，方便ほうべん我わが们快速そく搭建流りゅう程ほど图、DAG 图、ER 图等图应用よう

教程きょうてい • 示しめせ例れい • API

• 🌱　极易定じょう制せい：支持しじ使用しよう SVG/HTML/React/Vue 定じょう制せい节点样式和わ交互こうご
• 🚀　开箱即そく用よう：内うち置おけ 10+ 图编辑配套扩展てん，如框选、对齐线、小しょう地ち图等
• 🧲　数かず据すえ驱动：基もと于 MVC 架か构，用よう户更加か专注于数据すえ逻辑和わ业务逻辑
• 💯　事件じけん驱动：完かん备的事件じけん系けい统，可か以监听图表ひょう内ない发生的てき任にん何なん事件じけん

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

# yarn
$ yarn add @antv/x6

可か以使用しよう下面かめん任意にんい一いち个最新しん版本はんぽん的てき CDN 地ち址し:

• https://unpkg.com/@antv/x6/dist/x6.js
• https://cdn.jsdelivr.net/npm/@antv/x6/dist/x6.js
• https://cdnjs.cloudflare.com/ajax/libs/antv-x6/1.3.20/x6.js

<script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>

在ざい生なま产环境さかい中ちゅう，建けん议使用しよう指定してい版本はんぽん号ごう的てき链接，以避免めん版本はんぽん更新こうしん带来的てき意外いがい破やぶ坏：

• https://unpkg.com/@antv/x6@1.1.1/dist/x6.js
• https://cdn.jsdelivr.net/npm/@antv/x6@1.1.1/dist/x6.js
• https://cdnjs.cloudflare.com/ajax/libs/antv-x6/1.1.1/x6.js

<script src="https://unpkg.com/@antv/x6@1.1.1/dist/x6.js"></script>

Step 1: 指定してい渲染图的容器ようき。

<div id="container" style="width: 600px; height: 400px"></div>

Step 2: 渲染节点和わ边。

// 从 node_modules 引入
import { Graph } from '@antv/x6'
// 从 CDN 引入时，我わが们暴露ろ了りょう X6 这个全局ぜんきょく变量
// const { Graph } = X6

// 创建 Graph 的てき实例
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,
})

渲染结果如下。

• 简介
• 快速かいそく上手じょうず
• 基もと础教程ほど
• 进阶实践
• 高こう级指引
• 更新こうしん日び志こころざし

如果你在使用しよう的てき过程中ちゅう碰到问题，可か以先通どおり过 issues 看み看み有ゆう没ぼつ有ゆう类似的てき bug 或ある者もの建けん议。欢迎提ひさげ issues 交流こうりゅう，也可以使用しよう钉钉扫描下面かめん二に维码加入かにゅうX6 交流こうりゅう群ぐん。

需要じゅよう注意ちゅうい的てき是ぜ，提つつみ问题时请配はい上じょう CodeSandbox 的てき复现代だい码，方便ほうべん快速かいそく定位ていい和解わかい决问题。

我わが们使用よう了りょう lerna 来らい管理かんり项目，目もく录结构如下か：

.
├── examples
│   ├── x6-app-dag            # dag 图示例れい
│   ├── x6-app-draw           # 流りゅう程ほど图示例れい
│   ├── x6-app-er             # ER 图示例れい
│   └── x6-example-features   # 特性とくせい演えんじ示しめせ示しめせ例れい
├── packages
│   ├── x6                    # X6
│   ├── x6-react              # X6 的てき React 封ふう装そう（预留）
│   ├── x6-react-components   # 配はい套 React 组件库
│   ├── x6-react-shape        # 支持しじ使用しよう React 渲染节点
│   └── x6-vue-shape          # 支持しじ使用しよう Vue 渲染节点
└── sites
    ├── x6-sites              # 官かん网和文わぶん档
    ├── x6-sites-demos        # 文ぶん档中嵌入かんにゅう的てき DEMO
    └── x6-sites-demos-helper # 构建文ぶん档 DEMO 的てき工具こうぐ

开始之の前ぜん需要じゅよう安あん装そう必要ひつよう的てき全局ぜんきょく依よ赖和初はつ始はじめ化か：

# 全局ぜんきょく安あん装そう yarn 和わ lerna 工具こうぐ
$ npm install yarn -g
$ npm install lerna -g

# 安あん装そう项目依よ赖和初はつ始はじめ化か构建
$ yarn bootstrap

然しか后きさき可か以进入いれ到いた指定してい项目开发和わ调试。

如本地ち启动 examples/x6-example-features 示しめせ例れい：

cd examples/x6-example-features

yarn start

修おさむ复 X6 的てき BUG 时可以开启 watch 模も式しき，配合はいごう上面うわつら启动的てき本地ほんじ DEMO，实时查看修おさむ复效果こうか：

cd packages/x6

// esm 模も式しき，动态构建 es 产物
yarn build:watch:esm

// commonjs 模も式しき，动态构建 lib 产物
yarn build:watch:cjs

如果你在使用しよう的てき过程中ちゅう碰到问题，可か以先通どおり过 issues 看み看み有ゆう没ぼつ有ゆう类似的てき bug 或ある者もの建けん议。

如需提ひさげ交代こうたい码，请遵从我们的贡献指南しなん。我わが们会收集しゅうしゅう贡献者しゃ的てき Github 头像到いた下面かめん贡献者しゃ清きよし单中。

该项目的もくてき代だい码和文わぶん档基于 MIT License 开源协议。