Excalidraw Architect MCP

👁 PyPI
👁 Cursor Directory
👁 License: MIT

Постоянная борьба с пониманием незнакомых и сложных кодовых баз — это управление когнитивной нагрузкой и попытки представить, как все части соединяются вместе.

Проблема

Когда вы погружаетесь в кодовую базу, проектируете новую систему или документируете существующую архитектуру, визуальная диаграмма за секунды передает то, что невозможно описать страницами текста. Но современные варианты не идеальны. Диаграммы Mermaid быстро создаются, но имеют ограниченные возможности — вы не можете перетащить узел, чтобы изменить его положение, или визуально сгруппировать компоненты. Excalidraw решает эти проблемы, но когда LLM пытаются генерировать Excalidraw напрямую, они галлюцинируют с координатами — блоки перекрываются, стрелки запутываются, и в итоге вы исправляете диаграмму вручную.

Related MCP server: AI Charts

Решение

excalidraw-architect-mcp отделяет что от где — ИИ фокусируется на структуре, а движок берет на себя математику пикселей.

Ваша LLM описывает компоненты и связи, а MCP управляет компоновкой, стилизацией и рендерингом с использованием правильного алгоритма построения графов. Более 50 технологий (Kafka, PostgreSQL, Redis и т. д.) получают автоматическое оформление, вы можете итеративно редактировать диаграммы на естественном языке («добавь кэш перед БД»), и все это работает полностью офлайн в Cursor/Windsurf — ключи API не нужны.

• Идеальная компоновка каждый раз — алгоритм Сугиямы с адаптивными отступами; никаких перекрывающихся блоков

• Стилизация с учетом архитектуры — скажите «Kafka», и вы получите узел в стиле потока данных, а не обычный прямоугольник

• Общайтесь со своими диаграммами — добавляйте, удаляйте или переподключайте компоненты на существующей диаграмме с помощью естественного языка

• Визуализация узлов-концентраторов — шлюзы и балансировщики нагрузки автоматически растягиваются, охватывая подключенные к ним сервисы

• Экспорт в SVG и PNG — конвертируйте любой файл .excalidraw в портативное изображение, браузер не требуется

Посмотрите на это в действии

Каждый кадр ниже полностью сгенерирован ИИ с использованием этого MCP — без ручного позиционирования.

Архитектура платформы электронной коммерции

👁 Демо платформы электронной коммерции

Поток обработки платежей

👁 Демо потока обработки платежей

Варианты использования

• Погружение в новую кодовую базу — укажите на микросервис и получите высокоуровневую архитектурную диаграмму, не читая ни строчки кода. Укажите на набор классов для низкоуровневой диаграммы потока, когда вам нужны детали.

• Мозговой штурм и проектирование систем — когда вы рисуете на доске новую услугу или обсуждаете компромиссы, попросите визуализировать архитектуру по ходу дела. Вносите изменения, говоря «добавь сюда кэш» или «замени Kafka на SQS», вместо того чтобы перерисовывать все с нуля.

• Документация, которая остается актуальной — добавьте файл .excalidraw в свой репозиторий и обновляйте его на естественном языке по мере развития системы. Больше никаких устаревших диаграмм шестимесячной давности.

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

Установка

pip install excalidraw-architect-mcp

Для поддержки экспорта в PNG (SVG работает «из коробки»):

pip install excalidraw-architect-mcp[png]

Или запустите без установки (требуется uv):

uvx excalidraw-architect-mcp

Настройка MCP в вашей IDE

Cursor — добавьте в .cursor/mcp.json:

{
 "mcpServers": {
 "excalidraw-architect": {
 "command": "excalidraw-architect-mcp",
 "transport": "stdio"
 }
 }
}

Claude Code — выполните эту команду:

claude mcp add-json excalidraw-architect '{"type":"stdio","command":"excalidraw-architect-mcp"}' --scope user

Или добавьте вручную в .mcp.json в корне вашего проекта:

{
 "mcpServers": {
 "excalidraw-architect": {
 "type": "stdio",
 "command": "excalidraw-architect-mcp"
 }
 }
}

Windsurf / Другие IDE — тот же принцип; укажите на команду excalidraw-architect-mcp через stdio.

Установите навык проектирования диаграмм (рекомендуется)

