Diagramas e Ilustrações: Explicar Como um Mecanismo Funciona

Um diagrama mostra como partes nomeadas se conectam, o que se move entre elas e que resultado essas relações produzem. Use-o quando os leitores precisarem de várias relações ao mesmo tempo, mantendo a explicação disponível como texto.

Como uma página se torna recuperável: páginas de origem passam por extração e normalização antes que suas passagens úteis alcancem um índice de respostas.

1. Páginas de origem fornecem HTML, cabeçalhos, imagens e campos estruturados.
2. Extrair e normalizar remove ruído de apresentação enquanto preserva texto, hierarquia, entidades e relacionamentos.
3. Índice de respostas armazena passagens recuperáveis que podem ser correspondidas a uma pergunta posterior.
4. A primeira seta carrega a representação da página para o processamento; a segunda carrega passagens normalizadas e pesquisáveis para o índice.

O desenho torna o fluxo visível rapidamente. A legenda e a explicação numerada transmitem o mesmo significado sem a imagem. Esse contrato de dois canais distingue um diagrama explicativo de uma ilustração decorativa.

Por que este elemento é importante

A prosa pode forçar os leitores a memorizar várias partes antes de revelar como elas se relacionam. Um diagrama externaliza esse modelo: nós mostram partes, conectores mostram relações e limites mostram escopo. É mais útil quando apenas a ordem é insuficiente. Uma frase pode dizer que um rastreador busca uma página, um analisador extrai conteúdo e um índice armazena passagens; um diagrama também pode mostrar pontos de falha, rotas paralelas e feedback. Ele reduz o esforço de reconstrução, não a necessidade de uma redação precisa.

Um diagrama também pode enganar mais rápido que a prosa. Uma seta não identificada pode significar causalidade, transferência, sequência ou associação; um laço pode falsamente implicar feedback automático. Cada relação precisa de um significado explícito e defensável.

A extraibilidade por máquina é a capacidade do software de isolar uma unidade de conteúdo sem perder seu significado. Sistemas de busca, ferramentas de tradução, leitores de tela e sistemas de recuperação de IA não podem ser esperados a reconstruir um mecanismo a partir de pixels. O reconhecimento óptico de caracteres pode recuperar etiquetas, mas não o que uma seta ou limite significa. Um título, legenda, nós e conectores estruturados e um equivalente textual visível tornam o mecanismo extraível sem visão computacional.

As regras de escrita de elementos compartilhadas definem a regra de precedência: escolha um elemento pela função que a passagem desempenha, não pelo seu título ou aparência. Esta página tem precedência para campos específicos de diagrama, limites de densidade, requisitos de equivalente textual e comportamento de acessibilidade. Se a função do conteúdo é explicar um mecanismo visualmente, use o elemento diagrama em vez de uma imagem genérica com uma legenda improvisada.

Quando usar

Use um diagrama quando a conclusão depender de ver pelo menos duas relações juntas. Usos fortes incluem um processo com ramificações ou feedback, um sistema cujos componentes trocam dados, um ciclo de vida que retorna a um estado anterior, uma cadeia causal com um fator interveniente, ou um modelo conceitual cujos limites importam. O leitor deve ser capaz de responder a uma pergunta concreta a partir do desenho, como “Onde esse processo pode falhar?” ou “Qual componente envia o registro normalizado?”

Aplique o teste da prosa primeiro: escreva o mecanismo em três a oito frases. Se não houver referência cruzada, ramificação, laço ou relação espacial, a prosa é provavelmente melhor. Um diagrama ganha seu espaço quando um equivalente textual preciso é cognitivamente caro de montar.

Aproximações são comuns:

