Flow 流程图
Flow 是一个高性能的通用流程图/节点编辑器组件，采用混合渲染架构（SVG + Canvas + 虚拟滚动），支持 10000+ 节点。
特性
- 高性能渲染：支持 10000+ 节点，虚拟滚动 + 增量更新
- 混合渲染架构：节点层采用 Vue 组件，连线层采用 SVG，背景采用 Canvas
- 丰富的交互：节点拖拽、连线创建、框选多选、键盘快捷键
- 完整插件系统：Minimap、Controls、Grid、Snap、Export 等内置插件
- 灵活扩展：支持自定义节点、自定义连线、节点嵌套
- TypeScript 支持：完整的类型定义和泛型支持
安装
bash
npm install @yh-ui/flow基础用法
输入节点
处理节点
输出节点
基础用法
带有控制和小地图
开始
处理 A
处理 B
结束
Controls & Minimap
交互操作
- 平移视口：鼠标左键点击空白区域拖动，或使用鼠标滚轮
- 缩放：使用鼠标滚轮缩放，或
Ctrl + 滚轮 - 选择节点：点击节点，或使用 Shift + 点击进行多选
- 框选：按住 Alt/Option 键拖动框选
- 连接节点：从节点边缘的连接点拖动到另一个节点
- 删除：选中节点或连线后按 Delete 键删除
- 撤销/重做：Ctrl + Z / Ctrl + Shift + Z
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| nodes | Node[] | [] | 节点数据 |
| edges | Edge[] | [] | 连线数据 |
| modelValue | ViewportTransform | { x: 0, y: 0, zoom: 1 } | 视口变换 |
| minZoom | number | 0.1 | 最小缩放比例 |
| maxZoom | number | 5 | 最大缩放比例 |
| zoomStep | number | 0.1 | 缩放步长 |
| nodesDraggable | boolean | true | 节点是否可拖拽 |
| edgesConnectable | boolean | true | 连线是否可连接 |
| selectable | boolean | true | 是否可选中 |
| background | 'none' | 'dots' | 'grid' | 'dots' | 背景类型 |
| backgroundColor | string | - | 背景颜色 |
| gridSize | number | 15 | 网格大小 |
| snapToGrid | boolean | false | 是否对齐网格 |
| snapGrid | [number, number] | [15, 15] | 网格对齐大小 |
| readonly | boolean | false | 是否只读 |
| showControls | boolean | false | 是否显示控制栏 |
| showMinimap | boolean | false | 是否显示小地图 |
| minimapNodeColor | string | - | 小地图节点颜色 |
| showAlignmentLines | boolean | true | 是否显示对齐线 |
| snapThreshold | number | 10 | 节点吸附阈值 |
| history | boolean | true | 是否启用历史记录 |
| maxHistory | number | 50 | 最大历史记录数 |
| keyboardShortcuts | boolean | true | 是否启用键盘快捷键 |
Events
| 事件名 | 参数 | 说明 |
|---|---|---|
| update:modelValue | (value: ViewportTransform) | 视口变化时触发 |
| update:nodes | (nodes: Node[]) | 节点变化时触发 |
| update:edges | (edges: Edge[]) | 连线变化时触发 |
| nodeClick | { node: Node; nativeEvent: MouseEvent } | 节点点击 |
| nodeDblClick | { node: Node; nativeEvent: MouseEvent } | 节点双击 |
| nodeDragStart | { node: Node; nativeEvent: MouseEvent } | 节点开始拖拽 |
| nodeDrag | { node: Node; nativeEvent: MouseEvent; position: { x: number; y: number } } | 节点拖拽中 |
| nodeDragEnd | { node: Node; nativeEvent: MouseEvent } | 节点结束拖拽 |
| nodeContextMenu | { node: Node; nativeEvent: MouseEvent } | 节点右键菜单 |
| edgeClick | { edge: Edge; nativeEvent: MouseEvent } | 连线点击 |
| edgeDblClick | { edge: Edge; nativeEvent: MouseEvent } | 连线双击 |
| edgeContextMenu | { edge: Edge; nativeEvent: MouseEvent } | 连线右键菜单 |
| edgeConnect | Connection | 连线连接成功 |
| selectionChange | { selectedNodes: Node[]; selectedEdges: Edge[] } | 选择变化 |
| historyChange | { canUndo: boolean; canRedo: boolean } | 历史记录变化 |
| viewportChange | ViewportTransform | 视口变化 |
说明：若需实现「删除所选(N)」、工具栏根据选中项显隐等 UI，请监听
@selection-change，在回调中根据selectedNodes/selectedEdges更新本地状态（如选中 ID 集合），以便按钮禁用状态与计数与画布选择保持一致。