基于 SVG 和 HTML 渲染的 JavaScript 图编辑与可视化引擎，适用于 DAG、ER 图和流程图等场景。 AntV X6 是一个用 TypeScript 编写的图编辑引擎，使用 SVG 和 HTML 渲染节点与连线，适合快速搭建 DAG 图、ER 图、流程图、血缘图等交互式图形应用，无需从零开发基础能力。

X6 可以免费使用吗？用的什么许可证？

X6 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

X6 还在维护吗？

活跃维护中。X6 最近一次提交是在 2026年10月23日。

X6 适合用来做什么？

在 Web 应用中构建 DAG 或工作流编辑器。开发实体关系（ER）图工具。实现流程图或数据血缘图的可视化。为 React、Vue 或 Angular 前端添加交互式图形编辑能力。

X6 怎么安装和运行？

使用 npm 安装软件包: npm install @antv/x6 --save 导入 Graph 并在容器元素中创建画布向画布添加节点和边

在哪里获取 X6？

源代码和安装说明在 GitHub 上：https://github.com/antvis/X6

antvis/X6

基于 SVG 和 HTML 渲染的 JavaScript 图编辑与可视化引擎，适用于 DAG、ER 图和流程图等场景。

在 GitHub 查看官网

Star: 6,752
Fork: 1,895
未关闭 Issue: 156
最近提交: 15天前

这是什么？

AntV X6 是一个用 TypeScript 编写的图编辑引擎，使用 SVG 和 HTML 渲染节点与连线，适合快速搭建 DAG 图、ER 图、流程图、血缘图等交互式图形应用，无需从零开发基础能力。

节点样式和交互既可以直接用 SVG 或 HTML 自定义，也可以结合 React、Vue、Angular 实现。库采用数据驱动的 MVC 架构，业务代码可以专注于数据与业务逻辑，同时提供覆盖图内各类事件的事件系统。

开箱即用的内置扩展超过十个，包括框选、对齐线、小地图等功能。项目通过 npm 以 @antv/x6 包的形式安装，并支持服务端渲染。

核心功能

01使用 SVG 和 HTML 渲染节点与连线。
02可通过 SVG、HTML、React、Vue 或 Angular 自定义节点样式与交互。
03内置框选、对齐线、小地图等十余种编辑扩展。
04采用数据驱动的 MVC 架构，并提供完善的事件系统。
05支持服务端渲染。

适用场景

在 Web 应用中构建 DAG 或工作流编辑器。
开发实体关系（ER）图工具。
实现流程图或数据血缘图的可视化。
为 React、Vue 或 Angular 前端添加交互式图形编辑能力。

快速上手

1
使用 npm 安装软件包
npm install @antv/x6 --save
2
导入 Graph 并在容器元素中创建画布
3
向画布添加节点和边

收录于专题

图表、示意图与动画可视化工具数据科学课程与工具

常见问题

X6 是什么？: 基于 SVG 和 HTML 渲染的 JavaScript 图编辑与可视化引擎，适用于 DAG、ER 图和流程图等场景。 AntV X6 是一个用 TypeScript 编写的图编辑引擎，使用 SVG 和 HTML 渲染节点与连线，适合快速搭建 DAG 图、ER 图、流程图、血缘图等交互式图形应用，无需从零开发基础能力。
X6 可以免费使用吗？用的什么许可证？: X6 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
X6 还在维护吗？: 活跃维护中。X6 最近一次提交是在 2026年10月23日。
X6 适合用来做什么？: 在 Web 应用中构建 DAG 或工作流编辑器。开发实体关系（ER）图工具。实现流程图或数据血缘图的可视化。为 React、Vue 或 Angular 前端添加交互式图形编辑能力。
X6 怎么安装和运行？: 使用 npm 安装软件包: npm install @antv/x6 --save 导入 Graph 并在容器元素中创建画布向画布添加节点和边
在哪里获取 X6？: 源代码和安装说明在 GitHub 上：https://github.com/antvis/X6

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。