Pular para o conteúdo

Testada em uma tarefa realComunidade, verificadaDocumentos e Office

Archify Diagrams

Transforme a descrição de um processo ou sistema num diagrama interativo e verificado que você pode exportar como imagem.

Veja o que ela criou

Instale Archify Diagrams grátis

Deixe seu email e os passos de instalação abrem aqui mesmo: um prompt para colar na sua ferramenta de IA. Vale para as 149 skills.

Sem spam. Cancele com um clique. Usamos seu e-mail para enviar o curso e dicas de IA.

Nossa nota
4/10
Funciona em
Claude Code, Codex+6 outras

Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf e mais de 60 ferramentas de IA que leem skills.

Precisa programar?
Não
Tempo até o resultado
12 min
Criado por
tt-a1i
Testada em
19 de out. de 2026
Sem a skillCom a skillCom a skill
Mesmo prompt, mesmo modelo: o Claude puro fez uma lista de etapas acolhedora cor de papel com fotos, enquanto a versão do Archify é um fluxograma escuro em estilo de código, em linhas identificadas, dentro de um visualizador interativo.

A resposta curta

Archify Diagrams é uma skill do Claude que transforma uma descrição simples, um gráfico Mermaid ou uma base de código num diagrama interativo e verificado, salvo como um único arquivo HTML, com dez tipos, de fluxogramas a linhas do tempo e mapas de status. Serve para quem quer um diagrama em que possa dar zoom, trocar o tema e exportar como imagem, SVG ou vídeo. Nosso veredito é 4/10: no nosso teste lado a lado, ela construiu um fluxograma limpo e validado, mas o Claude puro, com o mesmo prompt, fez uma página mais acolhedora e detalhada que funcionou melhor no celular.

Ideal para: Quem quer um diagrama interativo que dê para exportar como imagem, SVG ou vídeo, principalmente de sistemas, linhas do tempo ou status, e vai vê-lo num notebook, não no celular.

Quer esse resultado no seu próprio trabalho?

Cadastre-se grátis e instale Archify Diagrams em cerca de um minuto. Um email libera os passos de instalação de todas as skills do site.

Sem spam. Cancele com um clique. Usamos seu e-mail para enviar o curso e dicas de IA.

Quando vale a pena usar

Exporte um fluxograma como imagem

Você precisa de um diagrama de processo para um slide, um documento ou um e-mail para cliente. O Archify o constrói, confere o layout, e o menu Export salva um PNG, JPEG, WebP, SVG ou um vídeo animado curto.

Mostre em que pé está uma solicitação

Reembolsos, inscrições ou pedidos personalizados passam por status como aguardando, aprovado ou recusado. O tipo de ciclo de vida mostra cada status, o que leva ao próximo e onde as coisas são refeitas ou terminam.

Mapeie um sistema ou uma linha do tempo

Você quer mostrar como as ferramentas do seu negócio se conectam, ou o que aconteceu e quando durante um incidente. O Archify tem tipos de diagrama dedicados para mapas de sistema, linhas do tempo e detalhamentos de tempo, cada um conferido antes da entrega.

Como ter um ótimo resultado

  1. Instale e confira o Node

    Instale (passos abaixo). As checagens rodam em Node.js 18 ou mais novo e a última checagem abre o diagrama num navegador de verdade, então tenha o Chrome instalado.

  2. Descreva o processo com fatos reais

    Diga quem está envolvido, as etapas, as escolhas ao longo do caminho e os prazos e regras reais. Peça para marcar o que for desconhecido como placeholder; no nosso teste, ela fez isso e não inventou nada.

  3. Deixe ela escolher um tipo e rodar as checagens

    O Claude escolhe um de dez tipos de diagrama, escreve o diagrama como dados estruturados e roda uma etapa de finalização que o valida, gera o HTML e o testa num navegador. Se uma checagem falhar, ele conserta e roda de novo.

  4. Peça uma revisão das capturas de tela

    Passar nas checagens automáticas não significa que ficou bom. No nosso teste, as próprias capturas de tela do Claude acharam três problemas de layout que as checagens deixaram passar, então peça para ele olhar capturas de desktop e celular antes de entregar.

  5. Abra, ajuste e exporte

    Abra o arquivo HTML no navegador, alterne entre claro e escuro e o preset de estilo, depois use o Export para uma imagem, SVG ou vídeo. Peça mudanças em palavras simples e o Claude edita os dados e roda as checagens de novo.

Este é o prompt exato com que começamos o nosso teste:

