Mendix Markdown Editor

A custom Studio Pro extension that adds native Markdown document support with GitHub Flavored Markdown (GFM) and Mermaid diagram rendering.

TL;DR: Create, edit, and preview Markdown documents directly in Mendix Studio Pro. Features Monaco editor for writing and live preview with Mermaid diagrams. Download it here to start documenting your Mendix projects.

Why Markdown in Studio Pro?

Documentation often lives outside your Mendix project - in Confluence, SharePoint, or scattered Word documents. This creates problems:

Documentation drift - Docs get outdated as the project evolves
Context switching - Developers leave Studio Pro to update docs
No version control - Documentation changes aren’t tracked with your project
Search limitations - Can’t search across code and docs together

The Markdown Editor brings documentation inside your Mendix project, where it belongs.

What It Does

Feature	Description
Native Integration	Markdown documents appear in App Explorer with custom icons
Monaco Editor	Professional code editing with syntax highlighting (VS Code’s engine)
GFM Support	Tables, task lists, strikethrough, autolinks, footnotes
Mermaid Diagrams	18+ diagram types rendered inline
Offline Support	Monaco bundled locally, no CDN required
Auto-save	Mendix handles save state (Ctrl+S, dirty indicators)
Undo/Redo	Full support via Studio Pro’s native system

Download

Requirements:

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

Download the extension

Studio Pro Version	Download
11.6+	mendix-markdown.zip

Extract to your project

Extract the zip file to your Mendix project’s extensions folder:


<YourMendixProject>/
└── extensions/
    └── mendix-markdown/
        ├── main.js
        ├── editor.js
        ├── mendix-markdown.css
        └── manifest.json

Example path: C:\Users\YourName\Mendix\MyProject-main\extensions\mendix-markdown\

Enable extensibility (if not already enabled)

In Studio Pro, click Edit → Preferences
Go to the Advanced tab
Under “Extension Development”, check “Start Studio Pro in Extension Development Mode. Requires restart of Studio Pro.”
Click OK
Restart Studio Pro

Load the extension

Option 1: Restart Studio Pro

Close Studio Pro completely
Reopen your project

Option 2: Synchronize App Directory (faster!)

In Studio Pro, go to App → Synchronize App Directory
Wait for synchronization to complete

Start using it

Right-click on a folder or module in App Explorer
Select Add other → Markdown
Start writing!

Add Markdown document via Add other menu

How It Works

Architecture


┌─────────────────────────────────────────────────────────────┐
│                     MENDIX STUDIO PRO                       │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐    ┌─────────────────────────────────┐ │
│  │  App Explorer   │    │          Tab Editor             │ │
│  │                 │    │  ┌───────────────────────────┐  │ │
│  │   Domain        │    │  │      EditorToolbar        │  │ │
│  │   Pages         │    │  │  [Edit] [Preview] toggle  │  │ │
│  │   README      ◄─┼────┼──┤───────────────────────────│  │ │
│  │   CHANGELOG     │    │  │                           │  │ │
│  │                 │    │  │   MonacoEditor (Edit)     │  │ │
│  └─────────────────┘    │  │        - or -             │  │ │
│                         │  │   MarkdownPreview (View)  │  │ │
│                         │  │                           │  │ │
│                         │  └───────────────────────────┘  │ │
│                         └─────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘

Edit Mode

The editor uses Monaco (the same engine as VS Code) with markdown-optimized settings:

Syntax highlighting for markdown
Word wrap enabled by default
Folding support for headers
Dark theme matching Studio Pro

Preview Mode

Click the Preview button to see rendered markdown with:

Full GitHub Flavored Markdown support
Live Mermaid diagram rendering
Styled code blocks with syntax highlighting
Clickable links and formatted tables

Supported Features

GitHub Flavored Markdown (GFM)

Feature	Syntax	Example
Bold	`text`	bold
Italic	`text`	italic
Strikethrough	`~~text~~`	~~strikethrough~~
Inline code	`code`	`code`
Tables	`\| col \| col \|`	See below
Task lists	`- [x] done`	Checkboxes
Autolinks	`https://...`	Auto-linked URLs
Footnotes	`[^1]`	Reference notes
Code blocks	``` language	Syntax highlighted

Mermaid Diagrams

All major Mermaid diagram types are supported:

Category	Diagram Types
Flow	Flowchart, Sequence, State
Structure	Class, ER, Block, Architecture
Project	Gantt, Timeline, Kanban
Data	Pie, XY Chart, Sankey, Quadrant
Other	Mindmap, Git Graph, Journey, Requirement

Example: Flowchart


```mermaid
flowchart TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
    C --> E[End]
```

Example: Sequence Diagram


```mermaid
sequenceDiagram
    participant User
    participant Browser
    participant Server
 
    User->>Browser: Click button
    Browser->>Server: HTTP Request
    Server-->>Browser: JSON Response
    Browser-->>User: Display data
```

Example: Entity Relationship


```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    CUSTOMER {
        string name
        string email
    }
```

Use Cases

Perfect For

README files - Document your modules and microflows
Architecture docs - Use Mermaid for system diagrams
API documentation - Document integrations and endpoints
Changelogs - Track what changed between releases
Meeting notes - Keep project decisions in context
Technical specs - Write specs alongside implementation

Technology Stack

Package	Purpose
`@mendix/extensions-api`	Studio Pro integration
`@monaco-editor/react`	VS Code’s editor engine
`@uiw/react-markdown-preview`	GFM-compliant rendering
`mermaid`	Diagram generation
`react` + `tailwindcss`	UI framework and styling

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

Resources

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