Peça pro seu agente de IA desenhar diagramas com cara de revista

01Pra que serve

• Transformar uma explicação em diagrama bonito: como o seu sistema funciona, um fluxo de atendimento, um cronograma, uma matriz de prioridades.
• 44 tipos de diagrama (fluxograma, linha do tempo, cronograma, quadrante, mapa de fluxo e mais), cada um em 3 versões: clara, escura e estilo revista.
• Copiar a identidade visual do seu site: você passa o endereço e ele pega as cores e as fontes. Dá pra guardar marcas diferentes, uma por cliente.
• Redesenhar no mesmo estilo diagramas que você já tem no draw.io, no Mermaid ou no Excalidraw.
• Salvar como imagem PNG com o dobro da resolução, pronta pra slide, post ou documento.

02O que você precisa

• Um agente de IA: Claude Code, Codex, Cursor ou outro que aceite skills
• Node.js instalado (é ele que roda o comando npx do passo 2)
• Pra salvar em PNG: Python e o Playwright (passo 5)

03Passo a passo

1. Abra o terminal (no Windows, procure por "PowerShell" no menu Iniciar; no Mac, "Terminal").
2. Instale a skill. Esse comando serve pra qualquer agente compatível. Se ele perguntar em quais agentes instalar, escolha os seus.

   Copiar

   npx skills add cathrynlavery/diagram-design

3. Usa o Claude Code? Também dá pra instalar por dentro dele. Cole as duas linhas, uma de cada vez, na conversa do Claude Code.

   Copiar

   /plugin marketplace add cathrynlavery/diagram-design
   /plugin install diagram-design@diagram-design

4. Usa o Codex? O caminho dele é este:

   Copiar

   codex plugin marketplace add cathrynlavery/diagram-design
   codex plugin add diagram-design@diagram-design

5. Pra salvar os diagramas como imagem PNG, instale o Playwright (o programa que tira a "foto" do diagrama em alta resolução) uma vez só:

   Copiar

   pip install playwright && playwright install chromium

6. Abra o agente de novo e peça em português, como nos prompts abaixo. Ele diz qual tipo vai usar e entrega um arquivo .html: é só dar dois cliques pra abrir no navegador.

04Prompts prontos pra colar no seu agente

Onboard diagram-design to [https://seusite.com.br]
Pegue as cores e as fontes do site e me mostre o resultado antes de aplicar. Salve como o perfil [NOME DA MARCA].

Use o diagram-design pra desenhar um fluxograma de como funciona o atendimento da [NOME DA EMPRESA]:
[o cliente chega por onde] -> [quem atende] -> [o que acontece depois] -> [como termina].
Textos em português, versão estilo revista (full-editorial). Depois salve como PNG.

Use o diagram-design pra fazer um quadrante de impacto x esforço com estes projetos: [PROJETO 1], [PROJETO 2], [PROJETO 3], [PROJETO 4].
Coloque cada um no lugar certo e me explique em uma frase por que ficou ali. Versão clara (minimal light), textos em português.

Redesenhe o diagrama do arquivo [NOME DO ARQUIVO.drawio] com o diagram-design, no formato de slide 16:9 e mais simples, pra uma apresentação pra [QUEM VAI VER].
Mantenha todas as etapas, troque os textos pra português e salve como PNG.