O prompt que usamos
Faça um diagrama claro e bonito de como um pedido flui na Clay & Co, do momento em que o cliente paga até o pedido chegar, incluindo o caminho sob encomenda. Vou mostrá-lo a uma ajudante de meio período que estou contratando. Salve como out/diagram.html (um arquivo que eu possa abrir no navegador).

Tudo o que ela criou

Cada peça abaixo é um resultado real do nosso teste, aberta do jeito que você abriria.

Com a skill
Com a skill, no celular
Com a skill: um fluxograma interativo com linhas para o cliente e o ateliê, botões de tema e exportação e cards informativos embaixo, mas no celular o gráfico fica cortado e precisa ser arrastado.
Sem a skill
Sem a skill, no celular
Sem a skill: um fluxo numerado de cima para baixo com fotos da loja, todas as etapas sob encomenda, uma barra de tempo e placeholders amarelos, que empilha numa coluna limpa no celular.

Como foi a sessão

A conversa do nosso teste, resumida. Cerca de 12 minutos do primeiro prompt até o resultado final.

  1. Você: Faça um diagrama claro e bonito de como um pedido flui na Clay & Co, do momento em que o cliente paga até o pedido chegar, incluindo o caminho sob encomenda. Vou mostrá-lo a uma ajudante de meio período que estou contratando. Salve como out/diagram.html (um arquivo que eu possa abrir no navegador). (Foram fornecidos dados da loja e 8 fotos de banco de imagens.)
  2. AI: É um processo passo a passo com um ramo, então vou usar o tipo de diagrama workflow. Três linhas: Cliente, Ateliê (todo pedido), Ateliê (sob encomenda, cerca de 3 semanas). Em estoque é o caminho principal.
  3. AI: Corrigindo isso: queda reta para o ramo sob encomenda, fases reagrupadas em Pagar / Separar e produzir se preciso / Embalar, enviar, chegar, e os esmaltes foram para um card lateral.
  4. AI: Criei seu diagrama de fluxo de pedidos em out/diagram.html. Escolhas que fiz: fatos que você não informou estão marcados como placeholders: etapas de embalagem, quais etapas ficam com a ajudante, como um pedido novo chega ao ateliê. A ordem da esmaltação entre as duas queimas não foi informada, então está escrito "esmaltar e queimar, duas queimas" sem ordená-las. Deixei de fora oficinas, atacado, preços e avaliações, já que não são...

O que funcionou e onde deixou a desejar

O que funcionou

  • O Claude puro desenhou uma imagem estática; a versão da skill é um visualizador interativo com temas claro e escuro, zoom, uma animação de pontinhos em movimento e um menu Export para imagem, SVG ou um vídeo curto.
  • Cada etapa fica numa linha identificada (Cliente, Ateliê todo pedido, Ateliê sob encomenda) sob cabeçalhos de fase, então quem faz o quê fica mais claro do que na coluna única da versão simples.
  • As checagens automáticas mais a revisão das próprias capturas de tela pegaram e corrigiram três bugs de layout antes da entrega.
  • Ela se ateve aos fatos informados e marcou incógnitas como placeholders (etapas de embalagem, quais etapas ficam com a ajudante, como os pedidos chegam ao ateliê).

Onde deixou a desejar

  • Para uma ajudante nova, parece um gráfico de software: visual escuro e técnico, fonte de máquina de escrever estilo código, rótulos pequenos. A página acolhedora cor de papel do Claude puro, com fotos e etapas numeradas, era mais fácil de acompanhar.
  • No celular, o diagrama não cabe: fica cortado à direita e é preciso arrastar dentro de um quadro pequeno. A versão do Claude puro empilhou direitinho numa coluna legível.
  • Ela não conseguiu usar as fotos da loja (o visualizador não tem espaço para imagens) e espremeu a etapa sob encomenda em 3 caixas, onde o Claude puro mostrou tornear, secar, primeira queima, esmaltar e segunda queima, mais uma barra de tempo.

Quer esse resultado no seu próprio trabalho?

Cadastre-se grátis e instale Archify Diagrams em cerca de um minuto. Um email libera os passos de instalação de todas as skills do site.

Sem spam. Cancele com um clique. Usamos seu e-mail para enviar o curso e dicas de IA.

Prompts que funcionam

Troque as partes entre colchetes pelos seus próprios dados. Não precisa citar a skill: peça o trabalho e sua ferramenta de IA usa a skill sozinha.

