English | 简体中文
X6：图编辑可视化引擎
官网文档 • 快速开始 • 图表示例 • 常见问题 • Demo 模板 • Awesome X6
AntV X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。我们期望开发者基于 X6 可以快速构建自己需要的各种图编辑应用，让流程关系数据变得可控、可交互，以及可视化。
✨ 特性
X6 作为一款专业的图编辑可视化引擎，具有以下特性：
- 🌱 极易定制：支持使用 SVG / HTML / React / Vue / Angular 定制节点样式和交互，完备的
事件系统，可以监听图表内发生的任何事件 - 🚀 开箱即用：内置
10+图编辑配套扩展，如框选、对齐线、小地图等 - 🧲 数据驱动：基于
MVC架构，用户更加专注于数据逻辑和业务逻辑 - 💯 服务端渲染：支持服务端渲染，且有不错的浏览器兼容性。
🔨 开始使用
可以通过 NPM 或 Yarn 等包管理器来安装。
# npm
$ npm install @antv/x6 --save
# yarn
$ yarn add @antv/x6
成功安装之后，可以通过 import 导入 Graph 对象。
<div id="container" style="width: 600px; height: 400px"></div>
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,
});
一切顺利，你可以得到下面的简单的流程图画布。
🧑🏻💻 本地开发
# 安装项目依赖和初始化构建
$ pnpm install
# 启动 examples 查看效果
pnpm run start:examples
📮 贡献
感谢所有为这个项目做出贡献的人，感谢所有支持者！🙏
- 问题反馈：使用过程遇到的 X6 的问题，欢迎提交 Issue，并附上可以复现问题的最小案例代码。
- 贡献指南：如何参与到 X6 的开发和贡献。
- 想法讨论：在 GitHub Discussion 上或者钉钉群里面讨论。
📄 License
MIT.