draw-io-diagram-generatorpor GitHub

Draw.io Diagram Generator Skill.

Uma skill do Claude Code e Codex para diagramas e gráficos: cria e edita arquivos de diagrama draw.io (.drawio, .drawio.svg, .drawio.png).

Diagrams & Data Visualization
Diagram

Baixar OpenDesign Ver guia de uso

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

--- name: draw-io-diagram-generator description: Use when creating, editing, or generating draw.io diagram files (.drawio, .drawio.svg, .drawio.png). Covers mxGraph XML authoring, shape libraries, style strings, flowcharts, system architecture, sequence diagrams, ER diagrams, UML class diagrams, network topology, layout strategy, the hediet.vscode-drawio VS Code extension, and the full agent workflow from request to a ready-to-open file. --- ## 1. When to Use This Skill ## 2. Prerequisites ## 3. Step-by-Step Agent Workflow ## 4. Diagram-Type Recipes ## 5. Multi-Page Diagrams ## 6. Editing Existing Diagrams

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

01 O que faz

O Que a Skill draw-io-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

Uma skill para criar, editar e validar arquivos de diagrama draw.io (.drawio, .drawio.svg, .drawio.png) gerando XML mxGraph correto. Ela trata fluxogramas, arquitetura de sistemas, diagramas de sequência, diagramas ER e diagramas de classe UML por meio de modelos em assets/templates/, enquanto topologia de rede, BPMN e mapas mentais recorrem a bibliotecas de formas ou trabalho manual.

O agente recebe um workflow de seis etapas, uma paleta de cores semântica com strings de estilo prontas para uso, uma checklist de validação pré-entrega e scripts Python opcionais (validate-drawio.py, add-shape.py). É voltado para agentes que trabalham em um repositório onde os diagramas ficam junto do código que documentam, e os arquivos gerados devem abrir imediatamente na extensão hediet.vscode-drawio do VS Code.

O que ele produz

O próprio arquivo .drawio, gravado no caminho solicitado.
Um resumo de uma frase do que o diagrama mostra.
Status de validação, informando se o script validador foi executado e passou.
Instruções de edição para quando você provavelmente for personalizar o diagrama: clique em uma forma para selecioná-la, duplo clique para editar o rótulo, arraste para reposicionar.

Veja o exemplo de prompt ↗

Como funciona

01
Defina Bem a Solicitação
O workflow começa estabelecendo o tipo de diagrama, entidades ou atores, relações, caminho de saída e se o arquivo é novo ou uma edição.
02
Reutilize um Modelo ou o Esqueleto Mínimo
Quando o tipo de diagrama corresponde a um em assets/templates/, copie essa estrutura e substitua os valores de placeholder; para layouts inéditos, comece pelo esqueleto mxfile mínimo válido com as duas células raiz.
03
Planeje o Layout Antes de Escrever o XML
Primeiro esboce linhas ou níveis, depois espace as formas na grade — 40-60px horizontalmente entre formas da mesma linha, 80-120px entre linhas de nível, em um canvas padrão A4 paisagem de 1169 x 827 px.
04
Gerar o XML mxGraph
Escreva células de vértice e de aresta com ids únicos e referências de parent correspondentes, e escape caracteres especiais de XML nos rótulos para que o arquivo permaneça bem formado.
05
Aplicar Estilos da Paleta
As strings de estilo vêm de uma paleta semântica fixa — primary/info #dae8fc com #6c8ebf, warning/decision #fff2cc com #d6b656, error/end #f8cecc com #b85450 — de modo que o mesmo propósito mantenha a mesma cor em todo o projeto.
06
Salvar, Validar, Entregar
Escreva o arquivo no caminho solicitado com extensão .drawio, opcionalmente execute o validador e depois diga ao usuário como abri-lo e resuma o que o diagrama contém.

02 Encontre o ideal para você

Quando Usar a Skill draw-io-diagram-generator

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

Boa Combinação

A solicitação é produzir ou modificar um arquivo .drawio, .drawio.svg ou .drawio.png.
Você quer um arquivo que abra imediatamente sem correções manuais na extensão draw.io do VS Code.
Alguém pede para adicionar um arquivo .drawio, atualizar um diagrama existente ou visualizar um fluxo.
O sistema é complexo o suficiente para merecer várias páginas em um único arquivo.
Você precisa inserir uma forma em um arquivo existente sem editar o XML bruto manualmente.

Conheça os Limites

Diagramas de topologia de rede e BPMN não têm template embutido — o arquivo aponta para a biblioteca de formas de roteadores, servidores, firewalls e subnets em vez disso.
Mapas mentais são listados como trabalho manual: um tópico central com ramos irradiando, sem template para copiar.
Um diagrama cujo mxGraphModel está codificado em base64 aparece como comprimido e não é tratado como está; ele precisa ser reexportado como XML não comprimido a partir do app web draw.io.

O Que Fornecer

