summary: Preview, edit, and create native Drawio diagrams directly in VibeX.

Drawio for VibeX

Open any .drawio file in the VibeX workspace to preview and edit it in the file tab. Changes made with the embedded diagrams.net editor are written back to the original file atomically; an external change is never overwritten silently.

Features

• Full Drawio editor inside the VibeX file tab.
• Automatic saves and explicit Drawio saves persist to the workspace file.
• Revision conflict detection when another process changes the file.
• Agent Skill for creating and modifying native mxGraph XML diagrams.
• No Drawio Desktop, MCP server, CLI Runtime, or VibeX-specific executable dependency.

Use

1. Enable the plugin.
2. Open a .drawio or .dio file from the workspace file tree.
3. Edit in the Drawio tab. The status pill reports loading, saving, saved, offline, or conflict state.
4. Ask an Agent to create or update a diagram; the bundled drawio Skill teaches it the native file format. Open the resulting file to continue editing visually.

Network and data

The editor UI is loaded from https://embed.diagrams.net, the official diagrams.net embed endpoint. Diagram XML is sent to that nested editor frame in the browser so it can render and edit the document. Saving returns the XML to the VibeX Host, which writes the local file. An internet connection is required to load the hosted editor; there is no silent local or cloud fallback.

Uninstalling removes the editor. Workspace diagram files are unchanged. This package stores no secrets; config.json is empty and has nothing to retain.

Conflict recovery

If the file changes outside the open editor, VibeX rejects the stale save. Copy any unsaved changes if needed, then choose Reload file in the editor toolbar to load the latest workspace revision.

Development

This plugin consumes only public @vibex/plugin-sdk modules (/worker, /app, /testing, /stdio). The SDK and CLI are not on npm yet. Develop against a sibling VibeX checkout (../VibeX) or the Host-shipped vibex-plugin.

pnpm install
pnpm run build
pnpm run validate
pnpm test
pnpm run pack
vibex-plugin install --link .
vibex-plugin doctor .

Linked install and a real Host reload are required to confirm the file tab. Harness tests do not replace that.

Attribution

Drawio/diagrams.net is developed by JGraph Ltd. The embedded editor protocol and the Agent guidance are based on the official Apache-2.0-licensed jgraph/drawio-integration and jgraph/drawio-mcp projects. This VibeX plugin is an integration and does not claim endorsement by JGraph. See contents/references/THIRD_PARTY_NOTICES.md.