English | 简体中文

X6：图编辑可视化引擎

官网文档 •
快速开始 •
图表示例 •
常见问题 •
Demo 模板 •
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



`

`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,
});
`

一切顺利，你可以得到下面的简单的流程图画布。

🧑🏻‍💻 本地开发

`shell


安装项目依赖和初始化构建

$ pnpm install

启动 examples 查看效果

pnpm run start:examples
``

📮 贡献

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

- 问题反馈：使用过程遇到的 X6 的问题，欢迎提交 Issue，并附上可以复现问题的最小案例代码。
- 贡献指南：如何参与到 X6 的开发和贡献。
- 想法讨论：在 GitHub Discussion 上或者钉钉群里面讨论。

📄 License

MIT.