WorkflowEdge

Conexão entre nós em SVG puro: linha fina neutra parada, e um pulso nas cores de IA correndo da origem ao destino quando há dados passando.

Playground

Sessões

Gravações de onboarding

Fazendo resumo…

Entrevistas

Entrevistas com gestores

8 entrevistas sobre como dividem tarefas.

Usuários sintéticos

Perfis gerados a partir das fontes ligadas.

Gerando perfis…

Saída

function DataEdge(props: EdgeProps) {
  const [path] = getSmoothStepPath({ ...props, borderRadius: 16 });
  return (
    <WorkflowEdge
      id={props.id}
      path={path}
      sourceX={props.sourceX}
      sourceY={props.sourceY}
      targetX={props.targetX}
      targetY={props.targetY}
      active={gerando}
    />
  );
}

Quando usar

✓Edge customizada do @xyflow/react (passe o path de getSmoothStepPath)
✓Mostrar que a IA está processando o que vem de um nó para outro

Evite quando

Separar seções da tela→ Separator
Progresso de uma tarefa linear→ Progress

Variantes e props

active

truefalse

Liga o pulso. Com movimento reduzido, a linha só muda de cor.

delay

Segundos de atraso do pulso, para conexões vizinhas não pulsarem juntas.

path

O d do SVG. O componente não calcula rota.

Estados

parada (linha neutra)ativa (pulso de IA)ativa com movimento reduzido (linha na cor de IA, sem pulso)

Acessibilidade

Papel: decorativo (g de SVG)
Teclado: não interativo

O estado de processamento deve ser anunciado no nó (WorkflowNodeState), não na conexão

Código

import

import { WorkflowEdge } from "@/components/ui/workflow-edge";

Fonte: src/components/ui/workflow-edge.tsx · Resense (DataEdge do canvas)

Relacionados: WorkflowNode