Diagramas e ilustraciones: Explica cómo funciona un mecanismo

Un diagrama muestra cómo se conectan las partes nombradas, qué se mueve entre ellas y qué resultado producen esas relaciones. Úsalo cuando los lectores necesiten varias relaciones a la vez, manteniendo la explicación disponible como texto.

Cómo una página se vuelve recuperable: las páginas fuente pasan por extracción y normalización antes de que sus pasajes útiles lleguen a un índice de respuestas.

1. Páginas fuente proporcionan HTML, encabezados, imágenes y campos estructurados.
2. Extraer y normalizar elimina el ruido de presentación mientras preserva texto, jerarquía, entidades y relaciones.
3. Índice de respuestas almacena pasajes recuperables que pueden coincidir con una pregunta posterior.
4. La primera flecha lleva la representación de la página al procesamiento; la segunda lleva pasajes normalizados y buscables al índice.

El dibujo hace visible el flujo de un vistazo. El título y la explicación numerada transmiten el mismo significado sin la imagen. Ese contrato de doble canal distingue un diagrama explicativo de una ilustración decorativa.

Por qué este elemento es importante

La prosa puede obligar a los lectores a recordar varias partes antes de revelar cómo se relacionan. Un diagrama externaliza ese modelo: los nodos muestran las partes, los conectores muestran las relaciones y los límites muestran el alcance. Es más útil cuando solo el orden no es suficiente. Una oración puede decir que un rastreador obtiene una página, un analizador extrae contenido y un índice almacena pasajes; un diagrama también puede mostrar puntos de fallo, rutas paralelas y retroalimentación. Reduce el esfuerzo de reconstrucción, no la necesidad de una redacción precisa.

Un diagrama también puede engañar más rápido que la prosa. Una flecha sin etiqueta puede significar causalidad, transferencia, secuencia o asociación; un bucle puede implicar falsamente retroalimentación automática. Cada relación necesita un significado explícito y defendible.

La extraíbilidad por máquina es la capacidad del software de aislar una unidad de contenido sin perder su significado. No se puede esperar que los sistemas de búsqueda, herramientas de traducción, lectores de pantalla y sistemas de recuperación de IA reconstruyan un mecanismo a partir de píxeles. El reconocimiento óptico de caracteres puede recuperar etiquetas, pero no lo que significa una flecha o un límite. Un título, un pie de foto, nodos y conectores estructurados, y un equivalente textual visible hacen que el mecanismo sea extraíble sin necesidad de visión artificial.

Las reglas de redacción de elementos compartidas establecen la regla de precedencia: elige un elemento por la función que realiza el pasaje, no por su encabezado o apariencia. Esta página tiene prioridad para los campos específicos de diagramas, límites de densidad, requisitos de equivalente textual y comportamiento de accesibilidad. Si la función del contenido es explicar un mecanismo visualmente, usa el elemento diagrama en lugar de una imagen genérica con un título improvisado.

Cuándo usarlo

Usa un diagrama cuando la conclusión dependa de ver al menos dos relaciones juntas. Los usos sólidos incluyen un proceso con ramificaciones o retroalimentación, un sistema cuyos componentes intercambian datos, un ciclo de vida que regresa a un estado anterior, una cadena causal con un factor interviniente, o un modelo conceptual cuyos límites importan. El lector debería poder responder una pregunta concreta a partir del dibujo, como «¿Dónde puede fallar este proceso?» o «¿Qué componente envía el registro normalizado?».

Aplica primero la prueba de la prosa: escribe el mecanismo en tres a ocho oraciones. Si no tiene referencias cruzadas, ramificaciones, bucles o relaciones espaciales, probablemente la prosa sea mejor. Un diagrama se gana su espacio cuando un equivalente textual preciso es cognitivamente costoso de ensamblar.

Los casos límite son comunes:

