Excalidraw Architect MCP — Сценарии использования, Установка & Живое демо

Зачем использовать

Ключевые функции

Авторасположение — никакого ручного размещения
Swim-lanes, кластеры, последовательные потоки
Вывод в Excalidraw .json (редактируемый) и PNG (с опциональным cairo)
Настраиваемый множитель разрешения для чётких PNG
Локально — без SaaS, без телеметрии

Живое демо

Как выглядит на практике

excalidraw-architect-mcp.replay ▶ готово

0/0

Установка

Выберите клиент

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "excalidraw-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

Откройте Claude Desktop → Settings → Developer → Edit Config. Перезапустите после сохранения.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "excalidraw-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

Cursor использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "excalidraw-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

Щёлкните значок MCP Servers на боковой панели Cline, затем "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "excalidraw-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

Тот же формат, что и Claude Desktop. Перезапустите Windsurf для применения.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "excalidraw-architect-mcp",
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  ]
}

Continue использует массив объектов серверов, а не map.

~/.config/zed/settings.json

{
  "context_servers": {
    "excalidraw-architect-mcp": {
      "command": {
        "path": "uvx",
        "args": [
          "excalidraw-architect-mcp"
        ]
      }
    }
  }
}

Добавьте в context_servers. Zed перезагружается автоматически.

claude mcp add excalidraw-architect-mcp -- uvx excalidraw-architect-mcp

Однострочная команда. Проверить: claude mcp list. Удалить: claude mcp remove.

Сценарии использования

Реальные сценарии: Excalidraw Architect MCP

Создать диаграмму архитектуры для design doc

👤 Инженеры, пишущие design docs ⏱ ~10 min beginner

Когда использовать: Design doc требует системной диаграммы, а тратить час в Excalidraw не хочется.

Предварительные требования

Excalidraw (web или desktop) — excalidraw.com — вставьте .json вывод

Поток

Описание

Generate an Excalidraw diagram: API gateway → auth service → user service & orders service → Postgres. Add a Redis cache between API and user service.✓ Скопировано

→ Возвращён Excalidraw .json
Уточнение

Add a sidecar logging agent on each service. Group services in a 'core' cluster.✓ Скопировано

→ Обновлённая диаграмма с кластером и sidecar-агентами
Экспорт

Render to PNG at 3x and save to /docs/arch.png.✓ Скопировано

→ PNG записан

Итог: Диаграмма готова к документу за 2 минуты вместо 30.

Подводные камни

Слишком много узлов — диаграмма нечитабельна — Сначала запросите кластеры и более высокий уровень абстракции

Сочетать с: filesystem

Визуализировать поток вызовов через кодовую базу

👤 Инженеры, изучающие незнакомый код ⏱ ~5 min beginner

Когда использовать: Вы прошлись пошагово через запрос — теперь хотите картинку.

Поток

Описание увиденного

Diagram a request flow: HTTP handler → validator → service → repo → DB. Show validation error path branching off.✓ Скопировано

→ Диаграмма в стиле последовательности

Итог: Картинка стоит 200 слов в описании PR.

Подводные камни

Путаница между sequence и box-and-arrow — Будьте явными — «sequence diagram» или «component diagram»

Комбинации

Сочетайте с другими MCP — эффект x10

excalidraw-architect-mcp + filesystem

Сохранять версионированные диаграммы рядом с design docs

Save the .excalidraw.json next to the doc and re-render to /docs/arch.png.✓ Скопировано

excalidraw-architect-mcp + github

Прикреплять диаграммы к описаниям PR

Generate the diagram and embed the PNG in PR #1234's description.✓ Скопировано

Инструменты

Что предоставляет этот MCP

Инструмент	Входные данные	Когда вызывать	Стоимость
generate_diagram	description, layout?	Первичная диаграмма по промпту	free
modify_diagram	json, instruction	Итеративные правки	free
to_png	json, scale?	Вставить в документ	free

Стоимость и лимиты

Во что обходится

Квота API: Локально — нет
Токенов на вызов: 300–2000
Деньги: Бесплатно
Совет: Итерируйте через modify_diagram, а не перегенерируйте с нуля

Безопасность

Права, секреты, радиус поражения

Минимальные скоупы: Local file write

Хранение учётных данных: Нет

Исходящий трафик: Нет — полностью локально

Устранение неполадок

Частые ошибки и исправления

PNG export fails

Установите опциональную зависимость cairo: pip install excalidraw-architect-mcp[png]

Layout looks crowded

Запросите кластерную группировку или уменьшите набор узлов

Excalidraw refuses to import

JSON-схема может быть немного устаревшей; попросите Claude сверить с последней схемой Excalidraw

Альтернативы

Excalidraw Architect MCP в сравнении

Альтернатива	Когда использовать	Компромисс
Mermaid via mermaid MCPs	Нужны text-first диаграммы под версионный контроль	Меньше визуальной настраиваемости
Hand-drawing in Excalidraw	Вам это нравится и есть время	Медленно

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills