https://xflow.antv.vision/docs/tutorial/intro/getting-started
Github https://github.com/antvis/xflow
XFlow 是基于 X6 图编辑引擎、面向 React 技术栈用户的应用级解决方案, 会默认安装

  • @antv/x6
  • @antv/x6-react-shape
  • @antv/layout
    • XFlow 支持 AntV 旗下的常见布局算法，与G6图布局保持一致, 会默认安装 @antv/layout
      1. yarn add @antv/xflow

XFlow组件

image.png

IProps

IProps.png

数据格式

nodes节点，和 edges边的数据

  1. {
  2.   nodes: [
  3.     {
  4.       id: "node1",
  5.       label: "Circle1",
  6.       x: 150, // x, y 坐标
  7.       y: 150,
  8.       "width": 180, // 宽高
  9.       "height": 36,
  10.       "renderKey": "DND_NDOE",
  11.       "ports": [  // 链接桩
  12.         {
  13.           "id": "node1-input-1",
  14.           "type": "input",
  15.           "group": "top",
  16.           "tooltip": "输入桩",
  17.           "connected": true // 是否链接
  18.         },
  19.         {
  20.           "id": "node1-output-1",
  21.           "type": "output",
  22.           "group": "bottom",
  23.           "tooltip": "输出桩"
  24.         }
  25.       ],
  26.     }
  27.   ],
  28.   edges: [
  29.     {
  30.       "id": "9c499f84-9cff-4ac5-bd04-6d284e5eafe1",
  31.       "source": "node1",
  32.       "target": "node2",
  33.       "sourcePortId": "node1-output-1",
  34.       "targetPortId": "node2-input-1",
  35.       "connector": {
  36.         "name": "rounded"
  37.       },
  38.       "router": {
  39.         "name": "manhattan"
  40.       },
  41.       "sourcePort": "node1-output-1",
  42.       "targetPort": "node2-input-1"
  43.     },
  44.   ]
  45. }

ports链接桩

https://x6.antv.vision/zh/docs/tutorial/basic/port/#gatsby-focus-wrapper