Data Flow Edge

DataFlowEdge is a high-level visualization edge built into yh-flow, designed for AI workflow orchestration and real-time data pipelines. Set flowStatus and flowEffect inside edge.data to get particles, glow, pulse, or wave animations that intuitively convey data flow status.

Quick Start

Two steps: register the component → set status inside edge.data

// Step 1: Register as a custom edge type
import { markRaw } from 'vue'
import { DataFlowEdge } from '@yh-ui/flow'

const edgeTypes = { dataflow: markRaw(DataFlowEdge) }

// Step 2: Set flowStatus / flowEffect inside edge.data
const edges = ref([
  {
    id: 'e1',
    source: 'node-a',
    target: 'node-b',
    type: 'dataflow', // matches the registered key
    label: 'processing',
    data: {
      flowStatus: 'processing', // idle | processing | success | error | warning
      flowEffect: 'particles' // particles | glow | pulse | wave | none
    }
  }
])

IMPORTANT

flowStatus, flowEffect, and other config options must be placed inside edge.data, NOT as top-level edge fields. The component automatically reads them from edge.data.

5 Status Preview

Source A

Source B

Source C

Source D

Aggregator

processing / success / error / warning / idle

Dynamic Status & Effect Switching

StatusEffect✨ Particles💡 Glow💓 Pulse〰️ Wave— None

Node A

Node B

Node C

Node D

Switch status and effect at runtime

Status Reference

flowStatus	Color	Animation	Typical Use Case
idle	Gray	None	Static connection, standby
processing	Purple	Breathing	Data transferring, API in progress
success	Green	Steady glow	Transfer complete, node succeeded
error	Red	Fast flash	Transfer failed, node error
warning	Orange	Slow pulse	Timeout alert, data anomaly

Effect Reference

flowEffect	Description	Best Status Pairing
particles	Glowing particles travel along the curve	processing
glow	Continuous glowing halo	success
pulse	Brightness heartbeat flicker	error / warning
wave	Flowing dashed-line animation	processing / general
none	No animation (color still changes with status)	All

API

edge.data Config Fields

These fields must be placed inside edge.data

Field	Type	Default	Description
flowStatus	DataFlowStatus	'idle'	Status, controls color and CSS animation
flowEffect	DataFlowEffect	'particles'	Visual effect type
glowIntensity	number	8	Glow blur intensity (0–20)
particleCount	number	3	Number of particles (1–10)
animationDuration	number	2	Particle / pulse animation cycle in seconds

Standard Edge Fields

Field	Type	Description
type	string	Set to the registered key, e.g. 'dataflow'
label	string	Center label text on the edge
animated	boolean	true shows dashed-flow animation in idle status
selected	boolean	Highlighted selected style

Type Definitions

type DataFlowStatus = 'idle' | 'processing' | 'success' | 'error' | 'warning'
type DataFlowEffect = 'particles' | 'glow' | 'pulse' | 'wave' | 'none'

Register the Edge Type

import { markRaw } from 'vue'
import { DataFlowEdge } from '@yh-ui/flow'

const edgeTypes = {
  dataflow: markRaw(DataFlowEdge)
}

TIP

Define edges as a computed that maps runtime state (e.g., from a Pinia store) into edge.data, to achieve real-time AI workflow status visualization.