# @antv/x6 中文文档

规范地址：https://npmcn.com/package/%40antv/x6/

版本：3\.1\.8
npm 元数据更新时间：2026-09-21T08:46:57.981Z
中文译文更新时间：2026-11-06T07:21:41.000Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40antv/x6
原文对照：https://npmcn.com/package/%40antv/x6/?lang=original
项目主页：https://x6.antv.antgroup.com/tutorial/about
源码仓库：https://github.com/antvis/x6

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：8.6 MB，2375 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=20\.0\.0
- 运行依赖：4 个
- 首次发布：2019-12-01T07:18:12.151Z
- 最新版本发布：2026-08-11T03:25:45.730Z
- 近 30 天下载量：425077（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：429（近 12 个月 18 个）

## 中文简介

使用 SVG 和 HTML 渲染的 JavaScript 图表库

## 安装

```sh
npm install @antv/x6
```

也可以使用：`pnpm add @antv/x6`、`yarn add @antv/x6`、`bun add @antv/x6`

## README

![](https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg) [English](https://npmcn.com/README.md) | 简体中文

# **X6：图编辑可视化引擎**

![x6 flow](https://npmcn.com/package/%40antv/x6/flow.svg)

[![NPM Package](https://img.shields.io/npm/v/@antv/x6.svg?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/@antv/x6) [![build](https://img.shields.io/github/actions/workflow/status/antvis/x6/build.yml?branch=master&style=for-the-badge&logo=github)](https://github.com/antvis/X6/actions/workflows/build.yml) [![coverage](https://img.shields.io/codecov/c/gh/antvis/x6?logo=codecov&style=for-the-badge&token=15CO54WYUV)](https://app.codecov.io/gh/antvis/X6) ![Package size](https://img.badgesize.io/https://unpkg.com/@antv/x6?compression=gzip&style=for-the-badge) [![NPM Downloads](https://img.shields.io/npm/dm/@antv/x6?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/@antv/x6) ![MIT License](https://img.shields.io/github/license/antvis/x6?style=for-the-badge) [![Language](https://img.shields.io/badge/language-TypeScript-blue.svg?style=for-the-badge)](https://www.typescriptlang.org/) [![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg?style=for-the-badge)](https://github.com/antvis/x6/pulls) [![website](https://img.shields.io/static/v1?label=&labelColor=505050&message=website&color=0076D6&style=for-the-badge&logo=google-chrome&logoColor=f5f5f5)](https://x6.antv.antgroup.com/) [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/antvis/X6)

[![antvis%2FX6 | Trendshift](https://trendshift.io/api/badge/repositories/4515)](https://trendshift.io/repositories/4515)

[官网文档](https://x6.antv.antgroup.com/tutorial/about) • [快速开始](https://x6.antv.antgroup.com/tutorial/getting-started) • [图表示例](https://x6.antv.antgroup.com/examples) • [常见问题](https://www.yuque.com/antv/x6/tox1ukbz5cw57qfy) • [Demo 模板](https://codesandbox.io/s/mo-ban-55i8dp) • [Awesome X6](https://github.com/lloydzhou/awesome-x6)

AntV `X6` 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。我们期望开发者基于 X6 可以快速构建自己需要的各种图编辑应用，让流程关系数据变得可控、可交互，以及可视化。

## ✨ 特性

X6 作为一款专业的图编辑可视化引擎，具有以下特性：

-   🌱 _极易定制_：支持使用 SVG / HTML / React / Vue / Angular 定制节点样式和交互，完备的`事件系统`，可以监听图表内发生的任何事件
-   🚀 _开箱即用_：内置 `10+` 图编辑配套扩展，如框选、对齐线、小地图等
-   🧲 _数据驱动_：基于 `MVC` 架构，用户更加专注于数据逻辑和业务逻辑
-   💯 _服务端渲染_：支持服务端渲染，且有不错的浏览器兼容性。

## 🔨 开始使用

可以通过 NPM 或 Yarn 等包管理器来安装。

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

# yarn
$ yarn add @antv/x6
```

成功安装之后，可以通过 import 导入 `Graph` 对象。

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

```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://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*3rpsRLQl7dgAAAAAQyAAAAgAemJ7AQ/fmt.avif)

## 🧑🏻‍💻 本地开发

```shell
# 安装项目依赖和初始化构建
$ pnpm install

# 启动 examples 查看效果
pnpm run start:examples
```

## 📮 贡献

感谢所有为这个项目做出贡献的人，感谢所有支持者！🙏

[![Contribution Leaderboard](https://openomy.app/svg?repo=antvis/X6&chart=bubble&latestMonth=12)](https://openomy.app/github/antvis/X6)

-   **问题反馈**：使用过程遇到的 X6 的问题，欢迎提交 Issue，并附上可以复现问题的最小案例代码。
-   **贡献指南**：如何参与到 X6 的[开发和贡献](https://npmcn.com/package/%40antv/x6/CONTRIBUTING.zh-CN.md)。
-   **想法讨论**：在 GitHub Discussion 上或者钉钉群里面讨论。

## 📄 License

[MIT](https://npmcn.com/package/%40antv/x6/LICENSE).

## 常见问题

### @antv/x6 是什么？

使用 SVG 和 HTML 渲染的 JavaScript 图表库

### 如何安装 @antv/x6？

在项目目录运行 npm install @antv/x6，或使用 pnpm add / yarn add / bun add。

### @antv/x6 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @antv/x6 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @antv/x6 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @antv/x6 可以商用吗？

@antv/x6 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @antv/x6 的下载量有多少？

根据 npm 官方下载统计，@antv/x6 在 2026/10/06 – 2026/11/04 这 30 天内被下载 425,077 次，日均约 14,169 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @antv/x6 还在维护吗？

最新版本 3\.1\.8 发布于 2026/08/11（2 个月前）；至今共发布 429 个版本，其中过去 12 个月发布了 18 个；首次发布于 2019/12/01。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。