|191 (Ranked 40th)
|开启的任务 · 报告错误
- The default editor functionality is loaded from draw.io (for configuration options see below). This code only provides integration.
- 实际的编辑器功能是从draw.io加载的。 此代码仅提供集成。
- draw.io chart creation and editing.
- 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.
git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/DrawioEditor
wfLoadExtension( 'DrawioEditor' );
- 完成 – 在您的wiki上导航至Special:Version，以验证已成功安装扩展。
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 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.
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.
每次保存时，都会将支持文件的新版本添加到wiki文件存储中。 您可以在不进行编辑的情况下单击图表来到达那里。 在那里，你可以查看并恢复到旧版本，就像上传到wiki的任何文件一样。
Options are appended to the tag separated by
- 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:
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.
单击图表的“编辑”链接时，draw.io编辑器将加载到iframe中。 此时，浏览器将从draw.io服务器加载所有draw.io代码。 虽然它在iframe中运行，并且无法访问您的wiki页面内容或任何其他资源，但您的浏览器仍可能向draw.io服务器发送包含当前wiki页面URL的引用，这在您的环境中可能是问题，也可能不是问题。 The wiki setting $wgReferrerPolicy may help you with this, but only for modern browsers.
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)
- Extension reference: DrawioEditor