• Use uma lista de passos para ações executáveis; setas não podem substituir pré-requisitos, verificações de sucesso ou instruções de recuperação.
• Use uma tabela de comparação para atributos repetidos entre alternativas. Uma imagem de dois eixos sem identificação esconde critérios.
• Use uma árvore de decisão para rotas escolhidas por condições explícitas. Um fluxo geral explica movimento, não uma decisão.
• Use uma captura de tela anotada para localizar controles em uma interface real. Uma redecoração perde essa evidência.
• Use um gráfico quando a escala quantitativa codifica valores. Uma seta ascendente decorativa não deve implicar crescimento medido.
• Use uma imagem inline para representar um objeto, lugar ou resultado, em vez de um mecanismo.

Não use um diagrama como decoração ou repetição emoldurada. Marque relacionamentos hipotéticos, disputados, condicionais ou simplificados tanto na imagem quanto no texto.

Onde posicionar

Posicione o diagrama após o parágrafo que introduz o mecanismo e a pergunta. Siga-o com o equivalente textual visível, depois interpretação, evidências, limitações ou ações.

Mantenha título, imagem, legenda, chave e equivalente textual em uma única região de figura. Nada pode separar a imagem de sua explicação. Coloque um equivalente mais longo diretamente após ela sob “Em texto”.

Um diagrama não pode ficar diretamente ao lado de outro diagrama de largura total, gráfico, vídeo, galeria de imagens, tabela densa ou captura de tela. Insira prosa explicativa antes do próximo elemento visual denso. Não o coloque dentro de uma célula de tabela, item de lista, acordeão, destaque, cartão clicável ou figura.

Para procedimentos, coloque uma visão geral antes da primeira ação, não entre passos acoplados. Em argumentações, coloque-o após a afirmação do mecanismo e antes das evidências. Em páginas de produto, coloque-o após a explicação da capacidade, nunca acima da resposta direta apenas para parecer técnico.

Anatomia

A anatomia descreve significado, não estilo. Sombras de caixa, estilo de ilustração, espessura de seta, raio de canto e cor de fundo pertencem ao renderizador ou à direção de arte.

1. Título: Nomeia o mecanismo ou pergunta em três a dez palavras.
2. Declaração de escopo: Define o que o diagrama inclui, exclui ou simplifica em uma frase.
3. Nó: Representa um componente, estado, ator, entrada ou resultado.
4. Etiqueta do nó: Usa uma frase nominal concreta, sem abreviação não explicada.
5. Conector: Representa uma relação declarada entre dois nós.
6. Etiqueta do conector: Nomeia essa relação com um verbo ou objeto transferido, como “envia eventos” ou “produz passagens”.
7. Marcador de direção: Mostra a direção de leitura ou transferência sem depender apenas do posicionamento.
8. Limite: Agrupa itens que compartilham propriedade, fase, ambiente ou escopo.
9. Chave: Define qualquer padrão de linha, símbolo ou cor que altera o significado.
10. Legenda: Declara a conclusão principal em vez de repetir o título.
11. Nota de fonte: Identifica a evidência ou proprietário quando o modelo é derivado de pesquisa, política ou um sistema proprietário.
12. Equivalente textual: Reafirma cada nó, conector, direção, condição, limite e exceção com significado em ordem legível.

Exemplos de design

Cada variante requer um título, legenda, equivalente textual e significados explícitos de conectores. Escolha a variante mais simples que responda à pergunta.

Fluxo de processo linear

Use três a sete estágios quando o mecanismo se move principalmente em uma direção. Identifique o que se move entre os estágios; não dependa apenas de setas. Se o leitor deve executar os estágios, acompanhe a visão geral com uma lista de passos separada.

Mapa de sistema

Use três a nove componentes quando propriedade, interfaces ou troca de dados importam mais que cronologia. Limites identificam ambientes ou equipes; linhas cruzadas sinalizam necessidade de reagrupar ou dividir a visualização.

Cadeia causal

Use para uma causa, mecanismo intermediário e resultado. Marque condições e incerteza. Setas nunca devem transformar correlação em causalidade; a prosa e as fontes devem apoiar cada afirmação causal.

Laço de ciclo de vida

Use um laço apenas quando a saída se torna uma entrada posterior. Numere os estágios e declare o gatilho de reinício; um círculo decorativo falsamente implica repetição.

