Después de que el agente IA escribe el código, el trabajo del humano es visualizar

La semana pasada le pedí al agente que refactorizara toda la capa de microservicios. El PR llegó y lo abrí esperando una revisión rápida. En su lugar me pasé cuarenta minutos leyendo líneas de log una a una, intentando reconstruir mentalmente el flujo de llamadas entre servicios. La revisión tardó más que la programación en sí.

La salida de terminal, por sí sola, no transmite la imagen completa de un sistema. Cuando empecé a combinar la salida del agente con visualización, los flujos de código se volvieron evidentes de un vistazo y el tiempo que dedicaba a explicar la arquitectura a los compañeros se redujo a la mitad. Las cinco herramientas que os presento abordan este problema desde ángulos distintos.

Llevar el ASCII del terminal al navegador revela la imagen completa

Pedidle a un agente que dibuje vuestra arquitectura y obtendréis cajas monoespaciadas conectadas por guiones. Funciona con tres nodos. A partir de cinco, los ojos empiezan a patinar por la pantalla. visual-explainer toma la misma petición y produce una página HTML con diagramas Mermaid incrustados. Trae de serie modo oscuro, zoom y desplazamiento, sin paso de build ni dependencias externas. Solo un navegador.

• /diff-review: Renderiza cambios de código y comparaciones de arquitectura lado a lado en una única vista
• /project-recap: Genera una instantánea de recuperación de contexto para cuando volvéis a un proyecto tras varios días fuera
• /generate-slides: Convierte la misma salida en una presentación de diapositivas
• Cambio automático de renderizado: Cuando una tabla supera las cuatro filas, la herramienta pasa automáticamente de ASCII en terminal a renderizado HTML

Para quienes hacéis revisiones periódicas de PR sobre código generado por agentes, esta es la herramienta que mayor diferencia inmediata marcó en mi flujo de trabajo.

Diagramas dibujados en tiempo real dentro del chat

Excalidraw MCP solo requiere registrar una dirección de servidor MCP. Ni instalación local, ni ficheros de configuración. La primera vez que vi un diagrama materializándose mientras el agente seguía hablando, sinceramente no me lo esperaba. Como Excalidraw usa un estilo de dibujo a mano alzada en lugar de cajas y flechas rígidas, compartir estos bocetos con el equipo resulta poco comprometido. La gente los trata como punto de partida de conversación, no como especificaciones formales.

• Soporte multientorno: Funciona tanto en Claude Desktop como en VS Code
• Encuadre automático: El viewport se ajusta automáticamente conforme se añaden formas, con modo de edición a pantalla completa
• Edición interactiva: Construido sobre la extensión MCP Apps, permite editar diagramas directamente dentro de la ventana de chat

Una limitación real: el estilo de dibujo a mano se queda corto para diagramas de secuencia detallados. Si necesitáis un orden de llamadas preciso con pasos numerados y ramas condicionales, la sintaxis Mermaid encaja mejor. Excalidraw brilla en visiones generales de arquitectura y explicaciones de flujo, pero para secuencias de interacción con grano fino conviene combinarlo con otra herramienta de esta lista.

Rescatar los diagramas Mermaid de su fealdad por defecto

La sintaxis de Mermaid es excelente. Su renderizado por defecto, no tanto. Cambiar un solo color implica bucear entre clases CSS, y la paleta que trae de serie parece elegida por un generador de números aleatorios. beautiful-mermaid resuelve esto con una entrada de dos colores: proporcionáis un color de fondo y otro de primer plano, y la librería deriva el resto de tonos y brillo del texto mediante color-mix(). Incluye quince temas preconstruidos, cada uno aplicable en una sola línea.

• Sin parpadeo: El renderizado SVG es síncrono, así que funciona dentro de useMemo() de React sin el destello que producen los renderizadores asíncronos
• Integrable en CLI: Soporta salida ASCII y Unicode en terminal, lo que permite incrustar diagramas directamente en herramientas de línea de comandos
• Compatible con servidor: No depende del DOM, así que se ejecuta en contextos de servidor Node.js sin necesidad de un navegador headless
• Sincronización con tema del editor: La integración con Shiki permite aplicar vuestro tema de VS Code directamente al estilo del diagrama

Si ya estáis generando Mermaid a partir de la salida del agente (y probablemente deberíais), esta librería transforma esos diagramas de “técnicamente legibles” a algo que realmente pondríais en un documento de diseño.

Hacer que el agente escriba su propio manual explicativo

Zara Zhang compartió un patrón de prompt que llama “Claude Teacher”. La configuración es un solo párrafo añadido a vuestro CLAUDE.md. Indica al agente que produzca un fichero FOR[nombre].md al final de cada proyecto, escrito como una explicación en lenguaje llano del código base completo.

La razón por la que funciona es directa. El agente ya conoce la arquitectura, la lógica detrás de las decisiones y las concesiones que hizo al escribir el código. Simplemente le estáis diciendo que exteriorice ese conocimiento antes de que la sesión termine.

• Mapa de arquitectura: Cómo la arquitectura técnica se conecta con la estructura del código
• Justificación de decisiones: Qué tecnologías se eligieron y por qué se descartaron las alternativas
• Lecciones de trinchera: Bugs encontrados, cómo se resolvieron y trampas que conviene evitar
• Mentalidad de ingeniería: Cómo piensa un buen ingeniero ante los problemas, escrito como narrativa en lugar de listas de viñetas

La instrucción clave es que lo escriba como material legible, con analogías y anécdotas, no como documentación técnica árida. El resultado es algo que podéis entregar directamente a un nuevo miembro del equipo como material de incorporación.

No solo generéis código, haced que se explique a sí mismo

Esto viene de Boris Cherny, el creador de Claude Code, que compartió el consejo directamente. En /config hay un ajuste de estilo de salida llamado Explanatory. Activadlo y cada cambio de código viene acompañado de una explicación en línea de por qué el agente tomó esa decisión. El estilo Learning va más allá: se detiene en ciertos puntos y os pide que escribáis el código vosotros antes de revelar su enfoque.

Para bases de código desconocidas, pedirle al agente que produzca un slide deck HTML de la arquitectura os da un recorrido estilo presentación que podéis ojear en minutos. También podéis construir hábitos de repetición espaciada donde explicáis lo que entendéis y el agente rellena los huecos.

• Antes: Código generado, tests pasando, estructura opaca
• Después: Código generado, visualización y explicación solicitadas, estructura interiorizada, patrones trasladados al siguiente proyecto

La etapa de simplemente delegar tareas al agente y aceptar la salida ya quedó atrás. El siguiente paso es hacer que visualicen y expliquen lo que construyeron. En un mundo donde los agentes se encargan de cada vez más implementación, el trabajo distintivamente humano es comprender. La visión es uno de los canales más rápidos que tenemos para procesar información, y combinar la salida de la IA con representación visual cambia por completo la calidad de esa comprensión.