Visualizar

¿Qué hace Visualizar?

Un visual solo entra en la clase si muestra algo que las palabras no muestran bien: forma, estructura, dirección, relación, proporción, espacio. Un visual decorativo o que repite el texto aumenta la carga y además puede estar equivocado. Ante la duda, no lo hagas: un visual que falta cuesta menos que un visual equivocado.

1. Elige el tipo

La idea es…	Bloque	Ejemplo
relación, dependencia, flujo, causa → efecto	aula.diagrama (Mermaid graph TD/LR)	cómo la Selic llega al precio del pan
secuencia de interacciones entre actores	aula.diagrama (sequenceDiagram)	fases de un proceso judicial
línea de tiempo	aula.diagrama (timeline)	constituciones brasileñas
jerarquía / clasificación	aula.diagrama (graph TD o mindmap)	jerarquía de las normas
datos numéricos, proporción, geometría, plano	aula.figura (SVG hecho a mano)	inflación mes a mes
una obra, objeto o lugar real	aula.imagen	el Palacio de la Alborada

2. Recorta hasta que solo quede la idea

• Una idea por visual. Si necesita dos, son dos visuales.
• Máximo ~7 elementos (nodos, barras, etiquetas). Para cada uno, pregúntate: "si quito esto, ¿la idea sigue clara?" Si sí, quítalo.
• Etiquetas cortas: una palabra o expresión, no frases.
• Sin título dentro del diagrama (el bloque ya tiene titulo).

3. Junta el visual y la explicación (contigüidad, sin redundancia)

• Usa el campo texto del bloque: la explicación aparece al lado (o justo debajo, si el visual es ancho).
• El texto no describe el visual elemento por elemento — dice hacia dónde mirar y qué concluir ("fíjate que la flecha vuelve: es un ciclo").
• Si una etiqueta puede estar dentro del visual, se queda allí, no en una leyenda separada.

4. Reglas por tipo

Mermaid

• Texto con caracteres especiales o R$ va entre comillas: A["R$ 1.000"].
• Salto de línea en una etiqueta: <br/>.
• graph TD (de arriba abajo) para fundamentos → consecuencias; graph LR para procesos en el tiempo.

SVG (figuras y gráficos)

• Calcula las coordenadas con un script (por ejemplo node -e "..."), no "a ojo": proporciones equivocadas mienten.
• viewBox con margen, font-family="Inter, sans-serif", textos con fill="currentColor" (funciona en tema claro y oscuro).
• Máximo 2 colores de dato + neutro. Fuente de los datos en la legenda.

Imágenes

• En clases de arquitectura, diseño y arte, prefiere pares de contraste (un caso que falla en la lente × uno que pasa), en dos aula.imagen seguidos, con título "Antes: …" / "Después: …". Invita al alumno a mirar primero y leer después. El texto dice hacia dónde mirar y lo que la imagen no muestra (plano, escala, material, contexto), y describe solo lo que se ve.
• Prefiere Wikimedia Commons. Revisa en la página del archivo el autor y la licencia y completa credito, licenca y link (la página del archivo).
• Usa el enlace directo de la imagen (upload.wikimedia.org/...) en src.
• Nunca uses imagen sin crédito o de un sitio que prohíba la reproducción.

5. Revisa mirando — obligatorio

Renderizar sin error no prueba que el visual esté correcto. Después de escribir el bloque:

1. Espera ~3 segundos (la página se actualiza sola).
2. [Claude Code] En el navegador de la app, desplázate hasta el bloque y toma una captura de pantalla (por ejemplo, javascript_tool con document.querySelectorAll('[data-tipo="diagrama"]') → último → scrollIntoView(), luego computer → screenshot). En otro agente: pide al alumno que mire y confirme.
3. Revisa de forma crítica:
   • ¿Cada flecha apunta al lado correcto? ¿Cada relación es verdadera?
   • ¿Los números y las proporciones coinciden con los datos?
   • ¿Alguna etiqueta cortada, superpuesta o ilegible?
   • ¿Apareció un cuadro rojo "Error en el diagrama"? → corrige la sintaxis.
   • Imagen: ¿cargó? (img.naturalWidth > 0)
   • ¿Se puede entender la idea solo mirando?
4. Corrige y revisa de nuevo. Si no consigues un visual correcto y claro, elimina el bloque y explícalo en texto.