Visão geral com detalhamento interno

Use um detalhamento quando um componente precisar de detalhes mas depender do contexto do sistema. Repita sua etiqueta. Mais de um detalhamento geralmente requer um diagrama separado.

Em dispositivos móveis, empilhe diagramas lineares em ordem de leitura. Um mapa de sistema pode se tornar uma visão geral simplificada mais relacionamentos numerados. Nunca exija rolagem horizontal da página ou zoom para compreensão.

Parâmetros

O modelo de conteúdo armazena o mecanismo. Coordenadas, cores, tamanhos de fonte, escolhas de ícones, roteamento de conectores e pontos de interrupção responsivos pertencem ao renderizador ou à arte-fonte.

source é obrigatório para pesquisa externa, normas, processos regulamentados ou modelos adaptados. Cada nó e conector deve aparecer no equivalente textual; a prosa pode combinar repetição.

Sintaxe e exemplos de código

Os três mapeamentos preservam os mesmos campos. Os caminhos de ativos de exemplo descrevem o contrato de produção; não devem aparecer como referências de imagem ativas até que esses arquivos existam.

Diretiva Markdown portátil

:::diagram{variant=process src="/cdn-assets/seo-playbook/examples/content-pipeline.svg" alt="Fluxo de três estágios de páginas de origem através de extração e normalização para um índice de respostas"}
## Como uma página se torna recuperável

O modelo abrange o processamento de conteúdo após uma página ter sido buscada.

::item{id=source-pages}
### Páginas de origem

Fornecem HTML, cabeçalhos, imagens e campos estruturados.
::
::item{id=extract-normalize}
### Extrair e normalizar

Preservam texto útil, hierarquia, entidades e relacionamentos.
::
::item{id=answer-index}
### Índice de respostas

Armazena passagens que podem ser correspondidas a uma pergunta.
::
::relationship{from=source-pages to=extract-normalize label="envia representação da página" kind=flow}
::relationship{from=extract-normalize to=answer-index label="produz passagens recuperáveis" kind=flow}

Passagens normalizadas alcançam o índice de respostas apenas após a estrutura útil ser preservada.

### Em texto

Páginas de origem enviam sua representação da página para extração e normalização. Esse estágio preserva texto útil, hierarquia, entidades e relacionamentos, então produz passagens recuperáveis para o índice de respostas.
:::

O primeiro título mapeia para title; o parágrafo seguinte mapeia para scope; diretivas de item definem nós; diretivas de relacionamento definem conectores; o parágrafo após eles mapeia para caption; e a seção In text mapeia para textEquivalent.

Mapeamento de shortcode Hugo

{{< diagram variant="process" src="/cdn-assets/seo-playbook/examples/content-pipeline.svg" alt="Fluxo de três estágios de páginas de origem através de extração e normalização para um índice de respostas" >}}
## Como uma página se torna recuperável
{{< diagram-node id="source-pages" label="Páginas de origem" >}}Fornece conteúdo da página.{{< /diagram-node >}}
{{< diagram-node id="extract-normalize" label="Extrair e normalizar" >}}Preserva estrutura útil.{{< /diagram-node >}}
{{< diagram-node id="answer-index" label="Índice de respostas" >}}Armazena passagens.{{< /diagram-node >}}
{{< diagram-relationship from="source-pages" to="extract-normalize" label="envia representação da página" kind="flow" >}}
{{< diagram-relationship from="extract-normalize" to="answer-index" label="produz passagens recuperáveis" kind="flow" >}}
### Em texto
Páginas de origem enviam conteúdo para extração e normalização, que produz passagens para o índice de respostas.
{{< /diagram >}}

Parâmetros nomeados são usados exclusivamente. Esta é uma especificação de adaptador portátil, não uma afirmação de que esses shortcodes estão registrados no tema atual. Até que exista um renderizador aprovado, publique uma figura semântica através do pipeline de imagem estabelecido e mantenha seu equivalente textual no conteúdo normal da página.

Bloco WordPress

