Draw.io (Diagrams.net)라는 가장 넓은 다이어그램 도구와 함께 약간의 Vibe 다이어그램을 할 수 있습니다.

Draw.io MCP Server에 필요한 대응

요구 사항

개발 옵션

• pnpm - 선호 패키지 관리자

설치

자세한 end-to-end Draw.io MCP 설치는 Draw.io MCP Server에 대한 설명을 따르십시오.

Extension 자체를 설치하려면 다음 옵션이 있습니다.

웹 스토어

릴리스 패키지

릴리스 섹션에서 브라우저 중 하나를 다운로드 할 수 있습니다.

GitHub CI 패키지

Chrome과 Firefox의 확장 버전 모두 ZIP을 다운로드 할 수 있습니다. package] 워크플로우.

그냥 실행을 열고, 스크롤 Artifact 섹션, ZIP을 다운로드하고 지원 브라우저의 하나에 대한 확장을로드.

# 현지 빌드

실행하여 확장의 버전을 만들 수 있습니다.

또는

그것은 .output 폴더에 확장 된 버전을 구축 할 것입니다.

ZIP/CRX가 필요한 경우 다음 중 하나를 실행하십시오.

또는

구성

WebSocket 서버 포트

기본적으로, 확장은 포트 3333에 Draw.io MCP Server에 연결됩니다.

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.