• Usa una lista de pasos para acciones ejecutables; las flechas no pueden reemplazar los requisitos previos, las comprobaciones de éxito ni las instrucciones de recuperación.
• Usa una tabla comparativa para atributos repetidos entre alternativas. Una imagen sin etiquetas en dos ejes oculta los criterios.
• Usa un árbol de decisiones para rutas elegidas por condiciones explícitas. Un flujo general explica movimiento, no una decisión.
• Usa una captura de pantalla anotada para localizar controles en una interfaz real. Un redibujo pierde esa evidencia.
• Usa un gráfico cuando la escala cuantitativa codifique valores. Una flecha ascendente decorativa no debe implicar crecimiento medido.
• Usa una imagen en línea para representar un objeto, lugar o resultado en lugar de un mecanismo.

No uses un diagrama como decoración o repetición enmarcada. Marca las relaciones hipotéticas, disputadas, condicionales o simplificadas tanto en la imagen como en el texto.

Dónde colocarlo

Coloca el diagrama después del párrafo que introduce el mecanismo y la pregunta. Acompáñalo con el equivalente textual visible, luego interpretación, evidencia, limitaciones o acciones.

Mantén título, imagen, pie de foto, leyenda y equivalente textual en una misma región de figura. Nada puede separar la imagen de su explicación. Coloca un equivalente más largo justo después, bajo la sección «En texto».

Un diagrama no debe situarse directamente al lado de otro diagrama de ancho completo, gráfico, video, galería de imágenes, tabla densa o captura de pantalla. Inserta prosa explicativa antes del siguiente elemento visual denso. No lo coloques dentro de una celda de tabla, elemento de lista, acordeón, llamada, tarjeta cliqueable o figura.

Para procedimientos, coloca una visión general antes de la primera acción, no entre pasos acoplados. En argumentos, colócalo después de la afirmación del mecanismo y antes de la evidencia. En páginas de producto, colócalo después de la explicación de la capacidad, nunca encima de la respuesta directa solo para aparentar ser técnico.

Anatomía

La anatomía describe el significado, no el estilo. Las sombras de cajas, el estilo de ilustración, el grosor de las flechas, el radio de las esquinas y el color de fondo pertenecen al renderizador o a la dirección de arte.

1. Título: Nombra el mecanismo o la pregunta en tres a diez palabras.
2. Declaración de alcance: Define qué incluye, excluye o simplifica el diagrama en una oración.
3. Nodo: Representa un componente, estado, actor, entrada o resultado.
4. Etiqueta de nodo: Usa una frase nominal concreta, no una abreviatura sin explicación.
5. Conector: Representa una relación declarada entre dos nodos.
6. Etiqueta de conector: Nombra esa relación con un verbo u objeto transferido, como «envía eventos» o «produce pasajes».
7. Marcador de dirección: Muestra la dirección de lectura o transferencia sin depender solo de la ubicación.
8. Límite: Agrupa elementos que comparten propiedad, fase, entorno o alcance.
9. Leyenda: Define cualquier patrón de línea, símbolo o color que cambie el significado.
10. Pie de foto: Indica la conclusión principal en lugar de repetir el título.
11. Nota de fuente: Identifica la evidencia o el propietario cuando el modelo se deriva de investigación, políticas o un sistema propietario.
12. Equivalente textual: Reexpresa cada nodo, conector, dirección, condición, límite y excepción con significado en orden legible.

Ejemplos de diseño

Cada variante requiere un título, pie de foto, equivalente textual y significados de conector explícitos. Elige la variante más simple que responda a la pregunta.

Flujo de proceso lineal

Usa de tres a siete etapas cuando el mecanismo se mueva principalmente en una dirección. Etiqueta lo que se mueve entre etapas; no te bases solo en las flechas. Si el lector debe ejecutar las etapas, combina la visión general con una lista de pasos separada.

Mapa del sistema

Usa de tres a nueve componentes cuando la propiedad, las interfaces o el intercambio de datos importen más que la cronología. Los límites identifican entornos o equipos; las líneas que se cruzan señalan la necesidad de reagrupar o dividir la vista.

Cadena causal

Úsalo para una causa, mecanismo intermedio y resultado. Marca las condiciones y la incertidumbre. Las flechas nunca deben convertir correlación en causalidad; la prosa y las fuentes deben respaldar cada afirmación causal.

Bucle de ciclo de vida

Usa un bucle solo cuando la salida se convierta en una entrada posterior. Numera las etapas e indica el desencadenante de reinicio; un círculo decorativo implica falsamente repetición.

