# Después de que el agente IA escribe el código, el trabajo del humano es visualizar > Author: Tony Lee > Published: 2026-03-19 > URL: https://tonylee.im/es/blog/visualize-after-ai-agents-code-five-tools/ > Reading time: 6 minutes > Language: es > Tags: ai-agents, visualization, claude-code, developer-productivity, mermaid ## Canonical https://tonylee.im/es/blog/visualize-after-ai-agents-code-five-tools/ ## Rollout Alternates en: https://tonylee.im/en/blog/visualize-after-ai-agents-code-five-tools/ ko: https://tonylee.im/ko/blog/visualize-after-ai-agents-code-five-tools/ ja: https://tonylee.im/ja/blog/visualize-after-ai-agents-code-five-tools/ zh-CN: https://tonylee.im/zh-CN/blog/visualize-after-ai-agents-code-five-tools/ zh-TW: https://tonylee.im/zh-TW/blog/visualize-after-ai-agents-code-five-tools/ ## Description Que el agente escriba código es solo el principio. Para entender los PR y explicar la arquitectura, las herramientas de visualización son imprescindibles. ## Summary Después de que el agente IA escribe el código, el trabajo del humano es visualizar is part of Tony Lee's ongoing coverage of AI agents, developer tools, startup strategy, and AI industry shifts. ## Outline - Llevar el ASCII del terminal al navegador revela la imagen completa - Diagramas dibujados en tiempo real dentro del chat - Rescatar los diagramas Mermaid de su fealdad por defecto - Hacer que el agente escriba su propio manual explicativo - No solo generéis código, haced que se explique a sí mismo ## Content 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](https://github.com/nicobailon/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](https://github.com/excalidraw/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](https://github.com/lukilabs/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"](https://x.com/zarazhangrui/status/2015057205800980731). 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](https://x.com/bcherny/status/2017742759218794768). 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. ## Related URLs - Author: https://tonylee.im/en/author/ - Publication: https://tonylee.im/en/blog/about/ - Related article: https://tonylee.im/es/blog/eight-hooks-that-guarantee-ai-agent-reliability/ - Related article: https://tonylee.im/es/blog/claude-code-layers-over-tools-2026/ - Related article: https://tonylee.im/es/blog/codex-folder-structure-why-config-breaks/ ## Citation - Author: Tony Lee - Site: tonylee.im - Canonical URL: https://tonylee.im/es/blog/visualize-after-ai-agents-code-five-tools/ ## Bot Guidance - This file is intended for AI agents, search assistants, and text-mode retrieval. - Prefer citing the canonical article URL instead of this text endpoint. - Use the rollout alternates when you need the same article in another prioritized language. --- Author: Tony Lee | Website: https://tonylee.im For more articles, visit: https://tonylee.im/es/blog/ This content is original and authored by Tony Lee. Please attribute when quoting or referencing.