Fluxo de pedidos para uma ajudante nova
Faça um diagrama claro e bonito de como um pedido flui no [meu negócio], do momento em que o cliente paga até o pedido chegar, incluindo [o caminho especial, ex. sob encomenda]. Fatos: [etapas, prazos, regras de envio]. Se precisar de qualquer outro fato, coloque um [placeholder] bem marcado em vez de inventar.
Mapa de status para solicitações
Desenhe os status por que passa um(a) [pedido de reembolso / pedido personalizado / inscrição], de [primeiro status] até [status finais]. Mostre o que faz passar de um status para o outro e onde pode ser refeito ou cancelado.
Dê acabamento a um gráfico Mermaid
Transforme este fluxograma Mermaid num diagrama caprichado que eu possa exportar como PNG: [cole o código Mermaid]
Explicação de uma página para compartilhar
Explique [tema, ex. como funciona nossa política de reembolso] numa explicação de uma página que eu possa mandar para minha equipe, com a conclusão primeiro.

O que você precisa: Skills no app do Claude funcionam em todos os planos, incluindo o Free, com Execução de código e criação de arquivos ativadas; o Claude Code exige Pro ou superior., Node.js 18 ou mais novo para rodar as checagens (no app do Claude, só se o sandbox conseguir rodar Node.js), Chrome para a checagem final no navegador.

Como instalar

As skills seguem o padrão aberto Agent Skills, então esta não depende de uma única empresa. Escolha a ferramenta de IA que você usa. Na dúvida? A primeira aba cobre a maioria em um passo só.

Mais fácil: cole isto em sua ferramenta de IA
Instale esta skill para mim para que ela funcione em todos os projetos: rode `npx skills add https://github.com/tt-a1i/archify/tree/main/archify -g -y` no meu terminal. Se faltar o Node.js, me diga primeiro como instalar. Quando terminar, confirme que a skill foi instalada e me diga como começar a usar.

Ou faça você mesmo:

Um comando instala a skill nas ferramentas de IA do seu computador. Ele encontra as que você tem e pergunta em quais adicionar: Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, OpenCode e mais de 60 outras.

npx skills add https://github.com/tt-a1i/archify/tree/main/archify -g

Você precisa ter o Node.js instalado (grátis, em nodejs.org). A opção -g deixa a skill disponível em todos os projetos.

Bom saber: Não é feita para gráficos numéricos ou dashboards.

Libere os passos de instalação

Grátis. Deixe seu email uma vez para liberar os passos de instalação das 149 skills e receber as melhores skills novas todo mês.

Sem spam. Cancele com um clique. Usamos seu e-mail para enviar o curso e dicas de IA.

Como verificamos

Confirmamos a skill na fonte original em 18 de outubro de 2026: o SKILL.md está onde deveria, os arquivos foram atualizados no último ano e a licença (MIT) permite o uso. Depois, em 19 de outubro de 2026, instalamos, usamos na tarefa acima sem mudar a skill e anotamos o que aconteceu, inclusive o que deu errado.

Perguntas frequentes

Preciso saber programar para usar o Archify?

Não. Você descreve o processo em palavras simples, ou cola um gráfico Mermaid, e o Claude escreve os dados do diagrama e roda os comandos. Você recebe um único arquivo HTML que abre no navegador.

De qual plano e ferramentas o Archify precisa?

Skills no app do Claude funcionam em todos os planos, incluindo o Free, com Execução de código e criação de arquivos ativadas; o Claude Code exige Pro ou superior. O Archify também precisa de Node.js 18 ou mais novo para rodar as checagens e do Chrome para o teste no navegador.

O Archify funciona no Claude.ai ou só no Claude Code?

O Claude Code é o caminho principal. O projeto documenta o envio como skill no Claude.ai, mas ali ela só funciona se o sandbox conseguir rodar Node.js.

É melhor do que simplesmente pedir ao Claude?

Não para um passo a passo simples. Com o mesmo prompt de fluxo de pedidos, o Claude puro fez uma página acolhedora com fotos, todas as etapas sob encomenda, uma barra de tempo e um layout que empilhava no celular, enquanto o Archify fez um gráfico escuro em estilo de código, com menos etapas, que ficava cortado no celular. O que a skill acrescentou foi um visualizador interativo com temas, zoom e exportação de imagem, SVG ou vídeo, mais checagens automáticas de layout.

Posso exportar um diagrama do Archify como imagem ou vídeo?

Sim. O menu Export do diagrama pode salvar um PNG, JPEG, WebP ou SVG e gravar um vídeo WebM curto do diagrama animado.

Mais skills que valem a pena