Depois que o agente de IA escreve o código, o trabalho do humano é visualizar

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 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 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 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” 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 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.