Tldraw Skill

Você descreve um processo ou um sistema e recebe o diagrama em imagem, com traço de quadro branco, pronto pra explicar pro time, pro cliente ou num post.

por agents365-ai

instalações: 3.700
estrelas no GitHub: 91
No skills.sh desde: maio de 2026
Licença: Sem licença declarada

Atualizada no GitHub em 16 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

agents365-ai
tldraw-skill
Você descreve um processo ou um sistema e recebe o diagrama em imagem, com traço de quadro branco, pronto pra explicar pro time, pro cliente ou num post.Auditada3.700 instalações, grátis

O que ela faz

Faz o Claude desenhar diagramas no estilo do tldraw, com traço de quadro branco feito à mão. Ele escreve o arquivo .tldr (o formato do tldraw) e exporta em PNG ou SVG pelo programa tldraw-cli, com opção de fundo transparente e de tema escuro.

Tem modelos prontos pra fluxograma, arquitetura de sistema, diagrama de sequência, camadas de modelo de IA, diagrama de banco de dados (ERD) e UML. Antes de mostrar, o Claude olha a imagem exportada e corrige texto estourando a caixa, rótulos sobrepostos e setas soltas.

Depois você pede ajuste em português (troca a cor, move uma caixa, põe mais uma seta) e ele edita só aquele pedaço, sem refazer o desenho. Passadas cinco rodadas, sugere abrir o arquivo no tldraw.com pra acertar à mão.

Nas palavras de quem fez

Use when user requests diagrams, flowcharts, architecture charts, or visualizations. Also use proactively when explaining systems with 3+ components, complex…

agents365-ai, no SKILL.md

Quando usar

Desenhar o fluxo de venda, do anúncio ao pós-venda, pra explicar pro time
Mostrar pro cliente como as partes do sistema dele conversam
Transformar um processo de várias etapas numa imagem pra aula ou post
Rascunhar as tabelas de um banco de dados e como elas se ligam

Depois de instalar, é só pedir assim

/tldraw-skill desenha o meu funil: anúncio, página de vendas, checkout, e-mail de boas-vindas e área de membros
/tldraw-skill faz um diagrama de arquitetura do meu app com site, API, banco de dados e pagamento, e exporta em PNG
Muda a caixa do checkout pra verde e põe uma seta dela pro e-mail

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketPassou
SnykPassou

Perguntas

Como instalar a Tldraw Skill no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Tldraw Skill, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O que precisa pra funcionar?

Node.js e o programa tldraw-cli (npm install -g @kitschpatrol/tldraw-cli). Na primeira exportação ele pode pedir uma versão específica do Chrome, que se instala com um comando. Não pede chave de API nem conta. Como é um programa de terminal, roda também no Codex e no Antigravity.

Como eu chamo a skill?

Ela vem marcada pra não entrar sozinha: você chama pelo nome, com /tldraw-skill, e descreve o diagrama. Os ajustes seguintes você pede normalmente na conversa.

Serve pra logo ou pra diagrama de apresentação caprichado?

Não. O tldraw não pinta forma com cor cheia (o preenchimento mais forte é um tom claro), então logo e ícone ficam ruins, e pra diagrama de apresentação corporativa a própria skill indica o drawio. Também não organiza sozinho diagramas com muitos itens; pra isso ela sugere o mermaid.

Levar essa skill

1x tldraw-skillR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/agents365-ai/365-skills

Aprenda a usar

Claude Design: como usar, até no plano grátis
O Claude Design cria tela de site, protótipo e slide conversando, e agora vem até no plano grátis. Veja onde abrir, como usar e como levar pro Claude Code.