<!-- wp:amicited/diagram {"variant":"process","src":"/cdn-assets/seo-playbook/examples/content-pipeline.svg","alt":"Fluxo de três estágios de páginas de origem através de extração e normalização para um índice de respostas"} -->
<figure>
  <h2>Como uma página se torna recuperável</h2>
  <img src="/cdn-assets/seo-playbook/examples/content-pipeline.svg"
       alt="Fluxo de três estágios de páginas de origem através de extração e normalização para um índice de respostas">
  <figcaption>Passagens normalizadas alcançam o índice de respostas apenas após a estrutura útil ser preservada.</figcaption>
  <div class="diagram-text-equivalent">
    <h3>Em texto</h3>
    <p>Páginas de origem enviam conteúdo para extração e normalização, que produz passagens para o índice de respostas.</p>
  </div>
</figure>
<!-- /wp:amicited/diagram -->

Armazene nós e conectores como atributos de bloco. A exportação deve retê-los e o equivalente textual; uma imagem achatada não é conteúdo portátil.

Exemplos

Bom: o desenho e a prosa fazem a mesma afirmação

A versão boa responde a uma pergunta: como uma pergunta submetida se torna uma resposta fundamentada. Quatro nós concretos seguem uma direção clara. Etiquetas de conector distinguem roteamento de recuperação e composição. Um caminho de feedback tracejado é definido na chave como revisão humana opcional, portanto não implica um laço automático. A legenda declara a conclusão, e o texto adjacente nomeia cada estágio e transferência.

Isso dá aos leitores visuais um modelo rápido enquanto o texto carrega o mesmo mecanismo e qualificação. As máquinas recebem relacionamentos nomeados sem adivinhar a partir de coordenadas.

Ruim: um emaranhado persuasivo sem significado declarado

A versão ruim coloca “IA” no centro e a rodeia com substantivos vagos como conteúdo, dados, usuários, confiança, receita e crescimento. Setas não identificadas apontam em ambas as direções, mas o leitor não pode dizer se significam causalidade, troca, sequência ou associação. A cor parece significativa mas não tem chave. A seta de crescimento implica melhoria sem dados. Etiquetas pequenas tornam-se ilegíveis em dispositivos móveis, e nenhuma prosa explica o mecanismo afirmado.

Repare escolhendo uma pergunta, removendo nós irrelevantes, nomeando conectores, separando causas de associações e adicionando escopo, legenda, equivalente textual e fontes. Se restarem apenas benefícios, escreva uma lista.

Marcação Schema e acessibilidade

Um diagrama não tem um tipo Schema.org dedicado ou elegibilidade independente para rich results. Um diagrama significativo pode preencher Article.image ou um ImageObject com URL, legenda, dimensões, criador, crédito, direitos autorais e dados de licença precisos. Não invente metadados ou um vocabulário de relacionamento; nós e conectores permanecem conteúdo visível.

Use <figure> para imagem e legenda. O texto alternativo identifica o mecanismo e a conclusão em vez de transcrevê-lo. Mire em 40–180 caracteres e evite “diagrama de”. Exemplo: “Fluxo de três estágios de páginas de origem através de extração e normalização para um índice de respostas.”

O equivalente textual visível inclui cada nó, conector, condição, gatilho de feedback, limite, chave e exceção significativos. Não o esconda em ARIA, texto de hover, metadados ou um acordeão fechado.

Combine cor, ícones, padrões, forma e posição com etiquetas de texto. Mantenha contraste, pontas de seta visíveis e uma ordem de leitura correspondente ao equivalente textual. Texto SVG real é útil, mas não substitui a prosa visível.

A 320 pixels CSS, empilhe, simplifique ou renderize uma visualização móvel a partir dos mesmos dados. Nunca remova nós, corte conectores ou altere a ordem de leitura. O texto próximo deve reter todo o significado essencial sem zoom.

Regras de escrita

Escreva e verifique o texto primeiro, depois desenhe apenas as relações que ele contém. Isso evita que o polimento visual introduza afirmações.

