excalidraw-diagram-generatorpor GitHub

Excalidraw Diagram Generator Skill.

Um agente para Claude Code e Codex focado em diagramas e gráficos: gera diagramas e mapas mentais no Excalidraw a partir de linguagem natural.

Diagrams & Data Visualization
Diagram

Baixar OpenDesign Ver guia de uso

github/awesome-copilot · skills/excalidraw-diagram-generator/SKILL.mdSKILL.md

--- name: excalidraw-diagram-generator description: Generate Excalidraw diagrams from natural language descriptions. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", or "generate an Excalidraw file". Supports flowcharts, relationship diagrams, mind maps, and system architecture diagrams. Outputs .excalidraw JSON files that can be opened directly in Excalidraw. --- ## When to Use This Skill ## Prerequisites ## Step-by-Step Workflow ## Best Practices ## Example Prompts and Responses ## Advanced Techniques

Metadados e títulos de seção lidos do arquivo original em 14/09/2026 · 24.276 caracteres no total

01 O que faz

O que o Skill excalidraw-diagram-generator Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Gera diagramas no formato Excalidraw a partir de descrições em linguagem natural. Suporta nove tipos de diagrama: fluxogramas para processos sequenciais, diagramas de relacionamento para conexões entre entidades, mapas mentais para hierarquias de conceitos, diagramas de arquitetura para design de sistemas, diagramas de fluxo de dados para processos de transformação de dados, diagramas de fluxo de negócios em swimlane para workflows interfuncionais, diagramas de classe para design orientado a objetos, diagramas de sequência para interações entre objetos ao longo do tempo, e diagramas ER para relacionamentos entre entidades de banco de dados.

Gera arquivos JSON no formato .excalidraw com elementos apropriados (retângulos, elipses, losangos, setas, texto) posicionados usando coordenadas calculadas e estilizados com esquemas de cores consistentes. Os arquivos abrem diretamente no Excalidraw em excalidraw.com ou via a extensão do VS Code.

O que ele produz

Arquivo JSON .excalidraw completo com nome de arquivo descritivo
Resumo do que foi criado, incluindo o tipo de diagrama e a contagem de elementos
Instruções para abrir e editar o diagrama no Excalidraw

Veja o exemplo de prompt ↗

Como funciona

01
Entender a Solicitação
Analisa a descrição do usuário para determinar o tipo de diagrama (fluxograma, relacionamento, mapa mental, arquitetura), elementos-chave (entidades, etapas, conceitos), relações (fluxo, conexões, hierarquia) e complexidade (número de elementos).
02
Escolher o Tipo de Diagrama Apropriado
Combina a intenção do usuário com o tipo de diagrama reconhecendo palavras-chave.
03
Extrair Informações Estruturadas
Lista elementos com base no tipo de diagrama. Para fluxogramas: etapas sequenciais, pontos de decisão, pontos de início e fim.
04
Gerar o JSON do Excalidraw
Cria o arquivo .excalidraw com os tipos de elemento apropriados (rectangle, ellipse, diamond, arrow, text) e define propriedades-chave, incluindo posição (coordenadas x, y), tamanho (width, height), estilo (strokeColor, backgroundColor, fillStyle), fonte (fontFamily: 5 para Excalifont) e conexões (array de points para setas).
05
Formatar a Saída
Estrutura o arquivo Excalidraw completo com type, version, source, array de elements, appState (viewBackgroundColor, gridSize) e objeto files.
06
Salvar e Fornecer Instruções
Salva como descriptive-name.excalidraw e informa ao usuário como abrir: visitando excalidraw.com, clicando em Open ou arrastando e soltando o arquivo, ou usando a extensão Excalidraw para VS Code.

02 Encontre o ideal para você

Quando Usar a Skill excalidraw-diagram-generator

Use a skill excalidraw-diagram-generator no Claude Code ou Codex quando o trabalho for diagramas e gráficos deste tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

Processos sequenciais, workflows e árvores de decisão usando fluxogramas
Relações entre entidades, componentes de sistema e dependências usando diagramas de relacionamento
Hierarquias de conceitos, resultados de brainstorming e organização de tópicos usando mapas mentais
Design de sistemas, interações entre módulos e fluxo de dados usando diagramas de arquitetura
Workflows multifuncionais e fluxos de processo baseados em atores usando diagramas de raias (swimlane) de fluxo de negócio

