wliafe/drawio-skill

Usa o Next AI Draw.io MCP para verificar conexões, orientar a instalação autorizada, operar sessões e objetos no diagrama, salvar alterações atuais e exportar nos formatos drawio, PNG, SVG e drawio.svg editável. Adequado para tarefas que exigem chamar este MCP, controlar a capacidade antes de inserir imagens, exportar de forma síncrona e gerenciar arquivos por versão de tema.

O que é drawio-skill?

Esta skill habilita agentes de IA (como Claude Code, Cursor, Codex) a interagir programaticamente com o servidor MCP `@next-ai-drawio/mcp-server` para realizar tarefas de criação e edição de diagramas drawio. Ela gerencia todo o ciclo de vida da interação com o MCP: desde a verificação da conexão e configuração do servidor, passando pela criação e manipulação de sessões e objetos no diagrama (carregar, editar, criar novos diagramas), até o salvamento e exportação dos arquivos nos formatos drawio, PNG, SVG e drawio.svg editável. A skill é particularmente útil para desenvolvedores que precisam automatizar a geração de diagramas, controlar rigorosamente o tamanho dos arquivos antes de inserir imagens (evitando estouros de limite), e manter um versionamento claro por tema e versão. Ela segue um fluxo de trabalho bem definido: primeiro verifica se o servidor MCP está disponível e configurado, depois determina a tarefa (novo diagrama, edição de arquivo existente, continuação da tela atual, ou salvamento de modificações manuais do usuário), e então executa as operações necessárias. A skill prioriza o reuso de sessões existentes, gerencia conflitos concorrentes, e fornece feedback detalhado sobre cada etapa, incluindo verificação de sincronização e inspeção visual do resultado exportado. É compatível com qualquer cliente de IA que suporte o protocolo MCP, e sua descrição detalhada está no arquivo SKILL.md.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add wliafe/drawio-skill

Installed? Explore more Programação e Desenvolvimento skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Habilidade de Operação Draw.io MCP

Use o Next AI Draw.io MCP Server (@next-ai-drawio/mcp-server) para executar tarefas de desenho já determinadas. Esta habilidade é responsável pelo uso da ferramenta e entrega confiável, não especificando composição, esquema de cores, fontes ou métodos de expressão de pesquisa. O fluxo principal se aplica a diferentes clientes de IA; a descoberta da ferramenta, a chamada e o carregamento da habilidade são determinados pelo host atual.

Determinar a Tarefa e o Serviço Primeiro

  1. Determine a partir da solicitação do usuário e do contexto atual: criar um novo, modificar um arquivo existente, continuar na tela atual ou salvar as modificações manuais que o usuário acabou de fazer. Use prioridade para materiais especificados explicitamente, diretório alvo e versão existente.
  2. Veja as ferramentas MCP atualmente expostas e mapeie os nomes das ferramentas de serviço abaixo de acordo com a descrição real da ferramenta, por exemplo, get_diagram, edit_diagram, export_diagram; não codifique namespaces de cliente, aliases de serviço ou sintaxe de chamada.
  3. Quando a ferramenta alvo está exposta e o cliente atual permite sua chamada, use o get_drawing_guide somente leitura para verificar a resposta; mantenha as decisões existentes de desabilitar ou rejeitar. Se já estiver disponível, continue, não adicione novamente. Se a ferramenta não estiver exposta, não significa que não está instalada; para verificar configuração, instalação, recarregar ou diagnosticar, leia Verificação e Instalação MCP.
  4. Este fluxo é para o pacote mencionado. Quando o usuário especificar explicitamente outro serviço de desenho, mantenha sua escolha, explique os limites de adaptação e não substitua por conta própria.

Os serviços existentes são identificados pela identidade do pacote; o nome do serviço pode não ser drawio. Apenas quando a configuração está visível, mas ainda não respondeu realmente, reporte "Configurado, aguardando verificação". Se faltar acesso a ferramentas, terminal ou configuração, forneça o método executável atual, não diga que o serviço não existe porque não pode ser verificado.

Determinar Local de Entrega e Versão

Por padrão, salve quatro arquivos com o mesmo nome em Documentos do Projeto/Nome do Tema/v1/: Nome do Tema.drawio, Nome do Tema.png, Nome do Tema.svg, Nome do Tema.drawio.svg. O nome pode ser em chinês ou inglês, a versão é colocada apenas no diretório. Novos temas começam em v1; para diagramas existentes, mantenha a versão atual, apenas crie um novo vN se o usuário solicitar explicitamente.

Arquivos existentes continuam usando o caminho e nome originais, sem renomeação automática, migração ou atualização de versão. O diretório, formato e limites de edição especificados pelo usuário têm prioridade. Ao lidar com nomeação, nova versão, múltiplas páginas ou divisão de diagrama, leia Convenções de Desenho e Arquivo.

