antv g6 流程图

AntV G6 是一个基于 JavaScript 的流程图绘制工具，可以帮助用户快速绘制各种类型的流程图。使用 G6 绘制流程图的基本步骤如下：

1. 安装 G6 库

在终端中使用 npm 命令安装 G6 库：npm install @antv/g6。

2. 创建画布

使用 G6 提供的 Graph 类创建一个画布，示例代码如下：

import G6 from '@antv/g6';

const graph = new G6.Graph({
  container: 'container',
  width: 800,
  height: 500,
});

其中，container 参数指定画布所在的容器，width 和 height 参数指定画布的宽度和高度。

3. 创建节点和边

使用 G6 提供的 API 创建节点和边，示例代码如下：

graph.addNode('node1', {
  x: 100,
  y: 100,
  size: 50,
  label: 'Node 1',
});

graph.addNode('node2', {
  x: 300,
  y: 100,
  size: 50,
  label: 'Node 2',
});

graph.addEdge('edge1', {
  source: 'node1',
  target: 'node2',
});

其中，addNode 方法用于创建节点，addEdge 方法用于创建边。节点和边的属性可以通过第二个参数传入。

4. 渲染画布

使用 G6 提供的 render 方法渲染画布，示例代码如下：

graph.render();

5. 绘制节点和边的样式

使用 CSS 样式表为节点和边设置样式，示例代码如下：

.g6-node {
  fill: #fff;
  stroke: #666;
  stroke-width: 1px;
}

.g6-edge {
  stroke: #666;
  stroke-width: 1px;
}

以上就是使用 AntV G6 绘制流程图的基本步骤。除了流程图，G6 还支持绘制其他类型的图表，例如关系图、树形图等。