Conheça os Limites

Curvas complexas, que são simplificadas em linhas retas ou curvas básicas
Imagens incorporadas na geração automática não são suportadas
Diagramas com mais de 20 elementos, já que o máximo recomendado é 20 por diagrama
Detecção automática de colisão, já que a skill usa diretrizes de espaçamento em vez disso

O Que Fornecer

Descrição clara do que deve ser visualizadoDescrição em linguagem natural do processo, sistema, relações ou conceitos a serem diagramados
Identificação de entidades, etapas ou conceitos-chaveOs principais componentes que se tornarão elementos do diagrama
Compreensão das relações ou do fluxo entre elementosComo as entidades se conectam, a sequência de etapas ou a estrutura hierárquica

03 Dentro da skill

Regras que a Skill excalidraw-diagram-generator Dá ao Claude Code e ao Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Limites de Contagem de Elementos
Etapas de fluxograma: 3-10 recomendadas, 15 no máximo. Entidades de relacionamento: 3-8 recomendadas, 12 no máximo. Ramos de mapa mental: 4-6 recomendados, 8 no máximo.
Família de Fonte Obrigatória
Todos os elementos de texto devem usar fontFamily: 5 (Excalifont) para uma aparência visual consistente. Isso é obrigatório na checklist de validação.
Diretrizes de Espaçamento
Espaço horizontal entre elementos: 200-300px. Espaço vertical entre linhas: 100-150px. Tamanho do texto: 16-24px para legibilidade.
Consistência do Esquema de Cores
Elementos primários usam azul claro (#a5d8ff), elementos secundários usam verde claro (#b2f2bb), elementos importantes/centrais usam amarelo (#ffd43b) e alertas/avisos usam vermelho claro (#ffc9c9).
Gestão de Complexidade
Se a solicitação do usuário tiver muitos elementos, sugira dividir em vários diagramas, foque primeiro nos elementos principais e ofereça criar subdiagramas detalhados.
Direção do Fluxo de Dados
Em diagramas de fluxo de dados, não represente a ordem do processo, apenas o fluxo de dados. Os fluxos de dados devem ser mostrados da esquerda para a direita ou do canto superior esquerdo para o inferior direito.
Máximo de Contagem de Elementos
A contagem de elementos deve ser razoável, com menos de 20 elementos para garantir clareza. Isso é verificado na checklist de validação antes da entrega.
IDs Únicos e Sem Sobreposição
Todos os elementos devem ter IDs únicos e as coordenadas devem evitar sobreposição. Essas são verificações de validação obrigatórias antes de entregar o diagrama.

04 Coloque em prática

Instalar excalidraw-diagram-generator no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar excalidraw-diagram-generator ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

npx skills add https://github.com/github/awesome-copilot --skill excalidraw-diagram-generator

Formato genérico da CLI skills para skills/excalidraw-diagram-generator/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê à Skill uma Primeira Tarefa de Diagramas e Gráficos

Adapte este prompt com seu próprio conteúdo e restrições, depois execute no Claude Code ou Codex.

Example prompt

Create a flowchart for user registration

Fonte: exemplo do SKILL.md (na íntegra).

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Verifique se todos os elementos têm IDs únicos
Verifique se o texto está legível com tamanho de fonte 16 ou maior
Verifique se todos os elementos de texto usam fontFamily: 5 (Excalifont)
Confirme que as setas se conectam logicamente e que as cores seguem um esquema consistente

No OpenDesign, importe o excalidraw-diagram-generator pelo link do seu SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: GitHub
Repository: github.com/github/awesome-copilot Branch main
Arquivo da skill: skills/excalidraw-diagram-generator/SKILL.md Checksum de conteúdo registrado na verificação; commit 1899b18
License: MIT De LICENSE.
Estrelas do repositório: 38.981 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório github/awesome-copilot, que contém 6 skills neste catálogo. Não é uma classificação ou contagem de uso para excalidraw-diagram-generator.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Quando Usar Esta SkillLista frases de gatilho e tipos de diagramas suportados, incluindo fluxogramas, relacionamentos, mapas mentais, arquitetura, DFD, swimlane, classe, sequência e diagramas ER
Pré-requisitosRequer descrição clara, identificação das principais entidades ou etapas, e compreensão das relações ou do fluxo
Fluxo de Trabalho Passo a PassoProcesso de seis etapas, desde a compreensão da solicitação até a escolha do tipo de diagrama, extração de informações, geração de JSON, formatação da saída e salvamento com instruções
Boas PráticasDiretrizes sobre quantidade de elementos, dicas de layout para espaçamento e posicionamento, esquemas de cores, tamanho de texto e estratégias de gerenciamento de complexidade
Exemplos de Prompts e RespostasTrês exemplos mostrando um fluxograma de cadastro de usuário, relações entre usuário-post-comentário e um mapa mental de aprendizado de máquina com etapas de extração
Solução de ProblemasSoluções para elementos sobrepostos, problemas de ajuste de texto, excesso de elementos, layout pouco claro e cores inconsistentes
Técnicas AvançadasFórmula de layout em grade para diagramas de relacionamento, layout radial para mapas mentais e padrão de ID gerado automaticamente usando timestamp e string aleatória
Formato de SaídaSempre fornece o arquivo JSON .excalidraw completo, um resumo com a contagem de elementos e instruções para abrir no excalidraw.com ou no VS Code
Lista de ValidaçãoOito verificações antes da entrega, incluindo IDs únicos, ausência de coordenadas sobrepostas, texto legível, família de fonte Excalifont, setas lógicas, cores consistentes, JSON válido e quantidade razoável de elementos
Bibliotecas de Ícones (Melhoria Opcional)Fluxo de trabalho em script Python para adicionar ícones de serviços em nuvem a partir das bibliotecas do Excalidraw, incluindo instruções de configuração e uso de add-icon-to-diagram.py e add-arrow.py
ReferênciasDocumentação de schema incluída, especificações de tipos de elementos, oito templates de diagramas, três scripts Python para integração de ícones e setas, e README dos scripts
LimitaçõesCurvas simplificadas, sem imagens incorporadas, máximo de 20 elementos recomendado, sem detecção automática de colisão

A Descrição da Própria Skill

Gera diagramas Excalidraw a partir de descrições em linguagem natural. Use quando solicitado para "criar um diagrama", "fazer um fluxograma", "visualizar um processo", "desenhar uma arquitetura de sistema", "criar um mapa mental" ou "gerar um arquivo Excalidraw". Suporta fluxogramas, diagramas de relacionamento, mapas mentais e diagramas de arquitetura de sistema. Gera arquivos JSON .excalidraw que podem ser abertos diretamente no Excalidraw.

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 24.276 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre a Skill excalidraw-diagram-generator

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Como abro o arquivo de diagrama gerado?

Acesse excalidraw.com e clique em Abrir ou arraste e solte o arquivo .excalidraw. Alternativamente, você pode usar a extensão Excalidraw do VS Code para abri-lo diretamente no seu editor.

Posso usar ícones da AWS ou de serviços em nuvem nos meus diagramas?

Sim, a skill suporta bibliotecas de ícones do excalidraw.com/libraries. Você baixa um arquivo .excalidrawlib, executa o script split-excalidraw-library.py para dividi-lo em ícones individuais e, em seguida, usa os scripts Python add-icon-to-diagram.py e add-arrow.py para adicionar ícones e conexões ao seu diagrama.

Essa abordagem evita o consumo de tokens e proporciona transformações de coordenadas precisas com geração automática de UUID.

Excalidraw Diagram Generator

Execute excalidraw-diagram-generator em uma tarefa real de diagramas e gráficos.

Baixe o OpenDesign, importe excalidraw-diagram-generator a partir do link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills

Terminal

npx skills add https://github.com/github/awesome-copilot --skill excalidraw-diagram-generator

O que o Skill excalidraw-diagram-generator Faz no Claude Code e no Codex

Nos termos do próprio skill

Como funciona

Quando Usar a Skill excalidraw-diagram-generator

Boa Combinação

Conheça os Limites

O Que Fornecer

Regras que a Skill excalidraw-diagram-generator Dá ao Claude Code e ao Codex

Limites de Contagem de Elementos

Família de Fonte Obrigatória

Diretrizes de Espaçamento

Consistência do Esquema de Cores

Gestão de Complexidade

Direção do Fluxo de Dados

Máximo de Contagem de Elementos

IDs Únicos e Sem Sobreposição