Этот репозиторий включает Diagram Design Skill, который обучает ИИ тому, как структурировать диаграммы для достижения наилучших результатов — ограничения на количество узлов, правила топологии, рекомендации по подписям ребер и общие шаблоны.

Для пользователей Cursor:

mkdir -p ~/.cursor/skills/excalidraw-diagram-design && \
curl -o ~/.cursor/skills/excalidraw-diagram-design/SKILL.md \
 https://raw.githubusercontent.com/BV-Venky/excalidraw-architect-mcp/main/.skills/excalidraw-diagram-design/SKILL.md

Для других IDE: Скачайте файл SKILL.md и добавьте его в контекст промпта или системные инструкции вашей IDE.

ИИ автоматически подхватит этот навык и применит его при создании диаграмм. Не стесняйтесь изменять правила в соответствии со своими предпочтениями — настраивайте лимиты узлов, добавляйте свои шаблоны или корректируйте рекомендации по стилю.

Примечание о сложности диаграмм: По мере увеличения количества компонентов и связей диаграммы неизбежно становятся труднее для чтения — это верно и для людей, рисующих от руки, а не только для автоматической компоновки. Для достижения наилучших результатов стремитесь к 6-15 узлам на архитектурных диаграммах и 10-25 узлам на подробных схемах потоков. Если ваша система больше, разбейте ее на несколько сфокусированных диаграмм, а не пытайтесь втиснуть все в одну.

Использование

Просто попросите свой ИИ-IDE естественным языком:

"Create a high-level architecture diagram of this codebase"

"Create an architecture diagram for a microservices system with an API Gateway, Auth Service, User Service, Order Service, PostgreSQL, Redis cache, and Kafka event bus"

"Convert this mermaid diagram to excalidraw diagram"

"Add a Caching layer to the Order Service in the High Level architecture diagram"

"Export the architecture diagram to SVG"

"Export the diagram as a PNG at 3x resolution"

ИИ вызывает инструмент MCP с картой связей. MCP управляет компоновкой, стилем и выводом. Откройте полученный файл .excalidraw с помощью расширения Excalidraw для VS Code или перетащите его в excalidraw.com.

Функции

Движок автоматической компоновки

Использует иерархический алгоритм компоновки Сугиямы с:

• Адаптивными зазорами между слоями — расстояние регулируется в зависимости от длины подписи ребра

• Растяжением узлов-концентраторов — шлюзы/балансировщики нагрузки растягиваются, охватывая подключенные сервисы

• Маршрутизацией ребер с учетом препятствий — стрелки огибают промежуточные узлы, а не проходят сквозь них

• Стекированием несвязных компонентов — отдельные подграфы (например, стек мониторинга) размещаются без перекрытий

Библиотека компонентов

Более 50 сопоставлений технологий с автоматической визуальной стилизацией:

Сохранение состояния редактирования

Метаданные диаграммы встроены в файл .excalidraw. Попросите ИИ:

"Add a Redis cache in front of the database in the existing diagram"

MCP считывает текущее состояние, применяет модификацию и перерисовывает с правильной компоновкой.

Конвертация Mermaid

Уже есть блок-схема Mermaid? Конвертируйте ее:

"Convert this Mermaid diagram to Excalidraw" (вставьте ваш синтаксис Mermaid)

Экспорт изображений

Экспортируйте любую диаграмму .excalidraw в портативное изображение — браузер, приложение Excalidraw или Node.js не требуются.

• SVG — ноль дополнительных зависимостей; использует чисто Python-рендерер, который обрабатывает прямоугольники, эллипсы, ромбы, текст (включая многострочный) и стрелки с наконечниками

• PNG — требует опциональный пакет cairosvg (pip install excalidraw-architect-mcp[png]); поддерживает настраиваемый множитель разрешения (по умолчанию 2×)

"Export the architecture diagram as an SVG"

Инструменты MCP

Участие в разработке

Подробности см. в CONTRIBUTING.md.

Лицензия

MIT — см. LICENSE.

Maintenance

Resources

• GitHub Repository
Need Help?Related Servers

Tools

• create_diagramA
• export_diagramA
• get_diagram_infoA
• kg_add_serviceB
• kg_diffB
• kg_driftA
• kg_exportC
• kg_importB