Después de que el agente de 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. Llegó el PR y lo abrí esperando una revisión rápida. En lugar de eso, pasé cuarenta minutos leyendo logs línea por línea, tratando de reconstruir en mi cabeza el flujo de llamadas entre servicios. El tiempo de revisión fue mayor que el de programar.

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

Del ASCII en terminal al navegador: ver la imagen completa

Pídanle a un agente que dibuje la arquitectura y van a recibir cajas de texto monoespaciado conectadas con guiones. Funciona con tres nodos. A partir de cinco, los ojos se pierden en la pantalla. visual-explainer toma esa misma petición y produce una página HTML con diagramas Mermaid integrados. Dark mode, zoom y paneo vienen incluidos, sin build step ni dependencias externas. Solo un navegador.

• /diff-review: Muestra los cambios de código y las comparaciones de arquitectura lado a lado en una sola vista
• /project-recap: Genera un snapshot de contexto para cuando vuelven a un proyecto después de unos días sin tocarlo
• /generate-slides: Convierte la misma salida en una presentación de diapositivas
• Renderizado automático: Cuando una tabla supera cuatro filas, la herramienta cambia de ASCII en terminal a HTML automáticamente

Para quienes hacen revisiones frecuentes de PRs generados por agentes, esta fue la herramienta que marcó la diferencia más inmediata en mi flujo de trabajo.

Diagramas dibujados en tiempo real dentro del chat

Excalidraw MCP solo requiere registrar una dirección de servidor MCP. Sin instalación local, sin archivos de configuración. La primera vez que vi un diagrama construyéndose mientras el agente todavía estaba respondiendo, genuinamente no me lo esperaba. Como Excalidraw usa un estilo de dibujo a mano en lugar de cajas y flechas rígidas, compartir estos bocetos con el equipo se siente de baja presión. La gente los trata como punto de partida para conversaciones, no como specs formales.

• Soporte multi-entorno: Funciona tanto en Claude Desktop como en VS Code
• Encuadre automático: El viewport se ajusta solo conforme se agregan formas, con modo de edición a pantalla completa
• Edición interactiva: Construido sobre la extensión MCP Apps, así que pueden editar los diagramas directamente dentro de la ventana del chat

Una limitación honesta: el estilo de dibujo a mano se queda corto para diagramas de secuencia detallados. Si necesitan un ordenamiento preciso de llamadas con pasos numerados y ramas condicionales, la sintaxis de Mermaid es mejor opción. Excalidraw brilla para vistas generales de arquitectura y explicaciones de flujo, pero para secuencias de interacción granulares van a querer 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 lo es. Cambiar un solo color significa meterse a buscar entre clases CSS, y la paleta que trae de fábrica parece elegida por un generador de números aleatorios. beautiful-mermaid resuelve esto con un input de dos colores: proporcionan un color de fondo y uno de primer plano, y la librería deriva todos los demás tonos y brillos de texto usando color-mix(). Quince temas preconstruidos vienen listos para usar, cada uno aplicable en una sola línea.

• Sin parpadeo: El renderizado SVG es sincrónico, así que funciona dentro de useMemo() de React sin el flash que dan los renderers asíncronos
• Embebible 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: Sin dependencia del DOM, así que corre en contextos de Node.js sin necesidad de un navegador headless
• Sincronización de tema del editor: La integración con Shiki permite aplicar el tema de VS Code directamente al estilo del diagrama

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

Hacer que el agente escriba su propio material explicativo

Zara Zhang compartió un patrón de prompt que llama “Claude Teacher”. La configuración es un solo párrafo que agregan a su CLAUDE.md. Le indica al agente que produzca un archivo FOR[nombre].md al final de cada proyecto, escrito como una explicación en lenguaje natural del codebase 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 los tradeoffs que hizo al escribir el código. Simplemente le están diciendo que externalice ese conocimiento antes de que termine la sesión.

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

La instrucción clave es que lo escriba como material de lectura con analogías y anécdotas, no como documentación técnica seca. El resultado es algo que pueden entregar directamente a un nuevo integrante del equipo como material de onboarding.

No solo generen código, hagan que se explique solo

Esta viene de Boris Cherny, el creador de Claude Code, quien compartió el tip directamente. En /config hay una configuración de estilo de salida llamada Explanatory. Actívenla y cada cambio de código viene con una explicación en línea de por qué el agente tomó esa decisión. El estilo Learning va más lejos: pausa en ciertos puntos y les pide que escriban el código ustedes mismos antes de revelar su enfoque.

Para codebases desconocidos, pedirle al agente que produzca un slide deck HTML de la arquitectura les da un recorrido en formato presentación que pueden revisar en minutos. También pueden construir dinámicas de repetición espaciada donde explican lo que entienden y el agente llena los vacíos.

• Antes: Código generado, tests pasan, la estructura queda opaca
• Después: Código generado, visualización y explicación solicitadas, estructura internalizada, patrones llevados al siguiente proyecto

La etapa de simplemente delegarle tareas al agente y aceptar lo que entrega ya quedó atrás. El siguiente paso es hacer que visualice y explique lo que construyó. En un mundo donde los agentes manejan cada vez más la implementación, el trabajo distintivamente humano es entender. 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.