mailinapp
Documentation menu

Bloco Sankey

Faixas de fluxo proporcionais entre nós nomeados — linhas De, Para e Valor, por exemplo origem de tráfego → página de destino → conversão. É o formato ideal para rastrear para onde o volume vai à medida que se move por uma sequência de etapas, quando a sequência linear única de um funil simples não é suficiente para mostrar caminhos que se ramificam.

Como funciona

Diferente de todo gráfico irmão nesta família, os nós de um diagrama sankey não são autorados diretamente — não há sequer uma coluna de "nó" para preencher. Em vez disso, os nós são derivados de quaisquer rótulos que se repitam entre as colunas De e Para: digite "Visitou" como um valor De em uma linha e como um valor Para em outra, e é o mesmo nó nas duas vezes. A posição de cada nó da esquerda para a direita (em qual camada vertical ele fica) também é calculada, por meio de uma passagem de caminho mais longo sobre o grafo direcionado que suas linhas descrevem. Um nó sem fluxo de entrada começa na camada mais à esquerda, e todo outro nó fica uma camada além de seu predecessor mais a montante. Nada disso é algo que você posiciona manualmente.

O valor de cada link é uma quantidade positiva simples — um fluxo não tem uma leitura "negativa" significativa, então um valor autorado zero ou negativo é descartado no momento do agrupamento, em vez de ser plotado como uma faixa invertida ou de largura zero. Um autoloop (uma linha cujo De e Para são o mesmo rótulo) é ignorado por completo, já que um nó que flui para si mesmo não tem uma faixa significativa em um layout da esquerda para a direita. Linhas repetidas descrevendo o mesmo par De/Para são somadas, não sobrescritas — duas linhas dizendo "Indicação → Cadastrou-se" realmente significam o dobro do fluxo, diferente de uma única medição que uma edição posterior deveria substituir.

A cor de um link tem como padrão a cor do próprio nó de origem (a leitura sankey convencional "colorido pela origem"), a menos que você a substitua por linha através da célula opcional Cor do fluxo. As cores dos nós em si não são diretamente autoráveis — um nó simplesmente assume o próximo slot de cor fixo na ordem em que aparece pela primeira vez, a mesma atribuição de cor baseada em identidade que todo outro gráfico desta família usa.

Além do limite de nós ou links (12 nós, 24 links), um nó em excesso é descartado, não agrupado. Essa é uma diferença deliberada em relação a como o gráfico de pizza ou o treemap tratam o excesso. Mesclar dois pontos finais de fluxo distintos em um único nó sintético "Outros" representaria mal o que o diagrama está de fato mostrando, já que todo o propósito de um sankey é rastrear caminhos distintos, não resumir uma fatia de um todo.

Qualquer link cuja origem ou destino tenha sido descartado junto com um nó cortado também é descartado. A tabela de dados, no entanto, ainda lista toda linha que você autorou, independentemente de ela ter entrado no diagrama desenhado, incluindo fluxos que um erro cíclico de autoria (A → B → A) deixa sem desenhar, mas que continuam reais. Nada que você digitou desaparece silenciosamente de vista.

Campos configuráveis:

  • Título do gráfico — texto de cabeçalho opcional acima do gráfico.
  • Fluxos (de, para, valor) — a lista de linhas: um rótulo De, um rótulo Para, um Valor numérico, e uma substituição opcional de Cor do fluxo por linha.
  • Cor de fundo, espaçamento interno, borda e raio da borda do cartão.
  • Cor/tamanho do título e cor/tamanho da legenda — estilização de texto para o cabeçalho e o texto de legenda/tabela abaixo da imagem.

Se ainda não houver linhas de fluxo válidas autoradas — todas em branco, em autoloop, ou não positivas — o bloco pula a imagem. Ele renderiza apenas seu título e o visual do cartão, com um aviso simples "Adicione ao menos uma linha de dados de fluxo (de, para, valor) para renderizar este gráfico" em vez disso.

Exemplos

Um diagrama de jornada do usuário — Visitou → Cadastrou-se → Comprou, com uma segunda ramificação para Abandonou e uma terceira para Cancelou — torna a queda e a ramificação visíveis em uma única imagem, onde um funil forçaria tudo em uma única linha. Um fluxo de alocação orçamentária (Receita → Orçamentos de departamento → Itens de linha) dá a um resumo financeiro um rastro visual de para onde o dinheiro se move etapa por etapa. Uma equipe de suporte pode fazer fluir o volume de tickets de Canal (e-mail/chat/telefone) através de Categoria (cobrança/bug/como fazer) até Resolução (resolvido/escalado), revelando quais canais alimentam quais resultados.

Como é o fallback estático

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Signup journey</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="360"
       alt="Flow diagram: Visited to Signed up 120, Visited to Bounced 380, Signed up to Purchased 45, Signed up to Churned 75" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">From</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">To</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Value</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Visited</td>
      <td style="padding:4px 8px">Signed up</td>
      <td style="padding:4px 8px">120</td>
    </tr>
  </table>
</div>

O texto alternativo lista toda faixa de fluxo desenhada; a tabela lista toda linha autorada, incluindo qualquer uma que um limite de nós/links ou um layout cíclico tenha deixado sem desenhar.

Veja também