Draw.io

Integra as capacidades de diagramação do Draw.io com agentes de IA, permitindo controle e análise programática de diagramas.

GitHub

1.5k

Experimente este MCPPatrocinado

Documentação

Servidor MCP Draw.io

Vamos fazer um pouco de Vibe Diagramming com a ferramenta de diagramação mais difundida chamada Draw.io (Diagrams.net).

Destaques Principais

Plugin Claude Code: /plugin marketplace add lgazo/drawio-mcp-server e depois /plugin install drawio, com comandos de barra /drawio-open e /drawio-status
npx drawio-mcp-server install <host> grava a configuração do MCP para claude-code, claude-desktop, codex, zed, opencode ou all
Ferramentas de persistência de documentos: set-document-title e save-document
Mecanismo de compatibilidade de versão da API da biblioteca Draw.io
Habilite o MCP do Draw.io em IFrames
Stencils AWS, GCP, Azure, Cisco19 e CiscoSafe descobertos automaticamente em tempo de execução na barra lateral do drawio
Segmentação de múltiplos documentos com seletores list-documents e target_document para fluxos de trabalho com múltiplas abas
Segmentação de múltiplas páginas com seletores target_page obrigatórios para ferramentas com escopo de página
Serialização FIFO por documento para operações ao vivo, para que vários agentes possam trabalhar em arquivos diferentes com segurança
Ferramentas de gerenciamento de páginas: list-pages, get-current-page, create-page, copy-page, rename-page
Importe, incorpore ou expanda diagramas Mermaid
Suporte ao Firefox de volta, o modo TLS é necessário
O servidor suporta modo TLS e opcionalmente gera certificados autoassinados
Importe e exporte diagramas de/para XML, SVG (com XML incorporado) ou PNG (com XML incorporado)
Controle de geometria de arestas com waypoints e roteamento automático de auto-conectores
Relacionamentos pai-filho para formas aninhadas e agrupamento
Servidor e Extensão unificados no mesmo mono-repositório
Editor Draw.io integrado - nenhuma extensão de navegador necessária
Servidor MCP que permite que agentes de IA controlem diagramas Draw.io
Criação, inspeção e modificação programática de diagramas via ferramentas MCP
Gerenciamento de camadas para diagramas complexos
Funciona com qualquer cliente MCP (Claude Desktop, Claude Code, Zed, Codex, etc.)

Introdução

O servidor MCP Draw.io traz capacidades de diagramação do Draw.io para agentes de IA. Ele fornece ferramentas MCP que podem criar, ler, atualizar e excluir elementos de diagrama - permitindo que assistentes de IA construam diagramas de arquitetura, fluxogramas e documentação visual automaticamente.

Duas formas de uso:

Editor integrado - O servidor hospeda o Draw.io diretamente, acessível no seu navegador
Extensão do navegador - Conecte-se ao Draw.io em execução no seu navegador via extensão

Experimental: a integração com o aplicativo draw.io desktop (Electron) está em andamento, mas atualmente bloqueada por um problema de CSP upstream — veja DESKTOP.md.

Requisitos

Node.js (v22 ou superior; testado com v22 LTS e v24 LTS) - Ambiente de execução para o servidor MCP
Cliente MCP - Claude Desktop, Claude Code, Zed, Codex, OpenCode ou qualquer host compatível com MCP

Para o Editor Integrado

Nenhum requisito adicional - funciona imediatamente com a flag --editor.

Para a Extensão do Navegador

Extensão do navegador - drawio-mcp-extension
Draw.io aberto no seu navegador

Opcional

pnpm - Gerenciador de pacotes preferido (npm também funciona bem)

Início Rápido

1. Configure seu host MCP

Caminho mais rápido:

Claude Code: /plugin marketplace add lgazo/drawio-mcp-server e depois /plugin install drawio.
Qualquer outro host: npx drawio-mcp-server install <host> onde <host> é claude-code, claude-desktop, codex, zed, opencode ou all.

Veja docs/PLUGINS.md para a referência completa, flags e desinstalação, e docs/release.md para saber como os lançamentos são feitos.

Instalação manual (trecho JSON, exemplo Claude Desktop)

Edite ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "drawio-mcp-server", "--editor"]
    }
  }
}

Para outros clientes MCP e configuração detalhada (incluindo opções pnpm), veja Configuração.

2. Abra o editor

Após reiniciar seu host MCP, abra: http://localhost:3000/

3. Comece a diagramar

Exemplos de prompts que você pode tentar:

"Crie um diagrama de arquitetura orientada a eventos mostrando uma fila de mensagens com produtores, consumidores e três serviços de backend"

"Crie um diagrama de arquitetura orientada a eventos com três páginas. Use três agentes em paralelo para topologia de serviços, fluxo de mensagens e tratamento de retry/falha, com cada agente atribuído a uma página de destino separada."

"Desenhe um diagrama de API CRUD com um banco de dados, gateway de API e quatro microsserviços com seus endpoints"

"Adicione uma nova camada chamada 'Fundo' e mova todos os elementos decorativos para ela, depois crie uma nova camada para anotações"

Seu assistente de IA agora pode controlar o diagrama usando ferramentas MCP.

Recursos

O servidor fornece ferramentas MCP para:

Descoberta de documentos - liste instâncias de documentos Draw.io conectadas e direcione chamadas posteriores para uma instância específica de aba/arquivo
Inspeção de diagramas - leia formas, páginas, camadas e propriedades de células
Modificação de diagramas - adicione/edite/exclua formas, arestas e rótulos em uma página de destino
Gerenciamento de páginas - liste páginas, inspecione a página atual, crie páginas, copie páginas e renomeie páginas sem forçar uma troca visível de página em runtimes suportados
Gerenciamento de camadas - crie, alterne e organize camadas
Cobertura de formas de fornecedores - stencils AWS, GCP, Azure, Cisco19 e CiscoSafe descobertos automaticamente em tempo de execução na barra lateral do drawio, para que agentes possam colocar ícones como mxgraph.gcp2.cloud_run ou mxgraph.cisco19.router sem catálogos curados manualmente
TLS integrado — HTTPS + WSS opcional com chave/certificado manual ou material autoassinado gerado via uma CA local por usuário. Veja CONFIG.md → TLS.

Veja Referência de Ferramentas para a lista completa de ferramentas disponíveis.

Instalação

O servidor executa como parte do seu host MCP. Configuração detalhada para todos os clientes suportados (Claude Desktop, Claude Code, Zed, Codex, oterm) incluindo opções npm e pnpm está disponível em Configuração.

Alternativa: Extensão do Navegador

Em vez do editor integrado, você pode usar a extensão do navegador para conectar-se ao Draw.io em execução no seu navegador. Isso funciona com ou sem a flag --editor.

Abra Draw.io no seu navegador
Instale a Extensão MCP do Draw.io:
- Chrome Web Store
- Complementos do Firefox
Certifique-se de que a extensão está conectada (sobreposição de sinal verde no ícone)

Configuração sem --editor:

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "drawio-mcp-server"]
    }
  }
}

Veja a documentação da extensão para mais detalhes.

Experimental: Draw.io Desktop

A integração com o aplicativo draw.io desktop (Electron) é experimental e atualmente bloqueada de ponta a ponta por um problema de CSP upstream. O plugin carrega dentro do draw.io desktop, mas sua conexão WebSocket de volta ao servidor MCP é rejeitada pela política connect-src 'self' codificada do draw.io.

Veja DESKTOP.md para os passos completos de configuração e a limitação atual.