O tipo de diagramaIndique o tipo de diagrama desejado — fluxograma, arquitetura, UML, ER, sequência, rede — ou deixe a skill inferir a partir do contexto.
Entidades, atores, classes ou tabelasInforme os principais componentes que o diagrama deve conter, já que estes se tornam as células de vértice.
Relações, direção e cardinalidadeDescreva como os componentes se conectam, em qual direção e com qual cardinalidade, para que os estilos de aresta e as setas de pé de galinha sejam escolhidos corretamente.
Caminho de saídaDiga onde o arquivo .drawio deve ser salvo; diagramas devem ficar próximos do código que documentam.
Se o arquivo já existeCriar um novo e editar um existente são caminhos diferentes — uma edição começa lendo as células, posições e hierarquia atuais.

03 Dentro da skill

Regras que a Skill draw-io-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.

As Células Raiz 0 e 1 São Inegociáveis
Os ids 0 e 1 são sempre obrigatórios e devem ser as duas primeiras células de um diagrama, e nunca devem ser reutilizados para nada mais.
Um Id Único por Célula
Todo id de célula precisa ser globalmente único dentro do arquivo, então novas formas adicionadas a um diagrama existente não devem colidir com ids já em uso.
Todo Vértice Carrega Geometria
Uma célula de vértice não é válida sem um mxGeometry filho contendo x, y, width e height com as="geometry".
Arestas Se Ligam a Ids Reais
Uma aresta precisa de atributos source e target correspondentes a ids de vértices existentes.
Html=1 para Labels em HTML
Qualquer label contendo tags HTML (b, i, br) requer html=1 no estilo da célula, caso contrário as tags aparecem escapadas no diagrama.
Alinhe à Grade de 10px
Todas as coordenadas devem ser divisíveis por 10 para que as formas se alinhem de forma limpa.
Título em Toda Página, Sempre
Cada página recebe uma célula de texto de título no topo usando o estilo text com fontSize=18 e fontStyle=1 para negrito.
Nomeie Arquivos em kebab-case
Os arquivos de diagrama seguem a nomenclatura kebab-case, como order-service-flow.drawio ou database-schema.drawio, e ficam junto do código que documentam em docs/ ou architecture/.

04 Coloque em prática

Instale draw-io-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.

Adicione draw-io-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 draw-io-diagram-generator

Forma genérica da CLI skills para skills/draw-io-diagram-generator/SKILL.md; o repositório pode documentar seu próprio caminho.

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

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

Create a .drawio sequence diagram for [the checkout flow]. [Client] should send a synchronous POST /orders message to [API Server], which returns 201 Created — include the lifelines and activation boxes. Save it to [docs/checkout-flow.drawio] with a title cell at the top of the page.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

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

O arquivo começa com um elemento raiz mxfile.
Todos os valores de id de célula são únicos dentro de cada diagrama.
Toda célula de vértice tem vertex="1" e um mxGeometry filho com as="geometry".
Toda célula, exceto id=0, tem um parent apontando para um id existente.
O XML é bem formado — sem tags não fechadas e sem ampersands ou colchetes angulares não escapados em valores de atributo.
Execute o validador automatizado no arquivo finalizado.

No OpenDesign, importe o draw-io-diagram-generator a partir do 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/draw-io-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 capturado 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 draw-io-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

1. Quando Usar Este SkillFrases-gatilho para carregá-lo, além de uma tabela com oito tipos de diagrama e seus templates.
2. Pré-requisitosInstale hediet.vscode-drawio, extensões suportadas, e opcionalmente Python 3.8+ para scripts.
3. Workflow do Agente Passo a PassoSeis etapas ordenadas: entender, escolher template, planejar o layout, gerar XML, estilizar, validar.
4. Receitas por Tipo de DiagramaTrechos XML e strings de estilo para fluxograma, arquitetura, sequência, ER e classes UML.
5. Diagramas com Múltiplas PáginasVários elementos de diagrama em um único mxfile; cada página tem seu próprio namespace de id de célula.
6. Editando Diagramas ExistentesLeia primeiro, encontre a página, atribua ids que não colidam, respeite os containers, verifique as arestas.
7. Boas PráticasAlinhamento à grade, rótulos concisos, consistência de paleta, tamanho de página, nomenclatura em kebab-case e posicionamento.

A Descrição da Própria Skill

"Use ao criar, editar ou gerar arquivos de diagrama draw.io (.drawio, .drawio.svg, .drawio.png). Abrange autoria de XML mxGraph, bibliotecas de formas, strings de estilo, fluxogramas, arquitetura de sistemas, diagramas de sequência, diagramas ER, diagramas de classe UML, topologia de rede, estratégia de layout, a extensão hediet.vscode-drawio do VS Code e o fluxo de trabalho completo do agente desde a solicitação até um arquivo pronto para abrir."

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

Draw.io Diagram Generator

Execute draw-io-diagram-generator em uma Tarefa Real de Diagramas e Gráficos.

Baixe OpenDesign, importe draw-io-diagram-generator pelo 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 draw-io-diagram-generator

O Que a Skill draw-io-diagram-generator Faz no Claude Code e no Codex

Nos termos do próprio skill

Como funciona

Quando Usar a Skill draw-io-diagram-generator

Boa Combinação

Conheça os Limites

O Que Fornecer

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

As Células Raiz 0 e 1 São Inegociáveis

Um Id Único por Célula

Todo Vértice Carrega Geometria

Arestas Se Ligam a Ids Reais

Html=1 para Labels em HTML

Alinhe à Grade de 10px

Título em Toda Página, Sempre

Nomeie Arquivos em kebab-case