Muita das vezes nos deparamos em uma situação que devemos criar um diagrama ou um fluxograma, ou os dois. E algumas vezes quando não conhecemos a ferramenta correta tentamos fazer algo na mão utilizando HTML, CSS e Javascript. Além de ser trabalhoso pode ser tornar algo bem complexo dependendo do tamanho do diagrama ou fluxograma.
Hoje irei mostrar o que é e como usar o React Flow.
O React Flow é uma ferramenta muito útil e versátil que podemos utiliza-la para criar diagramas e fluxograma complexos de maneira bem simples e interativa.

A estrutura básica do React Flow consistem em Nodes e Edges, que são respectivamente Nós e Conectores. Veja logo abaixo os detalhes de cada um.

• Nodes ou Nós: São os blocos visuais que onde ficam as tarefas, dados ou os processos.
• Edges ou Conectores: São as linhas que interligam um nó a outro, representando o fluxo de informações entre eles.

Criando nós e conectores

Cada nó possui um id, posição(position) e um data que é utilizado para mostrar os dados dentro do nó. Assim também os conectores(edges) possuem suas propriedades que são o source que é o inicio do conector aqui deve ser informado o id do nó de onde o conector irá iniciar. E o target que é o destino, onde o conector terá seu fim, da mesma maneira deve ser passado o id do nó de destino.

Abaixo deixo um exemplo retirado da documentação do React Flow.

import { ReactFlow, Controls, Background } from '@xyflow/react';
import '@xyflow/react/dist/style.css';

const nodes = [
  {
    id: '1',
    position: { x: 0, y: 0 },
    data: { label: 'Hello' },
  },
];

function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow nodes={nodes}>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}

export default Flow;

O componente Controls serve para dar ao usuario a opção de manipular o zoom, tamanho de tela e travar o diagrama ou fluxograma.
O componente Background serve para deixar o background com essas bolinhas, que melhora a visualização.
É importante que o css do React Flow seja importado.

Para adicionar outro nó, basta adicionar um novo objeto no array que armazena os nós.

const nodes = [
  {
    id: '1',
    data: { label: 'Hello' },
    position: { x: 0, y: 0 },
    type: 'input',
  },
  {
    id: '2',
    data: { label: 'World' },
    position: { x: 100, y: 100 },
  },
];

E para adicionar um conector devemos criar um array que o armazenará, e em seguida adicionar como parâmetro do componente React Flow.

const edges = [{ id: '1-2', source: '1', target: '2' }];
<ReactFlow nodes={nodes} edges={edges}>
  <Background />
  <Controls />
</ReactFlow>

Além disso é possível também adicionar uma label no meio do conector.

O React Flow é muito diverso como podem ver, é possível fazer uma infinidade de coisas utilizando essa ferramenta, veja abaixo como adicionar interação ao seu fluxograma ou diagrama.

Interação

Para que isso seja possível teremos que realizar duas importações o applyNodeChanges e applyEdgeChanges, como o próprio nome fala elas aplicam mudanças aos nós e conectores. Do mesmo modo usaremos também o useState(caso não saiba o que é ou utilizar o useState clique aqui) para armazenarmos os dados de mudança.
Usaremos também o useCallback, é muito importante que seja ele pois com o useCallback ele ficara recriando cada função toda vez que ocorre um renderização, ou seja ele memoriza a função e só recria ela quando ocorre uma atualização em sua dependência. Após criarmos nossa função e passarmos as mudanças dos nós e conectores para o estado criado, agora basta adicionar as constantes criadas como parâmetro no componente ReactFlow. E assim está feito a nossa integração para que o usuário possa manipular os nós e conectores.
No exemplo abaixo tente ligar um ponto a outro.

Customização

É possível alterar o design dos nós e conectores de maneira bem simples, viu como é bem completa a ferramenta.
Abaixo deixo um exemplo de customização, no qual criamos um componente para que o usuário adicione dentro do nó, possibilitando que ele insira um texto. Então dentro desse componente, o Handle permite que os nós interajam, criando e recebendo conexões. E o position é será a conexão entre os dois nós, é aquela bolinha preta.

Por fim o React Flow é ideal para aplicativos que exigem visualizações interativas e dinâmicas, como sistemas de gerenciamento de fluxo de trabalho, diagramas de processo, ou interfaces de usuário personalizadas. Então após essa leitura espero que você saiba o que é e como usar o React Flow.

Referências: React Flow, React