核心组件

<VueFlow>

主组件，用于渲染流程图容器。

Props

属性	类型	默认值	说明
nodes	Node[]	[]	节点数组
edges	Edge[]	[]	连线数组
nodeTypes	Record<string, Component>	-	注册自定义节点组件
edgeTypes	Record<string, Component>	-	注册自定义连线组件
fitView	boolean	false	是否自动缩放适配视图
fitViewOptions	{ padding: number }	{ padding: 0.1 }	适配视图的配置参数
defaultViewport	{ x: number, y: number, zoom: number }	{ x: 0, y: 0, zoom: 1 }	初始视图位置和缩放等级
zoomOnScroll	boolean	true	是否允许鼠标滚轮缩放
zoomOnPinch	boolean	true	是否允许触摸板捏合缩放
panOnScroll	boolean	false	是否允许滚轮平移
panOnDrag	boolean	true	是否允许拖拽平移（可设置为 [1, 2] 表示鼠标按键）
selectionKey	string	'Shift'	多选按键（'Shift', 'Ctrl', 'Meta', 'Alt' 或组合）
deleteKeyCode	string	'Delete'	删除快捷键

插槽 (Slots)

插槽名	作用域参数	说明
#node-{type}	{ node: Node }	自定义节点内容（替换 nodeTypes）
#edge-{type}	{ edge: Edge }	自定义连线内容（替换 edgeTypes）
#connection-line	{ sourceX, sourceY, targetX, targetY }	自定义连接线样式

事件

事件名	参数	触发条件
@nodes-change	(nodes: Node[])	节点变化时
@edges-change	(edges: Edge[])	连线变化时
@node-click	(event: MouseEvent, node: Node)	点击节点
@edge-click	(event: MouseEvent, edge: Edge)	点击连线
@connect	(connection: Connection)	创建新连接时
@pane-ready	(instance: VueFlow)	画布初始化完成时

---

数据类型

节点 (Node)

interface Node {
  id: string                   // 唯一ID (必填)
  position: { x: number, y: number }  // 坐标 (必填)
  type?: string                // 节点类型（默认 'default'）
  data?: Record<string, any>   // 自定义数据
  label?: string               // 显示文本
  style?: CSSProperties        // CSS样式
  class?: string               | string[]  // CSS类名
  sourcePosition?: 'left' | 'right' | 'top' | 'bottom'  // 连接点位置
  targetPosition?: 'left' | 'right' | 'top' | 'bottom'  
  hidden?: boolean             // 是否隐藏
  selected?: boolean           // 是否选中
  draggable?: boolean          // 是否可拖拽
  connectable?: boolean        // 是否可连接
}

连线 (Edge)

interface Edge {
  id?: string                  // 自动生成（可选）
  source: string              // 起始节点ID (必填)
  target: string              // 目标节点ID (必填)
  type?: string               // 连线类型（默认 'default'）
  label?: string              // 连线文本
  style?: CSSProperties       // CSS样式
  class?: string | string[]   // CSS类名
  animated?: boolean          // 是否显示动画效果
  hidden?: boolean            // 是否隐藏
  selected?: boolean          // 是否选中
}

---

实例方法（通过 ref 调用）

方法名	参数	返回值	说明
addNodes	(nodes: Node[])	Node[]	添加节点
addEdges	(edges: Edge[])	Edge[]	添加连线
getNodes	-	Node[]	获取所有节点
getEdges	-	Edge[]	获取所有连线
getNode	(id: string)	Node	根据ID获取节点
setNodes	(nodes: Node[])	void	替换全部节点
setEdges	(edges: Edge[])	void	替换全部连线
fitView	(options?: { padding: number })	void	自适应视图范围
zoomIn / zoomOut	-	void	缩放视图
project	(position: { x: number, y: number })	{ x: number, y: number }	将屏幕坐标转换为画布坐标

---

实用工具函数

import { 
  isNode, 
  isEdge,
  addEdge,
  updateEdge,
  applyNodeChanges,
  applyEdgeChanges
} from '@vue-flow/core'

函数名	说明
isNode	检查对象是否为节点 ((element: Element) => boolean)
isEdge	检查对象是否为连线 ((element: Element) => boolean)
addEdge	安全添加连线 ((edgeParams: Edge, edges: Edge[]) => Edge[])
updateEdge	更新连线 ((oldEdge: Edge, newConnection: Connection, edges: Edge[]) => Edge)

---

完整示例

<template>
  <div style="height: 500px">
    <VueFlow 
      v-model="elements"
      fit-view-on-init
      @node-click="onNodeClick"
      @connect="onConnect"
      ref="flowInstance"
    >
      <template #node-custom="props">
        <div class="custom-node">
          {{ props.data.label }}
          <button @click="deleteNode(props.id)">×</button>
        </div>
      </template>
    </VueFlow>
  </div>
</template>

<script>
import { VueFlow } from '@vue-flow/core'
import '@vue-flow/core/dist/style.css'
import '@vue-flow/core/dist/theme-default.css'

export default {
  components: { VueFlow },
  data() {
    return {
      elements: [
        { 
          id: '1', 
          type: 'custom',
          position: { x: 0, y: 0 },
          data: { label: '起始节点' }
        },
        { 
          id: '2', 
          position: { x: 200, y: 100 },
          data: { label: '目标节点' }
        }
      ]
    }
  },
  methods: {
    onNodeClick(event, node) {
      console.log('点击节点:', node)
    },
    onConnect(connection) {
      this.elements.push({
        id: `e${connection.source}-${connection.target}`,
        source: connection.source,
        target: connection.target
      })
    },
    deleteNode(id) {
      this.$refs.flowInstance.setNodes(
        this.$refs.flowInstance.getNodes().filter(n => n.id !== id)
      )
    }
  }
}
</script>

<style>
.custom-node {
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>

---

扩展功能

1. 自定义节点/连线

通过 nodeTypes 和 edgeTypes 注册自定义类型：

import CustomNode from './CustomNode.vue'

const nodeTypes = {
  custom: markRaw(CustomNode)
}

<VueFlow :node-types="nodeTypes" />

2. 交互控制

// 禁止所有交互
<VueFlow 
  :zoom-on-scroll="false"
  :pan-on-drag="false"
  :nodes-draggable="false"
  :nodes-connectable="false"
/>

3. 主题定制

/* 覆盖CSS变量 */
.vue-flow {
  --vf-node-bg: #f5f5f5;
  --vf-node-text: #333;
  --vf-connection-path: #b1b1b7;
}

---

如需更详细的使用示例，建议参考官方示例：vue-flow-examples