Anatomy en 2026: Diagramas Isométricos Interactivos para Documentación
Hola HaWkers, explicar un sistema técnico con una imagen atractiva es relativamente fácil; explicar qué cambia cuando alguien interactúa con él es otra historia. El proyecto abierto Anatomy propone convertir una idea en una máquina isométrica interactiva, construida principalmente con SVG. El repositorio también describe opciones con WebGL y un modo 3D todavía experimental. En vez de usar el dibujo como decoración, intenta que cada pieza represente una parte de la explicación.
¿Alguna vez publicaste un diagrama que parecía claro para quien lo creó, pero dejó al lector sin saber por dónde empezar? Aquí aprenderás a formular una solicitud útil para Anatomy, elegir el formato de salida, revisar la interacción y construir una versión pequeña en SVG para entender los principios detrás del resultado. El objetivo es obtener un método de documentación visual que siga siendo útil fuera de una presentación.
Qué hace Anatomy y dónde encaja
Anatomy es una skill para un agente de programación. Según la documentación del proyecto, describes un concepto u objeto, indicas dónde se usará la figura y recibes el código fuente de una ilustración interactiva. El núcleo utiliza piezas isométricas en SVG con sombreado; efectos como agua, luz y humo pueden usar WebGL. El modo de piezas giratorias en 3D figura como beta en el propio README. Esto difiere de pedir una imagen estática a un generador: hay estados, comportamientos y una relación que debe tener sentido entre el valor mostrado y el movimiento de las partes.
El repositorio ofrece salidas como una página HTML independiente, un SVG aislado o componentes para React y Next.js. También incluye ejemplos y scripts de captura y auditoría. Estas opciones no significan que todas las figuras necesiten un renderizador sofisticado. Para una guía de API, un SVG legible y bien etiquetado puede comunicar más que una escena llena de partículas. WebGL ayuda cuando el fenómeno visual forma parte de la explicación, por ejemplo, un flujo, un brillo o una refracción.
Piensa en el lector antes de pensar en la cámara. Quien llega desde una búsqueda quiere identificar la pieza principal, reconocer un cambio de estado y descubrir qué hacer con esa información. Si la animación no muestra una relación causal, ocupa espacio y atención sin enseñar. Lo mismo ocurre con una figura que solo revela su contenido al pasar el cursor: en el móvil y con el teclado, esa información puede quedar oculta. Una leyenda y un resumen visible ofrecen una ruta de lectura incluso antes de que empiece la interacción.
Elige una pregunta que el dibujo pueda responder
Un buen punto de partida es una pregunta delimitada: «¿por qué espera una solicitud cuando todas las conexiones están ocupadas?». Esto proporciona al agente un evento observable. En cambio, «dibuja una arquitectura moderna» deja espacio para cajas genéricas, flechas arbitrarias y ningún criterio de corrección. El README de Anatomy recomienda nombrar la idea, proporcionar números reales cuando existan y especificar el formato de entrega. Si desconoces los números de producción, identifica los valores como ejemplo didáctico; no conviertas una suposición en una métrica de tu sistema.
Imagina un pool con tres conexiones ficticias y una cola. La figura debe responder: ¿qué conexión está libre, qué sucede cuando llega una cuarta solicitud y cuándo avanza la cola? Hay estados claros para representar: libre, ocupada y en espera. El dibujo de un taller con bancos de trabajo puede ayudar, siempre que la metáfora no oculte la regla: una conexión solo vuelve al pool después de liberarse. El texto junto a la figura debe repetir esta regla de forma directa.
Escribe primero una breve especificación: público, pregunta, objetos visibles, estados, transiciones y salida esperada. Después solicita geometría, colores y movimiento. Este orden evita que un detalle estético determine el funcionamiento del sistema. Además, facilita la revisión del código generado: sabrás que cada movimiento debe corresponder a una transición definida y podrás descartar piezas que solo sirven de adorno.
Si tu documentación ya utiliza SVG animado, consulta también el artículo sobre animación de SVG con CSS. Te ayudará a distinguir una transición visual sencilla de una interacción que requiere JavaScript y un estado explícito. Esa decisión temprana reduce el trabajo necesario para mantener la ilustración cuando cambie la explicación.
Instalación y solicitud inicial
El README oficial muestra la instalación mediante el catálogo de skills o Git. La siguiente opción instala la skill para Claude Code en el ámbito del usuario. Revisa el repositorio y sus instrucciones antes de ejecutar código de terceros en tu entorno: la instalación copia los archivos del proyecto a la carpeta de skills.
# Instala la skill para Claude Code en el perfil del usuario.
npx skills add wheresryan22/anatomy -g -a claude-code
# Alternativa local para un proyecto: revisa el repositorio antes de adoptarlo.
git clone https://github.com/wheresryan22/anatomy.git .claude/skills/anatomyDespués, la solicitud debe incluir la explicación, la interacción y el destino. Un ejemplo útil sería: «Crea una figura sobre un pool de conexiones con tres conexiones ilustrativas; muestra una solicitud en espera cuando todas estén ocupadas, permite avanzar con un botón y con el teclado, entrega un HTML independiente y mantén siempre visible un resumen textual». Las tres conexiones son un valor para la demostración, no una recomendación sobre la capacidad de una base de datos real. Solicita también un estado inicial que comunique algo sin movimiento, ya que algunas personas reducen las animaciones o utilizan tecnologías de asistencia.
Al revisar la primera entrega, comprueba que el proyecto haya proporcionado código que puedas mantener. Averigua dónde están el modelo de estado, la proyección isométrica, las etiquetas y los eventos. No aceptes un resultado que obligue a cambiar coordenadas repartidas por decenas de archivos para editar una frase. La documentación de Anatomy indica que las figuras pueden incluir un script de construcción y una página generada; considera el script como la fuente y la página como el artefacto que se publicará.
Un ejemplo mínimo para entender el estado y la interacción
Antes de evaluar una figura compleja, conviene crear una miniatura a mano. El siguiente ejemplo no es una salida de Anatomy: es un HTML independiente, creado aquí para mostrar la regla que debes exigir a cualquier ilustración interactiva. Un botón alterna entre una conexión libre y una ocupada. El texto visible, que también pueden anunciar las tecnologías de asistencia, se actualiza en la misma función que cambia el color. Guarda el contenido como pool.html y ábrelo en el navegador.
<!doctype html>
<html lang="es">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Estado de una conexión</title>
<h1>Pool de conexiones: ejemplo didáctico</h1>
<p id="estado" role="status">La conexión está libre.</p>
<svg viewBox="0 0 320 180" width="320" role="img" aria-labelledby="titulo descripcion">
<title id="titulo">Una conexión del pool</title>
<desc id="descripcion">El bloque cambia de color cuando se ocupa la conexión.</desc>
<polygon points="70,70 160,25 250,70 160,115" fill="#a7d8c9" />
<polygon id="bloco" points="70,70 160,115 160,155 70,110" fill="#28745d" />
<polygon points="160,115 250,70 250,110 160,155" fill="#1e5848" />
</svg>
<p><button id="alternar" type="button">Ocupar conexión</button></p>
<script>
// Un mismo estado controla la forma, la etiqueta y la siguiente acción.
let ocupada = false;
const bloque = document.querySelector('#bloco');
const estado = document.querySelector('#estado');
const boton = document.querySelector('#alternar');
boton.addEventListener('click', () => {
ocupada = !ocupada;
bloque.setAttribute('fill', ocupada ? '#b85342' : '#28745d');
estado.textContent = ocupada
? 'La conexión está ocupada; las nuevas solicitudes esperan.'
: 'La conexión está libre.';
boton.textContent = ocupada ? 'Liberar conexión' : 'Ocupar conexión';
});
</script>
</html>El botón nativo ya responde al teclado y al tacto. La referencia de MDN para <title> en SVG explica que proporciona una breve descripción accesible; el texto más extenso puede ir en <desc>. Juntos, estos elementos mejoran la comprensión del gráfico, pero no sustituyen el estado textual fuera de él. Quien no perciba el cambio de color también debe saber qué ocurrió. En una figura real habría que comprobar además el contraste, el foco, el zoom, las preferencias de movimiento y la lectura en pantallas estrechas.
Observa que los polígonos forman una isometría simplificada, sin biblioteca. Para un sistema con muchas piezas, el valor de Anatomy está en construir y verificar una composición que llevaría tiempo hacer manualmente. Aun así, el principio permanece: el dato y el movimiento deben partir del mismo estado. Si el indicador dice «libre» mientras la máquina muestra «ocupada», la figura enseña lo contrario de lo que promete.
Cómo revisar una figura generada sin confiar solo en su aspecto
Empieza por la pregunta original. Recorre toda la interacción e intenta responder sin leer el código: ¿el estado inicial es evidente? ¿Cada acción tiene un efecto previsible? ¿El texto confirma el cambio? Una animación que obliga a adivinar qué parte admite clics puede funcionar en una demostración, pero falla en la documentación. Sitúa instrucciones breves junto al control y prueba el recorrido con teclado, pantalla táctil y puntero. Si un estado solo aparece al pasar el cursor, añade una alternativa explícita.
Después, revisa el modelo. Busca valores duplicados manualmente entre etiquetas, movimientos y paneles. Anatomy describe como objetivo obtener indicadores y movimiento a partir del mismo modelo pequeño. Es un buen criterio para cualquier herramienta: si cambias la capacidad del ejemplo, todas las representaciones deberían cambiar juntas. Confirma también si los valores publicados corresponden al producto real o están identificados como demostración. La precisión de la explicación importa más que la ilusión de profundidad.
Por último, compara las salidas. El SVG aislado puede ser adecuado para una página ligera y sin interacción. La página HTML independiente facilita compartir un prototipo. Un componente React puede integrarse mejor en la documentación existente, aunque añade decisiones sobre renderizado, estado y empaquetado. Elige el formato según la infraestructura donde vivirá la figura. Una salida 3D en beta requiere todavía más atención al rendimiento y la compatibilidad, especialmente en dispositivos modestos.
El repositorio tiene scripts de captura y auditoría para algunos ejemplos. Pueden ayudar a encontrar defectos geométricos, pero no certifican que el concepto sea correcto ni que la experiencia sea accesible. Sigue siendo necesaria una revisión humana: compara los estados con la especificación inicial, pide a otra persona que explique la figura y anota los puntos en los que duda. Esa observación suele revelar etiquetas ambiguas que una captura impecable no muestra.
Publicación, mantenimiento y seguridad del artefacto
Una figura interactiva pasa a formar parte del ciclo de mantenimiento de la documentación. Guarda la solicitud o especificación, el código fuente y una captura de cada estado importante en el repositorio. Cuando cambie una regla del producto, actualiza primero el modelo y el texto; después ajusta la geometría. Esto reduce el riesgo de publicar un panel visualmente pulido que todavía explica una regla de negocio antigua.
Incluye una comprobación básica en el proceso de revisión. El siguiente comando no sustituye a las pruebas en el navegador: solo confirma que el archivo existe, contiene los controles esperados y termina con un documento HTML. Es útil para evitar la publicación accidental de una captura vacía o una versión sin interacción. Ejecútalo en la carpeta donde guardaste pool.html.
# Comprueba que los elementos esenciales del ejemplo estén presentes.
test -s pool.html
python3 - <<'PY'
from pathlib import Path
pagina = Path('pool.html').read_text(encoding='utf-8')
for fragmento in ('id="estado"', 'id="alternar"', 'aria-labelledby', "addEventListener('click'"):
assert fragmento in pagina, f'Falta un elemento: {fragmento}'
print('Se encontró la estructura básica; revisa la interacción en el navegador.')
PYComo Anatomy está formado por instrucciones y scripts locales, lee el código y los comandos antes de ejecutarlos en una máquina con datos sensibles. La política de seguridad del proyecto indica que algunos scripts de captura inician Chrome en modo headless y que uno de ellos ejecuta JavaScript aportado por el usuario en la página. Utiliza estos scripts solo con páginas de confianza. Si vas a incorporar HTML generado a un sitio público, revisa las dependencias, las referencias externas, la política de contenido y lo que el script intenta cargar.
Esta precaución también se aplica a enlaces e imágenes de la página. Un artefacto que funciona en local puede depender de una ruta absoluta, una fuente sin licencia de redistribución o una API que solo existe en el entorno del autor. Abre la salida en una sesión limpia y repite la misma secuencia de interacciones que seguiría un lector. Así comprobarás la experiencia publicada y no solo el script que la produjo.
Cuándo usar Anatomy y cuándo simplificar
Utiliza Anatomy cuando una relación espacial ayude a entender el proceso: flujo entre piezas, ocupación de recursos, cambios de estado o funcionamiento de una máquina. Parece especialmente adecuado para explicaciones en las que el lector necesita descubrir qué se mueve y por qué. Una figura sobre caché, un pool de conexiones o las etapas de una operación plantea una pregunta concreta que orienta la animación.
Simplifica cuando la respuesta cabe en una tabla, un fragmento de código o una frase. Una comparación de precios, una lista de parámetros de API y una decisión de configuración normalmente no resultan más claras por proyectarse en isometría. El coste de mantenimiento de la figura solo se justifica si revela algo que el texto estático oculta. Para empezar, crea un prototipo pequeño y pide a alguien que explique el concepto después de interactuar con él.
Considera también al público. En una página de referencia consultada rápidamente, una imagen estática con leyendas puede funcionar mejor. En un tutorial conceptual, la interacción permite experimentar con estados y desarrollar una intuición. La elección no tiene que ser definitiva: la misma especificación puede generar un SVG estático para una lectura rápida y una versión interactiva para una exploración detallada.
Perspectivas para la documentación visual en 2026
Lo prometedor de Anatomy es que ofrece código y un modelo para la explicación, en lugar de limitarse a entregar una imagen terminada. Esto puede acercar la ilustración, la documentación y las pruebas: cuando cambia el sistema, la figura también puede cambiar. Sin embargo, esa promesa depende de una revisión cuidadosa. Una escena atractiva no corrige un dato inventado, un estado incoherente ni un control inaccesible.
Si pruebas la herramienta, comienza con una sola duda frecuente de tus usuarios. Define una pregunta, escribe los estados y solicita una figura sencilla. Pruébala con el teclado y el móvil, revisa el código entregado y pide comentarios a alguien que no haya participado en su creación. La mejor ilustración es aquella que facilita explicar el mecanismo incluso después de que termina la animación.
¡Vamos con todo! 🦅
📚 ¿Quieres Seguir lo Que Viene Por Delante?
Este artículo trató los diagramas isométricos con Anatomy, pero el ecosistema cambia cada semana y no todas las novedades se convierten en artículos aquí.
En X comparto lo que estoy probando, los detalles de mis proyectos y las novedades que encuentro antes de que se conviertan en publicaciones.
Sígueme Allí
💡 Contenido diario sobre desarrollo, carrera y las herramientas que realmente utilizo