X6

Diagramming library that uses SVG and HTML for rendering

ChartingSVGDiagram / Flow chart
antvis/X6x6.antv.antgroup.com/en@antv/x6

README

flow

X6 是 AntV 旗下的图编辑引擎

提供简单易用的节点定制能力和开箱即用的交互组件，方便我们快速搭建流程图、DAG 图、ER 图等图应用

buildLanguage grade: JavaScriptNPM PackageNPM Downloads

MIT LicenseLanguagePRs Welcomewebsite


特性


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

兼容环境


- 现代浏览器
- 支持服务端渲染。

[[[
---------
lastlastlast

安装


  1. ```shell
  2. # npm
  3. $ npm install @antv/x6 --save

  5. # yarn
  6. $ yarn add @antv/x6
  7. ```

示例


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

  1. ```ts
  2. import { Graph } from '@antv/x6'

  4. const graph = new Graph({
  5.   container: document.getElementById('container'),
  6.   grid: true
  7. })

  9. const source = graph.addNode({
  10.   x: 300,
  11.   y: 40,
  12.   width: 80,
  13.   height: 40,
  14.   label: 'Hello',
  15. })

  17. const target = graph.addNode({
  18.   x: 420,
  19.   y: 180,
  20.   width: 80,
  21.   height: 40,
  22.   label: 'World',
  23. })

  25. graph.addEdge({
  26.   source,
  27.   target,
  28. })
  29. ```

链接


- 文档
- 示例
- 博客
- 更新日志
- 常见问题
- CodeSanbox 模板

本地开发


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

  5. # 进入到指定项目开发和调试
  6. cd packages/x6
  7. pnpm run build:watch

  9. # 启动 example 查看效果
  10. cd examples/x6-example-features
  11. pnpm run start
  12. ```

参与共建


如果希望参与到 X6 的开发中，请遵从我们的贡献指南。如果你贡献度足够活跃，你可以申请成为社区协作者。

Contributors


开源协议


该项目的代码和文档基于 MIT License 开源协议。