Release status: stable
|Description||draw.io editor integration|
|Translate the DrawioEditor extension if it is available at translatewiki.net|
|Issues||Open tasks · Report a bug|
DrawioEditor is a MediaWiki extension that integrates the draw.io flow chart editor and allows inline editing of charts.
Please read these warnings carefully before use:
- The default editor functionality is loaded from draw.io (for configuration options see below). This code only provides integration.
- The actual editor functionality is loaded from draw.io. This code only provides integration.
- This plugin is quite new and probably still has bugs, so it may or may not work with your installation.
- draw.io chart creation and editing.
- SVG and PNG support. The file type can be configured globally and changed on a per-image basis.
- Image files are transparently stored in the standard wiki file store, you don't need to worry about them.
- Versioning is provided by the file store, revert to an older version of the chart at any time.
- Draw.io original XML data is stored within the image files, so only one file must be stored per chart.
- Supports multiple charts per page.
- Supports relative and fixed chart dimensions.
- When you intend to use SVG which is recommended, you might want to install Extension:NativeSvgHandler too. Also you need a browser that supports SVG.
- While displaying charts may work in older browsers, especially when using PNG (SVG is default and recommended), saving charts requires a fairly recent browser.
- Download and place the file(s) in a directory called
- Add the following code at the bottom of your LocalSettings.php:
wfLoadExtension( 'DrawioEditor' );
- Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.
To avoid the mentioned privacy concerns, you can change the URL of the editor using this setting in LocalSettings.php (i.e. use the officially provided docker image from jgraph/docker-drawio as server). The URL given here is used to load the draw.io/diagrams.net editor components embedded in an iframe, WARNING: changing this URL is officially not supported, but works, only change this for testing purpose or if know what you are doing! The default value is https://embed.diagrams.net.
Add a chart
- Add the following tag to any wiki page to insert a draw.io chart:
ChartNamemust be unique and will be used as the basename for the backing file.
- Save the wiki page.
- Since no chart exists at this point, a placeholder will be shown where you've put the drawio tag. Click on the Edit link at the top right of it.
- Draw your chart, click Save to save and Exit to leave Edit mode.
Edit a chart
Each chart will have an Edit link at its top right. Click it to get back into the editor. Click Save to save and Exit to get out of the editor. If a wiki page has multiple charts, only one can be edited at the same time.
View or revert to old versions
On each save, a new version of the backing file will be added to the wiki file store. You can get there by clicking the chart while you're not editing. There you can look at and revert to old versions like with any file uploaded to the wiki.
Options are appended to the tag separated by
While the defaults are good under most circumstances, it may be necessary to control how your chart is displayed. The following options can be used for that:
- width: Sets the chart width. Defaults to
- max-width: Set the maximum chart width if width is relative. Defaults to
- height: Sets the chart height. Defaults to
auto. Usually not used.
These option take any absolute CSS length value as argument, for example:
chart has a special meaning and stands for the actual size of the chart.
When the chart is saved, the image dimensions are automatically adjusted.
Usually it's preferable to use
chart instead of a fixed pixel value.
The default behaviour is the let the chart scale (
height=auto) until it reaches its actual width stored in the chart (
If you want it to scale further or less, you can adjust max_width manually.
none to allow infinite scaling.
If you just want a fixed width, set width to
chart or some fixed CSS value and leave height on
Unless you need a fixed sized image area before the image is actually loaded or really need to scale based on height, there is usually no point in setting height.
If you set it you probably should set width to
auto, or when setting both use
chart so you don't need to update the values manually every time your image changes.
- Let the chart scale until it reaches its actual width (default):
- Let the chart scale until it's 800 px wide:
- Let the chart scale infinitely:
- Fixed width:
- Fixed width using the actual chart width:
- Fixed height and width using the actual chart dimensions:
The file type to be used can be set to either png or svg. The default is svg unless you set $wgDrawioEditorImageType to png in LocalSettings.php.
Use an Object Tag
MediaWiki normally embeds images inside
<img> tags and links them to their description page.
If you want to use SVG multimedia functions (e.g. links) it has to be embedded as
This can be set using the interactive attribute or generally by enabling
$wgDrawioEditorImageInteractive = true in LocalSettings.php.
As mentioned in the Warnings Section above, there are some privacy concerns when using this plugin (or draw.io in general). Carefully read the information below, especially when you're running a wiki in a private environment.
draw.io may change it's code at any time, so the everything below could be outdated by the time you read it.
The draw.io editor is loaded within an iframe when you click the Edit link for a chart. At this point your browser loads all draw.io code from draw.io servers. While it is running in an iframe and has no access to your wiki page contents or any other resources, your browser may still send a referrer containing the current wiki page's URL to the draw.io servers, which may or may not be a problem in your environment. The wiki setting $wgReferrerPolicy may help you with this, but only for modern browsers.
Chart Data Privacy
Again, be aware that the draw.io code running in the iframe may change its behavior at any time without you noticing. While that code has no access to your wiki, it may cause your chart data to be leaked. If this is a concern, don't use this plugin.
- Anja Ebersbach: draw.io für MediaWiki und BlueSpice – Kollaborativ erstellte Zeichnungen, Hallo Welt! Blog on July 11, 2017. (german)