Uma skill para Claude e agentes de programação que transforma uma especificação JSON curta em diagramas animados e interativos, exportáveis como SVG, PNG, GIF ou MP4.
tanishqkancharla/diffmap
Uma skill de agente que faz agentes de programação explicarem as mudanças no código com diagramas interativos, vinculando cada parte à sua origem.
- Estrelas
- 238
- Forks
- 9
- Issues abertas
- 1
- Último commit
- ontem
O que é?
diffmap ajuda desenvolvedores a revisar código escrito por agentes de programação. O agente escreve uma especificação em Markdown com diagramas interativos do Mermaid, diagramas animados de serviços que podem ser percorridos passo a passo e diffs de diagramas e pilhas de chamadas. Cada elemento do diagrama aponta para o arquivo, símbolo ou commit relevante, permitindo que quem revisa vá de uma caixa ou linha da imagem direto ao código correspondente.
As especificações são renderizadas em um visualizador local iniciado com npx, que também inclui um painel Diff, comentários em linha que podem ser copiados como uma lista em Markdown para um agente e suporte a cartões de commit que listam os arquivos a revisar em ordem. Também é possível compartilhar as especificações como GitHub gists não listados e abri-las em diffmap.dev. O projeto é um pacote TypeScript com uma API de biblioteca para analisar seu formato Markdown.
Recursos principais
- 01Gera diagramas interativos do Mermaid e diagramas animados de serviços a partir de especificações escritas por agentes.
- 02Exibe diffs de diagramas e pilhas de chamadas, destacando o que existe apenas na versão atual ou na proposta.
- 03Vincula nós de diagramas, linhas de pilhas de chamadas e referências no texto a arquivos, símbolos ou commits de origem.
- 04Oferece um visualizador local com um painel Diff e comentários em linha que podem ser copiados para um agente.
- 05Compartilha especificações como GitHub gists não listados, que podem ser visualizados em diffmap.dev.
Casos de uso
- Revisar uma alteração grande produzida por um agente de programação antes de fazer o merge.
- Explicar a um colega o fluxo de uma requisição ou as mudanças de estado em uma feature branch.
- Deixar comentários linha a linha no diff de um agente e enviá-los de volta como uma lista numerada.
- Compartilhar com a equipe, por meio de um link, uma explicação de pull request que possa ser revisada.
Início rápido
- 1
Cole o prompt do diffmap no seu agente para testá-lo em um repositório com alterações
- 2
Instale a skill generate-diffmap
npx skills add tanishqkancharla/diffmap --skill generate-diffmap - 3
Execute o visualizador local em um arquivo spec
npx @tanishqkancharla/diffmap serve path/to/file.md
Antes de usar
- Compartilhar um spec por link é experimental e requer login no gh CLI.
- Os visualizadores hospedados no Gist buscam o Gist no navegador por meio de api.github.com.
Em coleções
Tópicos
Perguntas frequentes
- O que é diffmap?
- Uma skill de agente que faz agentes de programação explicarem as mudanças no código com diagramas interativos, vinculando cada parte à sua origem. diffmap ajuda desenvolvedores a revisar código escrito por agentes de programação. O agente escreve uma especificação em Markdown com diagramas interativos do Mermaid, diagramas animados de serviços que podem ser percorridos passo a passo e diffs de diagramas e pilhas de chamadas. Cada elemento do diagrama aponta para o arquivo, símbolo ou commit relevante, permitindo que quem revisa vá de uma caixa ou linha da imagem direto ao código correspondente.
- diffmap é gratuito? Qual é a licença?
- diffmap é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
- diffmap ainda é mantido?
- Manutenção ativa. O último commit de diffmap foi em 6 de nov. de 2026.
- Para que posso usar diffmap?
- Revisar uma alteração grande produzida por um agente de programação antes de fazer o merge. Explicar a um colega o fluxo de uma requisição ou as mudanças de estado em uma feature branch. Deixar comentários linha a linha no diff de um agente e enviá-los de volta como uma lista numerada. Compartilhar com a equipe, por meio de um link, uma explicação de pull request que possa ser revisada.
- Como instalar diffmap?
- Cole o prompt do diffmap no seu agente para testá-lo em um repositório com alterações Instale a skill generate-diffmap: npx skills add tanishqkancharla/diffmap --skill generate-diffmap Execute o visualizador local em um arquivo spec: npx @tanishqkancharla/diffmap serve path/to/file.md
- Onde consigo diffmap?
- O código-fonte e as instruções de instalação estão no GitHub: https://github.com/tanishqkancharla/diffmap
Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.
Projetos relacionados
Um renderizador leve e síncrono que converte texto de diagramas Mermaid em SVG, sem dependências em tempo de execução.
Uma skill de agente que faz agentes de programação renderizarem diagramas, revisões de diff, planos e tabelas como páginas HTML estilizadas, em vez de arte ASCII.
Um mod para Claude Code que exibe diagramas Mermaid, gráficos, tabelas e código em cores, com 16 temas e botões de cópia no terminal.
API HTTP unificada que renderiza descrições de diagramas em texto, como PlantUML, Mermaid, D2 e GraphViz, em SVG, PNG e outros formatos de imagem.
App de menu bar para Electron que permite a agentes de programação com IA renderizar diagramas e prévias, além de anotá-los e aprová-los na tela.