Visión general con recuadro de detalle

Usa un recuadro cuando un componente necesite detalle pero dependa del contexto del sistema. Repite su etiqueta. Más de un recuadro generalmente necesita un diagrama separado.

En móvil, apila los diagramas lineales en orden de lectura. Un mapa del sistema puede convertirse en una visión general simplificada más relaciones numeradas. Nunca requieras desplazamiento horizontal o zoom para entender el significado.

Parámetros

El modelo de contenido almacena el mecanismo. Las coordenadas, colores, tamaños de fuente, elecciones de iconos, enrutamiento de conectores y puntos de interrupción responsivos pertenecen al renderizador o a la ilustración fuente.

source es obligatorio para investigación externa, estándares, procesos regulados o modelos adaptados. Cada nodo y conector debe aparecer en el equivalente textual; la prosa puede combinar repetición.

Sintaxis y ejemplos de código

Los tres mapeos preservan los mismos campos. Las rutas de activos de ejemplo describen el contrato de producción; no deben aparecer como referencias de imagen activas hasta que esos archivos existan.

Directiva portátil de Markdown

:::diagram{variant=process src="/cdn-assets/seo-playbook/examples/content-pipeline.svg" alt="Flujo de tres etapas desde páginas fuente a través de extracción y normalización hasta un índice de respuestas"}
## Cómo una página se vuelve recuperable

El modelo cubre el procesamiento de contenido después de que una página ha sido obtenida.

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

Proporcionan HTML, encabezados, imágenes y campos estructurados.
::
::item{id=extract-normalize}
### Extraer y normalizar

Preservan texto útil, jerarquía, entidades y relaciones.
::
::item{id=answer-index}
### Índice de respuestas

Almacena pasajes que pueden coincidir con una pregunta.
::
::relationship{from=source-pages to=extract-normalize label="envía representación de página" kind=flow}
::relationship{from=extract-normalize to=answer-index label="produce pasajes recuperables" kind=flow}

Los pasajes normalizados llegan al índice de respuestas solo después de que se preserva la estructura útil.

### En texto

Las páginas fuente envían su representación de página a extracción y normalización. Esa etapa preserva texto útil, jerarquía, entidades y relaciones, luego produce pasajes recuperables para el índice de respuestas.
:::

El primer encabezado se asigna a title; el siguiente párrafo se asigna a scope; las directivas de elemento definen nodos; las directivas de relación definen conectores; el párrafo después de ellas se asigna a caption; y la sección In text se asigna a textEquivalent.

Mapeo de shortcode de Hugo

{{< diagram variant="process" src="/cdn-assets/seo-playbook/examples/content-pipeline.svg" alt="Flujo de tres etapas desde páginas fuente a través de extracción y normalización hasta un índice de respuestas" >}}
## Cómo una página se vuelve recuperable
{{< diagram-node id="source-pages" label="Páginas fuente" >}}Proporciona contenido de página.{{< /diagram-node >}}
{{< diagram-node id="extract-normalize" label="Extraer y normalizar" >}}Preserva estructura útil.{{< /diagram-node >}}
{{< diagram-node id="answer-index" label="Índice de respuestas" >}}Almacena pasajes.{{< /diagram-node >}}
{{< diagram-relationship from="source-pages" to="extract-normalize" label="envía representación de página" kind="flow" >}}
{{< diagram-relationship from="extract-normalize" to="answer-index" label="produce pasajes recuperables" kind="flow" >}}
### En texto
Las páginas fuente envían contenido para extracción y normalización, que produce pasajes para el índice de respuestas.
{{< /diagram >}}

Los parámetros nombrados se usan exclusivamente. Esta es una especificación de adaptador portátil, no una afirmación de que estos shortcodes estén registrados en el tema actual. Hasta que exista un renderizador aprobado, publica una figura semántica a través del pipeline de imágenes establecido y mantén su equivalente textual en el contenido normal de la página.

Bloque de WordPress

