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

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.

Note: Make sure your Draw.io MCP Server is running on the same port you configure here. Restarting the browser will not reset the configuration - it persists across sessions.

Connection Status

The extension icon indicates the current connection state:

• 🟢 Green: Connected to the server
• 🟠 Orange: Connecting/reconnecting
• 🔴 Red: Disconnected

You can also view the current configured port and connection status in the extension popup.

Sponsoring

If you enjoy the project or find it useful, consider supporting its continued development.

lightning invoice:

lnbc1p5f8wvnpp5kk0qt60waplesw3sjxu7tcqwmdp6ysq570dc4ln52krd3u5nzq6sdp82pshjgr5dusyymrfde4jq4mpd3kx2apq24ek2uscqzpuxqr8pqsp5gvr72xcs883qt4hea6v3u7803stcwfnk5c9w0ykqr9a40qqwnpys9qxpqysgqfzlhm0cz5vqy7wqt7rwpmkacukrk59k89ltd5n642wzru2jn88tyd78gr4y3j6u64k2u4sd4qgavlsnccl986velrg3x0pe95sx7p4sqtatttp

lightning address:

ladislav@blink.sv

Related Resources

Troubleshooting

Contributing

Development

Star History