Operações de Sessão e Objeto

  • Execute operações MCP com base no conteúdo e design fornecidos pela tarefa atual; quando a entrada necessária não puder ser inferida, confirme apenas os itens ausentes que alterariam o objeto da operação ou o resultado.
  • Reutilize preferencialmente a sessão alvo já confirmada. Se for realmente necessário criar ou restaurar uma nova sessão, chame start_session, leia o formato da ferramenta e as restrições de operação; se essa informação estiver faltando, use get_drawing_guide. Verificar a conexão não requer uma nova sessão.
  • Para arquivos existentes, use load_diagram primeiro, depois get_diagram para ler os IDs dos objetos, e então edit_diagram para modificar por ID. Se a tela atual ainda for conhecida e válida, você pode fazer edições locais diretamente; em caso de conflitos de modificação concorrente, reorganize a edição com base no conteúdo mais recente retornado pelo serviço, sem sobrescrever as novas modificações do usuário.
  • load_diagram e create_new_diagram substituirão o documento atual. Antes de alternar, confirme se a tela atual é o alvo e se há modificações manuais que devem ser preservadas. Quando o usuário solicitar o salvamento das modificações atuais, leia e exporte a tela atual diretamente, sem primeiro carregar o arquivo antigo do disco.
  • Use create_new_diagram apenas para novos diagramas ou quando o usuário solicitar explicitamente a substituição completa. Todas as gravações e modificações de .drawio / .drawio.svg são feitas através do MCP; não use ferramentas de arquivo ou scripts para reescrever o XML do diagrama diretamente. Construir parâmetros XML conforme necessário pela ferramenta é uma chamada normal.
  • Mantenha texto, nós, relacionamentos e grupos editáveis; o material pode ser incorporado, mas o diagrama inteiro não pode ser achatado em uma imagem para substituir o arquivo de origem editável.
  • Antes de usar ícones como serviços em nuvem, dispositivos de rede, etc., chame get_shape_library e use os nomes de estilo reais retornados; não adivinhe identificadores de ícone.
  • Para edição de múltiplas páginas, primeiro use list_pages para determinar o alvo, use explicitamente o parâmetro de seleção de página, não dependa da primeira página padrão. Quando o usuário disser "esta caixa" ou "a seta selecionada", use get_selection. Se a leitura da seleção não estiver disponível, leia a tela e localize por página, etiqueta e posição; apenas se ainda houver vários candidatos, pergunte especificamente, não re-instale o serviço ou peça repetidamente para selecionar novamente.

Imagens e Capacidade

Antes de inserir imagens, leia Pré-processamento de Imagem e Controle de Capacidade. Primeiro verifique o material e o volume de incorporação estimado, comprima a cópia se necessário: fotos permitem redimensionamento moderado e compressão com perdas; texto, linhas finas e materiais transparentes priorizam fidelidade. Não sobrescreva o material original, não instale software de pré-processamento automaticamente.

O orçamento deve cobrir o Base64 real, o XML completo do diagrama, a solicitação serializada e a exportação de retorno. get_diagram pode ocultar dados de imagem; o comprimento do texto retornado não prova que o diagrama não excedeu o limite. Após inserir material grande, tente exportar via MCP o mais cedo possível; a criação, modificação e exportação nos quatro formatos usam apenas o MCP, não use outras ferramentas para complementar a exportação, nem invente parâmetros não expostos como width, height, scale.

Se, após compressão para qualidade aceitável, ainda houver obstrução, mantenha os resultados bem-sucedidos, explique o gargalo, e deixe o usuário decidir se continua a comprimir, excluir material ou dividir o diagrama; não altere o conteúdo ou divida páginas automaticamente.

Salvar e Exportar

  1. Antes de salvar, use get_diagram para ler a tela atual, o arquivo correspondente, a página e o caminho de saída. Verifique os avisos de sincronização primeiro; "Chamada bem-sucedida, mas pode ter perdido modificações manuais recentes" não significa que o estado mais recente foi confirmado. Restaure a sincronização antes da exportação formal; se a ferramenta já escreveu o arquivo, esclareça que a novidade do arquivo ainda não foi verificada e re-exporte após a restauração.
  2. Salve .drawio através de export_diagram; o arquivo fonte completo de múltiplas páginas não leva o parâmetro de seleção de página. Por padrão, exporte também PNG, SVG, .drawio.svg editável; se o usuário solicitar explicitamente apenas alguns formatos, atenda à sua solicitação. Imagens e SVG editável selecionam explicitamente a página alvo, não dependem da página ativa do navegador.
  3. .drawio.svg deve ser exportado usando o formato correspondente, não pode renomear um SVG comum para substituí-lo. Verifique o conteúdo da fonte incorporada; antes da leitura de segurança, salve a tela atual. Para múltiplas páginas, explique quais páginas a cópia contém; não pode tratar uma cópia de página única como o arquivo fonte completo.
  4. Após a exportação, leia novamente e verifique o estado do conteúdo observável, verifique os avisos de sincronização. O serviço não tem trava de instantâneo geral; se o conteúdo mudar durante o período, re-sincronize e exporte os arquivos afetados, não trate uma única leitura como garantia de consistência para os quatro arquivos. Se houver mudanças contínuas ou não puder confirmar, indique claramente que a aceitação da sincronização não foi concluída, e se necessário, peça ao usuário para pausar a edição manual.
  5. Use caminhos absolutos no ambiente de execução real do MCP. Verifique a integridade do conteúdo e se o material está faltando na geração do arquivo e na renderização final; uma captura de tela normal não significa que a exportação formal foi bem-sucedida. Ver XML somente leitura ou ver uma mensagem de exportação bem-sucedida também não substitui uma verificação de renderização real.
  6. Após a recuperação da conexão, tente novamente uma vez; problemas claros de capacidade devem ser corrigidos primeiro, depois tente novamente a etapa afetada uma vez. Se não houver alteração, não repita a chamada; se ainda falhar, explique o gargalo específico e o formato ausente. Regras detalhadas de salvamento estão em Convenções de Desenho e Arquivo.

Feedback de Resultados

Forneça brevemente o arquivo fonte, a imagem, a versão usada e as verificações concluídas. Descreva separadamente "configuração existe", "ferramenta respondeu", "arquivo salvo" e "renderização verificada" conforme o caso.

Se a exportação de imagem ou a verificação visual for obstruída, primeiro mantenha o arquivo fonte salvo com sucesso, explique o formato ausente e a razão específica; não use imagens antigas como exportação atual, não escreva partes não verificadas como concluídas.

Habilidades Relacionadas