# Depois que o agente de IA escreve o código, o trabalho do humano é visualizar > Author: Tony Lee > Published: 2026-03-19 > URL: https://tonylee.im/pt/blog/visualize-after-ai-agents-code-five-tools/ > Reading time: 5 minutes > Language: pt > Tags: ai-agents, visualization, claude-code, developer-productivity, mermaid ## Canonical https://tonylee.im/pt/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 O agente escrever código é só o começo. Para entender PRs e explicar a arquitetura para colegas, ferramentas de visualização são essenciais. ## Summary Depois que o agente de IA escreve o código, o trabalho do humano é visualizar is part of Tony Lee's ongoing coverage of AI agents, developer tools, startup strategy, and AI industry shifts. ## Outline - visual-explainer: do terminal ASCII ao HTML interativo - Excalidraw MCP: diagramas em tempo real no chat - beautiful-mermaid: Mermaid sem o visual padrão - Claude Teacher: o agente que gera manuais explicativos - Explanatory Mode: visualização como ferramenta de aprendizado ## Content Pedi ao agente para refatorar todos os microsserviços. O PR chegou em menos de dez minutos. Mas o fluxo de chamadas entre serviços não se desenhava na minha cabeça. Abri o diff, rolei 400 linhas, tentei reconstruir mentalmente quem chamava quem. Nada. O tempo lendo logs e diffs linha por linha era maior do que o tempo que levei programando no mês inteiro. Foi quando entendi que ler código gerado por agente sem visualizar é como tentar navegar uma cidade nova sem mapa. A visualização mudou tudo. Cinco ferramentas atacam esse problema de formas diferentes. ## visual-explainer: do terminal ASCII ao HTML interativo O [visual-explainer](https://github.com/nicobailon/visual-explainer) transforma a saída bruta do agente em diagramas navegáveis. Você aponta para um repositório ou um diff e ele gera representações visuais que vão de ASCII simples no terminal até HTML interativo no navegador. - **Diff review.** Antes de aprovar um PR gerado por agente, o visual-explainer mapeia as dependências alteradas. Você vê quais módulos foram tocados e como as conexões mudaram, sem precisar montar o quebra-cabeça mentalmente. - **Project recap.** Entrou em um projeto no meio do caminho? O visual-explainer gera um mapa da arquitetura atual a partir do código. É mais confiável do que qualquer documentação desatualizada. - **Generate slides.** Precisa apresentar a refatoração para o time? Ele exporta diagramas prontos para slides, economizando aquela hora montando caixinhas no PowerPoint. - **Auto switch.** A ferramenta alterna automaticamente entre ASCII no terminal e HTML interativo dependendo do ambiente. Sem configuração extra. A principal limitação é que projetos com centenas de módulos geram diagramas densos. Acima de certo tamanho, você precisa filtrar manualmente os módulos relevantes para que a visualização continue útil. ## Excalidraw MCP: diagramas em tempo real no chat O [Excalidraw MCP](https://github.com/excalidraw/excalidraw-mcp) conecta o Excalidraw diretamente ao seu agente via Model Context Protocol. O agente desenha enquanto conversa com você. - **Multi-env.** Funciona dentro do Claude Code, do Cursor e de qualquer cliente que suporte MCP. Você não precisa trocar de ferramenta para ver o diagrama. - **Camera.** O agente controla zoom e posição automaticamente. Quando o diagrama cresce, o foco acompanha o componente que está sendo discutido. - **Interactive.** Os diagramas não são imagens estáticas. Você pode arrastar, editar e reorganizar depois que o agente gera. Isso transforma a saída em um artefato de trabalho real, não só uma ilustração descartável. Na prática, o maior ganho aparece em sessões de pair programming com o agente. Você pede uma mudança de arquitetura, o agente implementa e ao mesmo tempo desenha o resultado. O ciclo de entender o que mudou cai de minutos para segundos. ## beautiful-mermaid: Mermaid sem o visual padrão Mermaid é o formato que a maioria dos agentes já gera nativamente. O problema é que o visual padrão do Mermaid parece um protótipo de 2015. O [beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid) resolve isso. - **Zero flicker.** A renderização acontece server-side. Não tem aquele flash de conteúdo bruto antes do diagrama aparecer. A experiência é limpa desde o primeiro frame. - **CLI.** Você pode gerar diagramas via linha de comando e integrar no CI. Cada PR pode ter seu diagrama de arquitetura gerado automaticamente. - **Server-side.** A renderização no servidor significa que o diagrama funciona em qualquer lugar: README no GitHub, documentação estática, páginas internas. Sem dependência de JavaScript no cliente. - **Shiki.** Usa Shiki para syntax highlighting nos blocos de código dentro dos diagramas. Quando o diagrama inclui trechos de código, eles ficam legíveis de verdade. O fluxo que funciona melhor: o agente gera o código Mermaid, você passa pelo beautiful-mermaid e inclui o resultado na documentação do PR. Em dois minutos, qualquer colega entende a mudança sem abrir o código. ## Claude Teacher: o agente que gera manuais explicativos Zara Zhang compartilhou um padrão chamado ["Claude Teacher"](https://x.com/zarazhangrui/status/2015057205800980731) que muda o papel do agente. Em vez de só escrever código, o agente gera documentação explicativa completa sobre o que fez e por quê. - **Architecture.** O agente documenta a arquitetura resultante com diagramas e explicações. Não é um comentário inline. É um documento estruturado que um novo membro do time consegue ler e entender o sistema. - **Decisions.** Cada decisão de design é registrada com alternativas consideradas e motivos da escolha. Quando alguém perguntar "por que não usaram GraphQL aqui?", a resposta já existe. - **Bugs.** O agente lista os pontos frágeis conhecidos e os cenários de falha que ele identificou durante a implementação. Isso é ouro para quem vai manter o código depois. - **Mindset.** O documento explica o modelo mental por trás da implementação. Qual paradigma guiou as decisões, quais trade-offs foram aceitos conscientemente. Esse padrão funciona especialmente bem quando o agente faz mudanças grandes. Uma refatoração de 2.000 linhas acompanhada de um documento de 500 palavras explicando o raciocínio vale mais do que a refatoração sozinha. ## Explanatory Mode: visualização como ferramenta de aprendizado Boris Cherny propôs um [padrão complementar](https://x.com/bcherny/status/2017742759218794768) focado em usar a visualização como mecanismo de aprendizado contínuo. A ideia é que o agente não só explique o que fez, mas ensine o humano a pensar sobre o domínio. - **Before/after.** O agente gera visualizações comparativas do estado anterior e posterior à mudança. Isso torna o impacto concreto. Não é "refatorei o módulo de autenticação". É um diagrama mostrando exatamente quais fluxos mudaram e como. Quando você combina esse padrão com as ferramentas anteriores, surge um fluxo completo. O agente implementa, o visual-explainer ou o Excalidraw MCP gera o diagrama, o beautiful-mermaid estiliza para documentação, e o modo explicativo garante que o conhecimento não fica preso na cabeça de quem pediu a mudança. A fase de só pedir trabalho ao agente já passou. O código gerado que ninguém entende é dívida técnica instantânea. É preciso visualizar, documentar e explicar. O agente escreve. O trabalho do humano é entender. ## Related URLs - Author: https://tonylee.im/en/author/ - Publication: https://tonylee.im/en/blog/about/ - Related article: https://tonylee.im/pt/blog/eight-hooks-that-guarantee-ai-agent-reliability/ - Related article: https://tonylee.im/pt/blog/claude-code-layers-over-tools-2026/ - Related article: https://tonylee.im/pt/blog/codex-folder-structure-why-config-breaks/ ## Citation - Author: Tony Lee - Site: tonylee.im - Canonical URL: https://tonylee.im/pt/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/pt/blog/ This content is original and authored by Tony Lee. Please attribute when quoting or referencing.