简体中文 | [English](/README.en-us.md)
官网文档 • 快速开始 • 图表示例 • 常见问题 • 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
# 启动 example 查看效果
cd examples
pnpm run start
```
## 📮 贡献
感谢所有为这个项目做出贡献的人，感谢所有支持者！🙏