<!-- wp:amicited/diagram {"variant":"process","src":"/cdn-assets/seo-playbook/examples/content-pipeline.svg","alt":"Flujo de tres etapas desde páginas fuente a través de extracción y normalización hasta un índice de respuestas"} -->
<figure>
  <h2>Cómo una página se vuelve recuperable</h2>
  <img src="/cdn-assets/seo-playbook/examples/content-pipeline.svg"
       alt="Flujo de tres etapas desde páginas fuente a través de extracción y normalización hasta un índice de respuestas">
  <figcaption>Los pasajes normalizados llegan al índice de respuestas solo después de que se preserva la estructura útil.</figcaption>
  <div class="diagram-text-equivalent">
    <h3>En texto</h3>
    <p>Las páginas fuente envían contenido para extracción y normalización, que produce pasajes para el índice de respuestas.</p>
  </div>
</figure>
<!-- /wp:amicited/diagram -->

Almacena nodos y conectores como atributos del bloque. La exportación debe retenerlos junto con el equivalente textual; una imagen plana no es contenido portátil.

Ejemplos

Bueno: el dibujo y la prosa plantean la misma afirmación

La versión buena responde a una pregunta: cómo una consulta enviada se convierte en una respuesta fundamentada. Cuatro nodos concretos siguen una dirección clara. Las etiquetas de los conectores distinguen el enrutamiento de la recuperación y la composición. Una ruta de retroalimentación discontinua se define en la leyenda como revisión humana opcional, por lo que no implica un bucle automático. El pie de foto indica la conclusión, y el texto adyacente nombra cada etapa y transferencia.

Esto brinda a los lectores visuales un modelo rápido mientras el texto transmite el mismo mecanismo y matiz. Las máquinas reciben relaciones nombradas sin tener que adivinarlas a partir de coordenadas.

Malo: una maraña persuasiva sin significado declarado

La versión mala coloca «IA» en el centro y lo rodea de sustantivos vagos como contenido, datos, usuarios, confianza, ingresos y crecimiento. Flechas sin etiqueta apuntan en ambas direcciones, pero el lector no puede distinguir si significan causalidad, intercambio, secuencia o asociación. El color parece tener significado pero no tiene leyenda. La flecha de crecimiento implica mejora sin datos. Las etiquetas pequeñas se vuelven ilegibles en móvil, y ninguna prosa explica el mecanismo afirmado.

Repáralo eligiendo una pregunta, eliminando nodos irrelevantes, nombrando conectores, separando causas de asociaciones, y añadiendo alcance, pie de foto, equivalente textual y fuentes. Si solo quedan beneficios, escribe una lista.

Marcado Schema y accesibilidad

Un diagrama no tiene un tipo Schema.org dedicado ni elegibilidad independiente para resultados enriquecidos. Un diagrama significativo puede poblar Article.image o un ImageObject con URL, título, dimensiones, creador, crédito, copyright y datos de licencia precisos. No inventes metadatos ni un vocabulario de relaciones; los nodos y conectores siguen siendo contenido visible.

Usa <figure> para la imagen y el pie de foto. El texto alternativo identifica el mecanismo y la conclusión en lugar de transcribirlos. Apunta a 40–180 caracteres y evita «diagrama de». Ejemplo: «Flujo de tres etapas desde páginas fuente a través de extracción y normalización hasta un índice de respuestas».

El equivalente textual visible incluye cada nodo, conector, condición, desencadenante de retroalimentación, límite, leyenda y excepción significativos. No lo ocultes en ARIA, texto flotante, metadatos o un acordeón cerrado.

Combina color, iconos, patrones, forma y posición con etiquetas de texto. Mantén el contraste, las puntas de flecha visibles y un orden de lectura que coincida con el equivalente textual. El texto SVG real es útil, pero no reemplaza la prosa visible.

A 320 píxeles CSS, apila, simplifica o renderiza una vista móvil desde los mismos datos. Nunca elimines nodos, recortes conectores ni cambies el orden de lectura. El texto cercano debe retener todo el significado esencial sin necesidad de zoom.

Reglas de redacción

Redacta y verifica primero el texto, luego dibuja solo las relaciones que contiene. Esto evita que el pulido visual introduzca afirmaciones.