• Dê ao diagrama uma pergunta ou mecanismo. Não combine arquitetura, fluxo de trabalho, benefícios e roteiro em uma única tela.
• Use 3–9 nós primários, com 12 como máximo. Divida um modelo sobrecarregado em figuras de visão geral e detalhamento.
• Identifique nós com 1–6 palavras concretas. Defina abreviações no primeiro uso no texto da página e evite nomes internos de equipe que os leitores não conseguem interpretar.
• Identifique todo conector com significado com uma frase verbal ou objeto transferido de 1–6 palavras. “Envia eventos” é mais claro que “integração”.
• Mantenha a legenda em 8–30 palavras e faça-a declarar a conclusão ou relação que o leitor deve reter.
• Mantenha a declaração de escopo em uma frase. Declare exclusões ou simplificações quando omiti-las puder alterar a interpretação.
• Mantenha o equivalente textual em 50–250 palavras a menos que a precisão exija mais.
• Use um tom explicativo e neutro. Separe o que o sistema faz do que pode fazer, deveria fazer ou é hipotetizado fazer.
• Marque incerteza com palavras como “pode”, “condicional” ou “proposto”, e defina caminhos tracejados ou pontilhados na chave.
• Nunca coloque parágrafos, citações, URLs brutos, slogans promocionais, evidências precisas ou instruções completas dentro da arte. Coloque-os em texto selecionável da página.
• Nunca use ícones sem etiquetas, cor sem uma segunda dica, ou setas sem significado declarado.
• Nunca implique escala, quantidade, força causal, certeza ou crescimento medido através de tamanho ou direção a menos que a evidência e a chave suportem essa codificação.
• Nunca publique um caminho de ativo inexistente; mantenha a arte pendente como um comentário de captura com screenshotsPending = true.

Tipos de post que o utilizam

O postTypes no frontmatter é o registro de associação. Cada tipo de post listado usa o mesmo contrato de diagrama, mas com um limite diferente.

Lista de verificação de QA

• Propósito: Um mecanismo ou fluxo é mais fácil de compreender visualmente do que apenas com prosa.
• Texto primeiro: A explicação revisada antecede a arte; nenhuma relação não fundamentada foi adicionada.
• Escopo: Título e escopo tornam limites, simplificações e exclusões claros.
• Nós: Geralmente há 3–9, cada um concreto e necessário.
• Conectores: Cada um tem direção e etiqueta; estilos e cores têm uma chave.
• Afirmações: Causalidade, automação, escala, força, certeza e crescimento são mostrados apenas quando as evidências os suportam.
• Equivalente textual: O texto visível inclui cada nó, relação, condição, limite, chave e exceção.
• Legenda: Declara a conclusão em 8–30 palavras.
• Acessibilidade: Cor não é a única dica; contraste, pontas de seta, texto alternativo e ordem de leitura funcionam.
• Dispositivo móvel: O significado sobrevive a 320 pixels CSS sem rolagem em nível de página ou zoom obrigatório.
• Posicionamento: Contexto introdutório precede o diagrama; a legenda e o equivalente textual permanecem anexados; elementos visuais densos concorrentes não ficam ao lado.
• Fonte: Pesquisas, normas, processos regulamentados e modelos adaptados têm uma nota de fonte ou propriedade visível e precisa.
• Portabilidade: Todos os mapeamentos preservam título, nós, conectores, legenda e equivalente textual.
• Segurança do ativo: O arquivo existe antes de um caminho ativo ser publicado, os direitos são documentados e a arte pendente permanece um comentário SCREENSHOT.
• Precedência: O bloco é tipificado como diagrama porque seu propósito corresponde a este elemento, não porque uma imagem genérica parecia semelhante.

FAQ

O modelo da academia renderiza as cinco perguntas revisadas armazenadas no frontmatter [[faq]] desta página. Elas cobrem o limite para usar um diagrama, o equivalente textual obrigatório, o escopo do texto alternativo, os dados estruturados e os limites de nós.