1
🧩 O que é / o que faz
O skill excalidraw-diagram-generator converte descrições em linguagem natural em arquivos .excalidraw (JSON) que abrem diretamente no Excalidraw — sem nenhuma configuração adicional.
💡 Conceito principal
O Excalidraw é uma ferramenta de diagramação de estilo mão-livre (hand-drawn look). O skill transforma texto em JSON estruturado compatível com o schema do Excalidraw — elementos como retângulos, elipses, diamantes, setas e texto, cada um com posição, tamanho, cor e propriedades de estilo.
Tipos de diagrama suportados
🔀 Flowcharts
Fluxos de processo com nós de decisão (diamante), início/fim (elipse) e etapas (retângulo).
🕸️ Diagramas de Relacionamento
Entidades e suas conexões; útil para modelagem de dados e mapeamento de dependências.
🧠 Mind Maps
Layout radial com nó central e ramos expandindo em círculo, gerados automaticamente.
🏗️ Arquitetura de Sistema
Componentes de sistema (serviços, bancos, APIs) com setas mostrando fluxo de dados.
Conceitos-chave
📄
.excalidraw
Formato JSON
✋
Hand-drawn
Estilo visual
🗣️
Linguagem natural
Entrada
🖱️
Zero setup
Abre direto
2
🎣 Quando dispara
O Claude aciona o excalidraw-diagram-generator quando reconhece uma das frases-gatilho listadas na description do skill.
🎯 Gatilhos exatos (da description do skill)
→ "create a diagram"
→ "make a flowchart"
→ "visualize a process"
→ "draw a system architecture"
→ "create a mind map"
→ "generate an Excalidraw file"
Timeline: do pedido ao arquivo
1
Usuário pede o diagrama em linguagem natural
Ex.: "Crie um fluxograma do processo de deploy"
2
Skill acionado — Claude escolhe o tipo de diagrama
Flowchart, relationship, mind map ou system architecture
3
Geração do JSON com elementos e coordenadas
Cada elemento recebe x, y, width, height, strokeColor, backgroundColor, type
4
Arquivo .excalidraw salvo e instruções entregues
Usuário abre em excalidraw.com ou app local — nenhuma conversão necessária
💡 Tip: O skill aceita pedidos em português. Basta descrever o processo — o Claude infere etapas, conexões e hierarquia sem você listar cada elemento.
Conceitos-chave
🔍
Auto-detecção
Tipo de diagrama
🗂️
Extração
De entidades
📐
Layout
Posicionamento
💾
Arquivo final
.excalidraw
3
🚀 Como melhora suas páginas
Diagramas entregues já editáveis eliminam o ciclo de "criar no Figma, exportar PNG, repetir a cada mudança".
✓ FAZER com o skill
- ✓ Gerar diagrama de arquitetura de sistema já na primeira conversa
- ✓ Criar fluxo de onboarding para inserir em docs ou apresentações
- ✓ Mapear dependências entre módulos de código em mind map
- ✓ Usar o arquivo entregue como rascunho editável no Excalidraw
✗ EVITAR
- ✗ Esperar renderização perfeita de pixel — o estilo é propositalmente "sketch"
- ✗ Pedir diagramas UML formais com notação estrita (use Mermaid para isso)
- ✗ Gerar mais de ~40 nós em uma única chamada — qualidade degrada
- ✗ Usar como substituto de ferramentas vetoriais precisas (Illustrator, Figma)
📊 Valor concreto no resultado final
Editável
Entregue como JSON, qualquer elemento pode ser movido, recolorido ou deletado no Excalidraw sem recriar tudo.
Iterativo
Pedidos de ajuste ("adicione um nó de cache entre o servidor e o banco") geram um novo arquivo em segundos.
Exportável
Excalidraw exporta para PNG/SVG com fundo transparente — encaixa em qualquer doc ou slide.
Conceitos-chave
🔄
Iteração rápida
Segundos/ajuste
🖊️
Editável
JSON aberto
📤
Export PNG/SVG
Para docs
⏱️
Zero ferramenta
extra
4
⚙️ Como funciona por dentro
Pipeline de 6 passos definidos no SKILL.md: entender → escolher tipo → extrair estrutura → gerar JSON → formatar saída → salvar e instruir.
📦 Stack técnico do skill
excalidraw-schema.md
Schema completo do JSON do Excalidraw: tipos de elementos, propriedades obrigatórias, valores válidos.
element-types.md
Especificações detalhadas de rectangle, ellipse, diamond, arrow, line e text — com exemplos JSON.
split-excalidraw-library.py
Script Python que explode um
.excalidrawlib em ícones individuais para uso em diagramas com bibliotecas externas (AWS, Material etc.).Templates de partida
flowchart-template.json
Estrutura base para fluxogramas — nós conectados em sequência linear com suporte a ramificação.
relationship-template.json
Grid layout para diagramas de relacionamento — entidades em matriz com setas bidirecionais.
mindmap-template.json
Layout radial — nó central com ramos expandindo em arco, gerado com cálculo trigonométrico de ângulos.
⚙️ Detalhe técnico: IDs dos elementos são gerados automaticamente (strings aleatórias de 20 caracteres) para garantir unicidade dentro do JSON. Setas referenciam os IDs dos nós de origem e destino nos campos
startBinding e endBinding.
✓ Diagramas simples (recomendado)
- • Flowchart: 5–15 nós
- • Mind map: 1 centro + até 8 ramos
- • Relacionamento: até 10 entidades
- • Arquitetura: 6–12 componentes
✗ Evitar — degrada qualidade
- • Mais de 40 elementos em uma chamada
- • Diagramas com sobreposição densa
- • Labels com mais de 3–4 palavras
- • Hierarquias com mais de 4 níveis
Conceitos-chave
🗺️
Schema JSON
Excalidraw
🔗
Bindings
Start/End IDs
🐍
split-library.py
Ícones externos
📐
Layout radial
Trigonometria
5
💬 Exemplo prático + PROMPT pronto
Três cenários reais: fluxograma de processo, arquitetura de sistema com ícones e mind map de estratégia.
📋 Cenário 1 — Fluxograma de processo de deploy
Você quer documentar o pipeline de CI/CD da sua equipe de forma visual para o README.
Crie um fluxograma do nosso processo de deploy:
1. Developer faz push no branch
2. CI roda testes (se falhar → notifica Slack e termina)
3. Build da imagem Docker
4. Deploy no staging
5. Smoke tests (se falhar → rollback automático)
6. Aprovação manual do tech lead
7. Deploy em produção
8. Monitoramento por 10 minutos
Salve como deploy-flow.excalidraw
🏗️ Cenário 2 — Arquitetura de microserviços
Diagrama de arquitetura para apresentação técnica ao time.
Draw a system architecture diagram with these components:
- React frontend (browser)
- API Gateway
- Auth Service (JWT)
- Product Service
- Order Service
- PostgreSQL (shared)
- Redis cache (between API Gateway and services)
- Notification Service (async via message queue)
Show data flow arrows. Output: microservices-arch.excalidraw
🧠 Cenário 3 — Mind map de produto
Create a mind map for "Lançamento de Produto":
Centro: Lançamento Q3
Ramos principais: Marketing, Produto, Eng, Dados, Suporte
- Marketing → campanha email, social ads, landing page
- Produto → feature flags, onboarding, changelog
- Eng → deploy gradual, monitoramento, rollback plan
- Dados → métricas de ativação, funil, cohorts
- Suporte → FAQ, treinamento, escalação
Salve: lancamento-q3.excalidraw
🎯 Resultado esperado: Um arquivo
.excalidraw com todos os elementos posicionados. Abra em excalidraw.com ou no app desktop — nenhuma instalação adicional. Ajuste cores e posições livremente após a geração.
Conceitos-chave
🔀
Flowchart
Processo linear
🏗️
System arch
Componentes
🧠
Mind map
Radial
📎
Nomeie o arquivo
No prompt
6
🧬 Combina com / limites — e o contraste com beautiful-mermaid
Excalidraw e beautiful-mermaid são complementares: um para rascunho visual, o outro para diagramas técnicos precisos.
🔬 Excalidraw vs beautiful-mermaid — qual usar quando?
✏️ Excalidraw
- • Estilo mão-livre — visual descontraído, ideal para apresentações e wireframes
- • Arquivo editável — você abre e ajusta cada elemento no canvas
- • Sem notação formal — liberdade total de layout
- • Melhor para: onboarding, docs técnicas casuais, brainstorm visual
📊 beautiful-mermaid
- • Estilo técnico limpo — renderização precisa baseada em texto Mermaid
- • Código como fonte — diagramas versionáveis no Git
- • Notação formal: Sequence, Class, Gantt, ER, C4, Git graph
- • Melhor para: PRs, READMEs técnicos, documentação de API, relatórios
Regra prática: se o diagrama vai para um deck ou apresentação → Excalidraw. Se vai para o README ou PR → beautiful-mermaid.
Combina com estes skills do curso
📊 beautiful-mermaid(T4 • 4.1)
Use Excalidraw para o rascunho inicial, depois converta para Mermaid quando precisar de diagrama versionável e preciso no repo.
🔭 website-intelligence(T4 • 4.4)
Extraia a estrutura de um site com website-intelligence, depois visualize a arquitetura de informação em um diagrama Excalidraw.
🧱 web-artifacts-builder(T1 • 1.3)
Mapeie a arquitetura de componentes com Excalidraw antes de construir com web-artifacts-builder — o diagrama vira especificação visual.
🕹️ agent-browser(T4 • 4.3)
Automatize a abertura e screenshot do arquivo .excalidraw no browser com agent-browser para integrar o diagrama em pipelines de documentação.
⚠️ Limites do skill
- • Não suporta diagramas UML formais (use Mermaid classeDiagram ou sequenceDiagram)
- • Ícones de bibliotecas externas (AWS, Material) requerem setup manual com
split-excalidraw-library.py - • Posicionamento de nós é aproximado — layouts muito complexos podem precisar de ajuste manual
- • Não substitui ferramentas vetoriais para design preciso de UI
Conceitos-chave
✏️
Mão-livre
vs técnico
🔗
Complementar
com Mermaid
🚫
Sem UML formal
Limitação
🏆
Apresentações
Caso ideal
✅ Resumo do Módulo 4.2
✓ O skill excalidraw-diagram-generator gera arquivos
.excalidraw a partir de descrições em linguagem natural✓ Suporta flowcharts, diagramas de relacionamento, mind maps e arquitetura de sistema
✓ A saída é JSON puro compatível com Excalidraw — sem conversão, abre direto
✓ Internamente usa schema JSON + templates (flowchart, relationship, mindmap)
✓ Ícones externos (AWS, Material) via
split-excalidraw-library.py com setup manual✓ Complementar a beautiful-mermaid: estilo mão-livre para apresentações vs. técnico para repos
✓ Complexidade ideal: 5–15 nós; evitar mais de 40 elementos por chamada
✓ Combina com website-intelligence, web-artifacts-builder e agent-browser
Próximo módulo
🕹️
4.3 — agent-browser
Automação de browser com Playwright: navegação, screenshots, extração de dados e testes web diretamente via Claude Code.