Draw.io MCP server

Давайте займемся созданием диаграмм с помощью самого популярного инструмента для построения схем — Draw.io (Diagrams.net).

Основные возможности

• Импорт и экспорт диаграмм из/в XML, SVG (со встроенным XML) или PNG (со встроенным XML)

• Управление геометрией ребер с помощью контрольных точек и автоматической маршрутизацией соединителей

• Отношения «родитель-потомок» для вложенных фигур и группировки

• Единый сервер и расширение в одном монорепозитории

• Встроенный редактор Draw.io — расширение для браузера не требуется

• MCP-сервер, позволяющий ИИ-агентам управлять диаграммами Draw.io

• Программное создание, проверка и изменение диаграмм через инструменты MCP

• Управление слоями для сложных диаграмм

• Работает с любым MCP-клиентом (Claude Desktop, Claude Code, Zed, Codex и др.)

Введение

Draw.io MCP server предоставляет ИИ-агентам возможности работы с диаграммами Draw.io. Он предлагает инструменты MCP, которые могут создавать, читать, обновлять и удалять элементы диаграмм, позволяя ИИ-ассистентам автоматически строить архитектурные схемы, блок-схемы и визуальную документацию.

Два способа использования:

1. Встроенный редактор — сервер размещает Draw.io напрямую, доступен в вашем браузере

2. Расширение для браузера — подключение к Draw.io, запущенному в браузере, через расширение

Требования

• Node.js (v20 или выше) — среда выполнения для MCP-сервера

• MCP-клиент — Claude Desktop, Claude Code, Zed, Codex, OpenCode или любой другой хост, совместимый с MCP

Для встроенного редактора

Дополнительных требований нет — работает «из коробки» с флагом --editor.

Для расширения браузера

• Расширение для браузера — drawio-mcp-extension

• Draw.io, открытый в вашем браузере

Опционально

• pnpm — предпочтительный менеджер пакетов (npm также подходит)

Быстрый старт

1. Настройте ваш MCP-хост

Добавьте сервер в конфигурацию вашего MCP-клиента:

Отредактируйте ~/Library/Application Support/Claude/claude_desktop_config.json:

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

claude mcp add-json drawio '{"type":"stdio","command":"npx","args":["-y","drawio-mcp-server","--editor"]}'

Добавьте в ~/.config/zed/settings.json:

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

Отредактируйте ~/.codex/config.toml:

[mcp_servers.drawio]
command = "npx"
args = ["-y", "drawio-mcp-server", "--editor"]

Добавьте в opencode.json в корне вашего проекта или в ~/.config/opencode/opencode.json:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "drawio": {
      "type": "local",
      "command": ["npx", "-y", "drawio-mcp-server", "--editor"],
      "enabled": true
    }
  }
}

Для других MCP-клиентов и подробной настройки (включая параметры pnpm) см. Configuration.

2. Откройте редактор

После перезапуска вашего MCP-хоста откройте: http://localhost:3000/

3. Начните рисовать диаграммы

Примеры запросов, которые можно попробовать:

"Создай диаграмму архитектуры на основе событий, показывающую очередь сообщений с производителями, потребителями и тремя бэкенд-сервисами"

"Нарисуй диаграмму CRUD API с базой данных, API-шлюзом и четырьмя микросервисами с их эндпоинтами"

"Добавь новый слой под названием 'Background' и перемести на него все декоративные элементы, затем создай новый слой для аннотаций"

Теперь ваш ИИ-ассистент может управлять диаграммой с помощью инструментов MCP.

Функции

Сервер предоставляет инструменты MCP для:

• Проверки диаграмм — чтение фигур, слоев и свойств ячеек

• Изменения диаграмм — добавление/редактирование/удаление фигур, ребер и меток

• Управления слоями — создание, переключение и организация слоев

Полный список доступных инструментов см. в Tools Reference.

Установка

Сервер работает как часть вашего MCP-хоста. Подробная конфигурация для всех поддерживаемых клиентов (Claude Desktop, Claude Code, Zed, Codex, oterm), включая параметры npm и pnpm, доступна в Configuration.

Альтернатива: Расширение для браузера

Вместо встроенного редактора вы можете использовать расширение для браузера для подключения к Draw.io, запущенному в вашем браузере. Это работает как с флагом --editor, так и без него.

1. Откройте Draw.io в браузере

2. Установите расширение Draw.io MCP Browser Extension:

   • Chrome Web Store

   • Firefox Add-ons

3. Убедитесь, что расширение подключено (зеленый индикатор на иконке)

Конфигурация без --editor:

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

Более подробную информацию см. в документации расширения.

Сопутствующие ресурсы

Configuration — CLI-флаги и расширенные параметры

Tools Reference — Полная документация по инструментам MCP

Troubleshooting

Prompt examples

Contributing

Architecture

Development

История звезд

Оценки