Mendix Draw.io Editor

A native Draw.io diagram editor for Studio Pro that lets you create, edit, and store diagrams directly inside your Mendix project — fully integrated with version control and undo/redo.

TL;DR: Create diagrams directly in Studio Pro using the full Draw.io editor. Diagrams are stored as custom documents in your project, version-controlled alongside your models. Download it here to get started.

The Problem

Creating diagrams for Mendix projects means juggling external tools:

Open a separate diagramming tool (Draw.io, Visio, Lucidchart)
Create your diagram
Export as an image
Store it somewhere accessible (SharePoint, Confluence, a random folder)
Hope your team can find it later
Update it manually when the project changes

Diagrams live outside the project, disconnected from the code and models they describe. They get outdated, lost, or forgotten.

The Solution: Draw.io Editor

The full Draw.io diagramming experience embedded inside Studio Pro:

No context switching. No external tools. No lost diagrams.

Your diagrams live in the same project as your domain models, microflows, and pages — tracked by Mendix version control just like everything else.

Download

Requirements:

Mendix Studio Pro 11.6 or higher
Extensibility setting must be enabled (see instructions below)

Download the module

Studio Pro Version	Download
11.6+	DrawIoExtension.mxmodule

Import the module

In App Explorer, right-click on your project
Select Import Module Package…
Browse to the downloaded DrawIoExtension.mxmodule file
Click Open to import

Start using it

Right-click on a folder or module in App Explorer
Select Add other → Diagram
The Draw.io editor opens — start diagramming!

What It Does

Feature	Description
Full Draw.io Editor	The complete Draw.io experience embedded in Studio Pro
Shape Libraries	Access to all Draw.io shape libraries and templates
Dark Theme	Editor uses dark mode to match Studio Pro’s look and feel
Live Sync	Changes are synced to Studio Pro’s in-memory model (500ms debounce) — press Ctrl+S to persist
Version Control	Diagrams are stored as custom documents — tracked by Mendix VCS
Undo/Redo	Full support via Studio Pro’s native undo/redo system
Offline	Draw.io webapp is bundled locally — no internet required
Native Integration	Diagrams appear in App Explorer with custom icons

Use Cases

Perfect For

Architecture diagrams — Document system architecture alongside your implementation
Integration flows — Map out REST/SOAP/OData integrations visually
Process flows — Design business processes before building microflows
Network diagrams — Document infrastructure and deployment topologies
Wireframes — Quick UI mockups during planning sessions
ER diagrams — Visualize data models beyond what the domain model editor shows
Sequence diagrams — Document complex interaction patterns
Any diagram Draw.io supports — Floor plans, org charts, UML, BPMN, and more

How It Works

Architecture


┌─────────────────────────────────────────────────────────────┐
│                     MENDIX STUDIO PRO                       │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐    ┌─────────────────────────────────┐ │
│  │  App Explorer   │    │        Diagram Editor Tab       │ │
│  │                 │    │  ┌───────────────────────────┐  │ │
│  │   Modules       │    │  │                           │  │ │
│  │   ├─ Domain     │    │  │     Draw.io Editor        │  │ │
│  │   │  Model      │    │  │                           │  │ │
│  │   ├─ Pages      │    │  │  ┌─────┐    ┌─────┐       │  │ │
│  │   ├─ Microflows │    │  │  │ Box │───▶│ Box │       │  │ │
│  │   ├─ Diagrams ◄─┼────┼──┤  └─────┘    └─────┘       │  │ │
│  │   │  ├─ Arch  ◄─┼────┼──┤                           │  │ │
│  │   │  └─ Flow  ◄─┼────┼──┤  Full shape libraries,    │  │ │
│  │   └─ ...        │    │  │  connectors, text, etc.   │  │ │
│  │                 │    │  │                           │  │ │
│  └─────────────────┘    │  └───────────────────────────┘  │ │
│                         └─────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘

Data Flow

When you create or open a diagram:

The extension registers a custom document type (MendixDrawIO.Diagram) on load
Opening a diagram loads the stored XML content via the Custom Blob Documents API
The Draw.io editor opens with the diagram XML
As you edit, changes trigger auto-save events from Draw.io
A 500ms debounce batches rapid changes before syncing to Studio Pro’s in-memory model
The XML is synced via updateDocumentContent() — changes appear in Studio Pro immediately
Press Ctrl+S to persist changes to disk — without this, changes are lost on restart

Important: The extension syncs your diagram changes to Studio Pro’s in-memory model automatically, but you must press Ctrl+S to persist to disk. If you close Studio Pro without saving, your changes will be lost.

Storage Format

Diagrams are stored as mxGraphModel XML — Draw.io’s native format. This means:

Full fidelity — no data loss between saves
Default canvas size: A3 (1169 x 827 px)
Compatible with standalone Draw.io if you ever need to export

Technology Stack

Package	Purpose
`@mendix/extensions-api`	Studio Pro integration (Custom Blob Documents API)
`react-drawio`	React wrapper for the Draw.io editor
`draw.io v26.0.9`	Embedded diagram editor (bundled locally)
`react` + `tailwindcss`	UI framework and styling

Built with Vite and TypeScript for fast, type-safe development.

Compared to Other Extensions

	Draw.io Editor	Markdown Editor	Java Editor
Document type	Diagram (XML)	Markdown (text)	Java (source files)
Editor	Draw.io	Monaco	Monaco
Save method	Synced to memory (Ctrl+S to persist)	Synced to memory (Ctrl+S to persist)	Manual (Save button)
Install method	`.mxmodule` import	`.zip` extraction	`.zip` extraction
Storage	Custom Blob Document	Custom Blob Document	Project file system

Resources

Questions or feedback? Find me on LinkedIn or email me at b.thomsin@gmail.com.