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

Documentação

Servidor MCP Draw.io

English · 简体中文

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

Principais Destaques

Plugin Claude Code: /plugin marketplace add lgazo/drawio-mcp-server e depois /plugin install drawio, com os 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
Estênceis 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 várias 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, permitindo que vários agentes trabalhem 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
O suporte ao Firefox está de volta; o modo TLS é necessário
O servidor suporta o 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 autoconexões
Relações 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 por meio de 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 os recursos 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 criem 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 por meio da 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 — consulte 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 o sinalizador --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.

Consulte docs/PLUGINS.md para a referência completa, sinalizadores 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 do pnpm), consulte 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/falhas, 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 — lista instâncias de documentos Draw.io conectadas e roteia chamadas posteriores para uma instância de arquivo/aba específica
Inspeção de diagramas — lê formas, páginas, camadas e propriedades de células
Modificação de diagramas — adiciona/edita/exclui formas, arestas e rótulos em uma página de destino
Gerenciamento de páginas — lista páginas, inspeciona a página atual, cria páginas, copia páginas e renomeia páginas sem forçar uma troca visível de página em runtimes suportados
Gerenciamento de camadas — cria, alterna e organiza camadas
Cobertura de formas de fornecedores — estênceis AWS, GCP, Azure, Cisco19 e CiscoSafe descobertos automaticamente em tempo de execução na barra lateral do drawio, permitindo que agentes coloquem ícones como mxgraph.gcp2.cloud_run ou mxgraph.cisco19.router sem catálogos curados manualmente
TLS integrado — HTTPS + WSS opcionais com certificado/chave manual ou material autoassinado gerado automaticamente por meio de uma CA local por usuário. Consulte CONFIG.md → TLS.

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

Instalação

O servidor é executado como parte do seu host MCP. A 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 se conectar ao Draw.io em execução no seu navegador. Isso funciona com ou sem o sinalizador --editor.

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

Configuração sem --editor:

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

Consulte 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.

Consulte DESKTOP.md para as etapas completas de configuração e a limitação atual.