• Dale al diagrama una sola pregunta o mecanismo. No combines arquitectura, flujo de trabajo, beneficios y hoja de ruta en un solo lienzo.
• Usa de 3 a 9 nodos principales, con 12 como máximo. Divide un modelo sobrecargado en figuras de visión general y detalle.
• Etiqueta los nodos con 1 a 6 palabras concretas. Define las abreviaturas en el primer uso dentro del texto de la página y evita nombres internos de equipo que los lectores no puedan interpretar.
• Etiqueta cada conector con significado usando una frase verbal u objeto transferido de 1 a 6 palabras. «Envía eventos» es más claro que «integración».
• Mantén el pie de foto entre 8 y 30 palabras y haz que exprese la conclusión o relación que el lector debe retener.
• Mantén la declaración de alcance en una oración. Indica exclusiones o simplificaciones cuando omitirlas pueda cambiar la interpretación.
• Mantén el equivalente textual entre 50 y 250 palabras, a menos que la precisión requiera más.
• Usa un tono explicativo y neutral. Separa lo que el sistema hace de lo que puede hacer, debería hacer o se hipotetiza que hace.
• Marca la incertidumbre con palabras como «puede», «condicional» o «propuesto», y define las rutas discontinuas o punteadas en la leyenda.
• Nunca coloques párrafos, citas, URL sin formato, lemas promocionales, evidencia precisa o instrucciones completas dentro de la ilustración. Colócalos en texto seleccionable de la página.
• Nunca uses iconos sin etiquetas, color sin una segunda señal, o flechas sin significado declarado.
• Nunca impliques escala, cantidad, fuerza causal, certeza o crecimiento medido a través del tamaño o la dirección a menos que la evidencia y la leyenda respalden esa codificación.
• Nunca publiques una ruta de activo inexistente; mantén las ilustraciones pendientes como un comentario de captura con screenshotsPending = true.

Tipos de publicación que lo usan

El postTypes del front matter es el registro de unión. Cada tipo de publicación listado usa el mismo contrato de diagrama pero con un umbral diferente.

Lista de verificación de control de calidad

• Propósito: Un mecanismo o flujo es más fácil de entender visualmente que solo con prosa.
• Texto primero: La explicación revisada es anterior a la ilustración; no se añadió ninguna relación no respaldada.
• Alcance: El título y el alcance hacen explícitos los límites, simplificaciones y exclusiones.
• Nodos: Generalmente hay de 3 a 9, cada uno concreto y necesario.
• Conectores: Cada uno tiene dirección y etiqueta; los estilos y colores tienen una leyenda.
• Afirmaciones: La causalidad, automatización, escala, fuerza, certeza y crecimiento se muestran solo cuando la evidencia los respalda.
• Equivalente textual: El texto visible incluye cada nodo, relación, condición, límite, leyenda y excepción.
• Pie de foto: Indica la conclusión en 8 a 30 palabras.
• Accesibilidad: El color no es la única señal; el contraste, las puntas de flecha, el texto alternativo y el orden de lectura funcionan.
• Móvil: El significado se mantiene a 320 píxeles CSS sin desplazamiento a nivel de página ni zoom requerido.
• Ubicación: El contexto introductorio precede al diagrama; el pie de foto y el equivalente textual permanecen adjuntos; los elementos visuales densos competidores no se sitúan junto a él.
• Fuente: La investigación, los estándares, los procesos regulados y los modelos adaptados tienen una nota de fuente o propiedad visible y precisa.
• Portabilidad: Todos los mapeos preservan título, nodos, conectores, pie de foto y equivalente textual.
• Seguridad de activos: El archivo existe antes de publicar una ruta activa, los derechos están documentados y las ilustraciones pendientes permanecen como un comentario SCREENSHOT.
• Precedencia: El bloque está tipificado como diagrama porque su propósito coincide con este elemento, no porque una imagen genérica se pareciera visualmente.

Preguntas frecuentes

La plantilla de academia renderiza las cinco preguntas revisadas almacenadas en el front matter [[faq]] de esta página. Cubren el umbral para usar un diagrama, el equivalente textual obligatorio, el alcance del texto alternativo, los datos estructurados y los límites de nodos.