Draw.io(Diagrams.net)と呼ばれる最も広範囲にわたるダイアグラムツールで、Vibeのダイアグラムを作成しましょう。

これは、Draw.io MCP Server に必要な対向です

要件

開発オプション

• pnpm - 優先パッケージマネージャ

インストール

詳細なエンドツーエンドDraw.io MCPインストールについては、Draw.io MCP Serverの説明に従ってください。

エクステンション自体をインストールするには、次のオプションがあります。

###Webストア

###リリースパッケージ

リリースセクションのブラウザの1つにZIPをダウンロードできます。

GitHub CI パッケージ

[packageワークフローで、ChromeとFirefoxの拡張バージョンの両方でZIPをダウンロードできます。

ジョブランを開き、Artifactセクションにスクロールし、ZIPをダウンロードし、サポートされているブラウザの1つに拡張機能をロードします。

##ローカルビルド

実行することで、拡張バージョンをビルドできます。

または

[.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.