WorkflowNode

Casca visual de um nó de workflow ou canvas: tipo, título, descrição, estado e ações, com borda de IA girando enquanto processa.

Playground

Sessões

Gravações de onboarding

12 sessões; travam no passo de convite.

Entrevistas

Entrevistas com gestores

8 entrevistas sobre como dividem tarefas.

Usuários sintéticos

Perfis gerados a partir das fontes ligadas.

3 perfis · 12 padrões

Status

Selecionado

// Dentro de um nó customizado do React Flow
<WorkflowNode size="md" status="done" selected={selected}>
  <WorkflowNodeHeader>
    <WorkflowNodeIcon tone="ai"><Group /></WorkflowNodeIcon>
    <WorkflowNodeTitle>Usuários sintéticos</WorkflowNodeTitle>
  </WorkflowNodeHeader>
  <WorkflowNodeDescription>Perfis gerados a partir das fontes ligadas.</WorkflowNodeDescription>
  <WorkflowNodeState>3 perfis · 12 padrões</WorkflowNodeState>
</WorkflowNode>
<Handle type="target" position={Position.Left} />

Quando usar

✓Nós de um canvas de fluxo (fontes, etapas, saídas), dentro de um nó customizado do @xyflow/react
✓Etapas de um pipeline de agente mostradas como cartões ligados

Evite quando

Cartão solto numa página, sem conexões→ Card
Item de lista ou tabela→ Table ou uma lista simples

Variantes e props

sizepadrão: sm

smmdlg

sm 200px (fonte) · md 280px (etapa/insights) · lg 480px (saída com resultados).

statuspadrão: idle

idlerunningdoneerror

running gira a borda com a assinatura de IA e deixa o WorkflowNodeState com shimmer.

selected

truefalse

Borda primary. Em React Flow, passe o selected do NodeProps.

tonepadrão: neutral

neutralinfosuccesswarningai

Em WorkflowNodeIcon. info = comportamental, success = atitudinal, warning = contextual, ai = gerado pela IA.

Estados

vazio (sem dados ainda)processando (running: borda de IA girando, estado com shimmer)pronto (done)erro (borda e estado vermelhos)selecionadohover

Acessibilidade

Papel: grupo visual; o nó do React Flow cuida do foco e da seleção
Teclado: herdado do React Flow (Tab entre nós, Enter seleciona); ações do cabeçalho são botões

aria-busy enquanto processa; WorkflowNodeState anuncia processando e erro
Dê aria-label aos botões só com ícone nas ações
A borda girando respeita prefers-reduced-motion

Código

Partes: WorkflowNode, WorkflowNodeHeader, WorkflowNodeIcon, WorkflowNodeLabel, WorkflowNodeActions, WorkflowNodeTitle, WorkflowNodeDescription, WorkflowNodeContent, WorkflowNodeFooter, WorkflowNodeState

import

import { WorkflowNode, WorkflowNodeHeader, WorkflowNodeIcon, WorkflowNodeLabel } from "@/components/ui/workflow-node";

Fonte: src/components/ui/workflow-node.tsx · Resense (nós do canvas: fonte, insights, saída)

Relacionados: WorkflowEdge, Card