logo

X6

  • 文档
  • API
  • 图表示例
  • 常见问题
  • 更新日志
  • XFlow
  • 所有产品antv logo arrow
  • 2.x
  • 简介
  • 快速上手
  • 基础
    • 画布
    • 节点
    • 边
    • 连接桩
    • 交互
    • 事件
    • 数据
  • 进阶
    • 连接点
    • 工具
    • 群组
    • React 节点
    • Vue 节点
    • Angular 节点
    • HTML 节点
  • 插件
    • 图形变换
    • 对齐线
    • 复制粘贴
    • 快捷键
    • 撤销重做
    • 框选
    • 滚动画布
    • 小地图
    • Dnd
    • Stencil
    • 导出
  • 升级到 2.x 版本
  • 开发者工具

快速上手

上一篇
简介
下一篇
画布

Resources

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

安装

通过 npm 或 yarn 命令安装 X6。

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

如果使用 umd 包,可以使用下面三个 CDN 中的任何一个,默认使用 X6 的最新版:

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

开始使用

在开始之前,推荐先学习 SVG 基础知识,在有一些基础 SVG 知识储备下,我们以一个简单的例子开始体验 X6。

1. 初始化画布

在页面中创建一个画布容器,然后初始化画布对象,可以通过配置设置画布的样式,比如背景颜色。

<div id="container"></div>
import { Graph } from '@antv/x6'
const graph = new Graph({
container: document.getElementById('container'),
width: 800,
height: 600,
background: {
color: '#F2F7FA',
},
})

2. 渲染节点和边

X6 支持 JSON 格式数据,该对象中 nodes 代表节点数据,edges 代表边数据,可以使用 attrs 属性来定制节点和边的样式(可以类比 CSS)。

3. 使用 React 节点

X6 支持使用 SVG、HTML 来渲染节点内容,在此基础上,我们还可以使用 React、Vue 组件来渲染节点,这样在开发过程中会非常便捷。在拿到设计稿之后,你就需要权衡一下使用哪一种渲染方式,可以参考下面的一些建议:

  • 如果节点内容比较简单,而且需求比较固定,使用 SVG 节点
  • 其他场景,都推荐使用当前项目所使用的框架来渲染节点

例如:在上面节点基础上,我们有一个新的需求:给节点加上右键菜单。如果使用 SVG 来实现会比较复杂,我们直接使用 React 来渲染节点。这里我们使用 X6 配套的 React 渲染包 @antv-x6-react-shape。

4. 使用插件

除了基本的元素渲染能力,X6 还内置了大量的图编辑配套插件,使用这些成熟的插件,能很大程度上降低开发成本。下面为画布增加对齐线功能,当移动的节点与其他节点对齐时,会自动出现对齐线,可以方便用户进行位置排版。

import { Snapline } from '@antv/x6-plugin-snapline'
graph.use(
new Snapline({
enabled: true,
}),
)

5. 数据导出

在上面的步骤 2 渲染节点和边 中可以看到,可以使用 fromJSON 将 JSON 数据渲染到画布中,当然,也支持将画布中的数据导出成 JSON,这样我们就可以将画布数据序列化后存储到服务端。

graph.toJSON()

我们的演示 demo 就到这里了,想继续了解 X6 的一些能力,可以从基础教程开始阅读。