Давайте сделаем Vibe Diagramming с наиболее распространенным инструментом построения диаграмм Draw.io (Diagrams.net).

Это необходимо для Draw.io MCP Server.

Требования

###Факультативно для развития pnpm - менеджер пакетов

##Установка

Для подробной установки Draw.io MCP, пожалуйста, следуйте описанию на Draw.io MCP Server.

Существуют следующие варианты установки самого расширения.

Веб-магазин

Релизный пакет

Вы можете скачать ZIP для одного из браузеров в разделе Выпуск.

Пакет GitHub CI

Вы можете загрузить ZIP с обеих версий расширения для Chrome и Firefox в рабочем процессе.

Просто откройте вакансию, прокрутите в раздел Artifact, загрузите ZIP и загрузите расширение для одного из поддерживаемых браузеров.

Местное строительство

Вы можете создать версию расширения, запустив:

или

Он будет создавать расширенную версию в папке .output.

Если вам нужен ZIP/CRX, выполните одно из следующих действий:

или

Конфигурация

WebSocket Server Port

По умолчанию расширение подключается к Draw.io MCP Server на порту 3333.

Draw.io MCP Browser Extension

Let’s do some Vibe Diagramming with the most wide-spread diagramming tool called Draw.io (Diagrams.net).

This is a necessary counterpart for Draw.io MCP Server

Requirements

Optional for Development

• pnpm - Preferred package manager

Installation

For detailed end-to-end Draw.io MCP installation please follow the description on Draw.io MCP Server.

There are the following options to install the Extension itself.

Web Store

  </picture

  </picture

Release package

You can download a ZIP for one of the browsers in the Release section.

GitHub CI package

You can download a ZIP with both versions of the Extension for Chrome and Firefox in the package workflow.

Just open a job run, scroll to the Artifact section, download the ZIP and side load the extension for one of the supported browsers.

Local build

You can build a version of the extension by running:

pnpm run build

or

pnpm run build:firefox

It will build expanded version in the .output folder.

If you need a ZIP/CRX, run one of the following:

pnpm run zip

or

pnpm run zip:firefox

Configuration

WebSocket Server Port

By default, the extension connects to the Draw.io MCP Server on port 3333. You can configure a different port through the extension options:

1. Click on the extension icon to open the popup
2. Click the ⚙️ Settings button (or access extension settings through your browser’s extension management page)
3. Enter your desired port number (1024-65535)
4. Click Save Settings

The connection will automatically reconnect with the new configuration. The configured port is displayed in the popup for easy verification.