Use isto quando a lição é sobre uma estrutura — e a forma mais rápida de ensiná-la é desenhar a coisa toda em uma única folha rotulada. Aqui: a anatomia de uma requisição HTTP.
Exemplar copiável. Leve o bloco <section id="picture"> para uma lição construída a partir de assets/lesson-template.html — ela já compartilha estes design tokens e os padrões .svgfig / .tech-toggle.
Toda vez que seu navegador pede algo a um servidor — uma página, uma imagem, um login — ele envia uma pequena requisição em texto puro. São apenas algumas linhas de texto, em uma ordem fixa, que dizem o que você quer, onde isso fica, um pouco de contexto extra sobre você e, às vezes, alguns dados que você está entregando.
Pense nisso como uma encomenda postada. A etiqueta de envio diz a ação e o endereço (o método e a URL). A declaração alfandegária e o remetente são os cabeçalhos. O que você lacrou dentro da caixa é o corpo. O correio (o servidor) lê a etiqueta, olha dentro se necessário e devolve uma resposta.
As quatro partes de uma requisição real, desenhadas de uma vez com linhas de chamada. Toque em uma parte na legenda para focá-la.
Nenhuma parte selecionada não escurece nada — escolha uma para destacá-la, ou “Mostrar tudo” para reiniciar.
Aquele painel escuro é uma mensagem HTTP/1.1 fiel, byte a byte. A primeira linha é a linha de requisição: METHOD SP request-target SP HTTP-version CRLF. Cada cabeçalho é field-name ":" OWS field-value CRLF. Um CRLF isolado (a “linha em branco” tracejada) encerra o bloco de cabeçalhos; tudo depois dele é o corpo da mensagem.
O servidor lê exatamente Content-Length bytes como corpo — aqui 42, o tamanho em bytes do JSON. Erre isso e o parser ou trunca sua carga útil ou trava esperando por bytes que nunca chegam. (Transfer-encoding chunked ou o enquadramento do HTTP/2 substituem essa contagem, mas as quatro partes conceituais permanecem idênticas.)
GET e HEAD são seguros e idempotentes (sem efeitos colaterais); POST não é nenhum dos dois — enviá-lo duas vezes pode criar dois pedidos. É exatamente essa distinção que faz a lógica de retry e o cache tratarem os métodos de forma diferente.
Recorra a um grande SVG anotado quando a coisa que você ensina tem partes nomeadas em um arranjo fixo — uma requisição, um formato de arquivo, um pacote de dados, um layout de UI, um circuito. Um muro de texto obriga o leitor a segurar a forma na cabeça; a folha mostra a forma e deixa as palavras apontarem para ela.
Pense em um diagrama de vista explodida de um manual de móveis: cada parafuso e painel é desenhado no lugar, com uma linha até seu nome. Você não lê — você vê onde cada peça vai.
Desenhe o assunto uma vez como âncora visual (à esquerda), coloque os rótulos à direita com cards <rect> + <text> e conecte cada um com uma <line marker-end="url(#arw)"> usando uma única ponta de seta <marker> compartilhada. Agrupe cada chamada em um <g class="callout" data-part="…"> para que o JS possa destacar uma parte escurecendo as demais — isso transforma uma figura estática em um tour guiado.
Dê ao <svg> um role="img" e um aria-label que leia o diagrama inteiro como uma frase, para que quem usa leitor de tela receba o mesmo conteúdo que o leitor vidente vê. Mantenha o tipo entre 11–15px, use preenchimentos em hex (variáveis CSS não resolvem em atributos de apresentação do SVG) e respeite prefers-reduced-motion.