antvX6使用分享（绘制流程图）

小白的前端之旅

已于 2025-01-06 11:02:37 修改

阅读量1.9k

点赞数 3

文章标签：流程图

于 2024-08-22 09:57:26 首次发布

本文链接：https://blog.csdn.net/weixin_43472754/article/details/141418255

版权

首先附上官方文档：https://x6.antv.antgroup.com/tutorial/about

1.安装依赖

# npm
$ npm install @antv/x6 --save

# yarn
$ yarn add @antv/x6

2. 开始使用

1.创建画布

X6 支持 JSON 格式数据，该对象中 nodes 代表节点数据，edges 代表边数据，可以使用 attrs 属性来定制节点和边的样式（可以类比 CSS）。

<div id="container"></div>

onMounted(() => {
  const graph = new Graph({
    container: document.getElementById('container') as HTMLElement,
    width: 800,
    height: 600,
    background: {
      color: '#F2F7FA',
    },

  })
  graph.fromJSON(data) // 渲染元素
  graph.centerContent() // 居中显示
})

2. 渲染节点和边

X6 支持 JSON 格式数据，该对象中 nodes 代表节点数据，edges 代表边数据，可以使用 attrs 属性来定制节点和边的样式（可以类比 CSS）。

const data = {
  nodes: [
    {
      id: 'node1',
      shape: 'rect',
      x: 40,
      y: 40,
      width: 100,
      height: 40,
      label: 'hello',
      attrs: {
        // body 是选择器名称，选中的是 rect 元素
        body: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
          fill: '#fff',
          rx: 6,
          ry: 6,
        },
      },
    },
    {
      id: 'node2',
      shape: 'rect',
      x: 160,
      y: 180,
      width: 100,
      height: 40,
      label: 'world',
      attrs: {
        body: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
          fill: '#fff',
          rx: 6,
          ry: 6,
        },
      },
    },
  ],
  edges: [
    {
      shape: 'edge',
      source: 'node1',
      target: 'node2',
      label: 'x6',
      attrs: {
        // line 是选择器名称，选中的边的 path 元素
        line: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
        },
      },
    },
  ],
}