Extension:DrawioEditor

MediaWiki 拡張機能マニュアル

DrawioEditor リリースの状態: 安定
実装	パーサー関数
説明	draw.io flow chart creation and inline editing
作者	Markus Gebert, Hallo Welt! GmbH, Hamish Slater (Markus Gebertトーク)
最新バージョン	4.1.0-alpha
互換性の方針	長期間サポート リリースであるすべての MediaWiki リリースについて、拡張機能に対応するブランチが存在します。
ライセンス	MIT ライセンス
ダウンロード	拡張機能をダウンロード Git [?]: リポジトリを参照 (Phabricator · GitHub) Gerrit コード レビュー Git コミット ログ Download source tarball
パラメーター $wgDrawioEditorDefaultEditmode $wgDrawioEditorBackendUrl $wgDrawioEditorImageType
使用するフック OutputPageParserOutput ParserFirstCallInit
translatewiki.net で翻訳を利用できる場合は、DrawioEditor 拡張機能の翻訳にご協力ください
問題点	未解決のタスク · バグを報告

DrawioEditor is a MediaWiki extension that integrates the https://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.
• Be aware that draw.io is an online service and while this plugin integrates the editor using an iframe and communicates with it only locally in your browser (JavaScript postMessage), it cannot guarantee that the code loaded from draw.io will not upload any data to foreign servers. This may be a privacy concern. Read the Privacy section in the documentation on GitHub for more information. When in doubt, don't use draw.io or this module. You have been warned!
• 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.
• Inline Editing and javascript uploads on save, you never leave or reload the wiki page.
• 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.

Requirements

• 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.

インストール

• ダウンロードして、ファイルをextensions/フォルダー内のDrawioEditorという名前のディレクトリ内に配置します。
  開発者とコード寄稿者は、上記の代わりに以下を使用してGitからインストールします:

  cd extensions/
  git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/DrawioEditor
  

• Gitでのインストールの場合のみ、PHPの依存関係をインストールするためComposerを実行します。 (合併症の可能性についてはT173141を参照。)
• 以下のコードを LocalSettings.php ファイルの末尾に追加します:

  wfLoadExtension( 'DrawioEditor' );
  

• 完了 – ウィキの「Special:Version」に移動して、拡張機能が正しくインストールされたことを確認します。

設定

$wgDrawioEditorBackendUrl

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.

使用法

チャートを追加

1. Add the following tag to any wiki page to insert a draw.io chart: {<drawio filename="ChartName" /> ChartName must be unique and will be used as the basename for the backing file.
2. Save the wiki page.
3. 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.
4. 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.

旧バージョンの表示・復元

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.

プライバシー

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.

チャートデータのプライバシー

Obviously the chart data must be passed to the draw.io application. The plugin uses the draw.io embed mode and passes the data to draw.io running in an iframe using javascript's postMessage(). This part happens locally, the data does not leave your browser. Currently, there does not seem to be any interaction with the draw.io servers while editing, which is good but of course this could change at any time without you or your wiki's users noticing. When saving, the file data is prepared (exported) by the iframe and passed back to this plugin (again) using postMessage(). The plugin then safely uploads the new version to the wiki file store. While the data passing happens locally and uploading is safe because it's done by this plugin in the main window context, the draw.io data export code running in the iframe seems to require interaction with draw.io servers in some cases.

One example is when you are using the Safari browser and save a chart which uses type png (see Options above). That process does not seem to be entirely implemented in javascript and needs the draw.io servers to generate the PNG data. This means your chart data leaves the browser. It is sent SSL encrypted and the draw.io folks probably don't care about your chart, but of course it's up to you to decide wether you can accept his or not. SVG does not seem to have that problem, at least in Chrome, Firefox and Safari, so I recommend using that. There may be other circumstances under which data leaves the browser. If this is a concern, you should check wether your use cases trigger such uploads, or not use this plugin and draw.io at all.

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.

関連項目

• Diagram extensions

外部リンク

• draw.io
• Anja Ebersbach: draw.io für MediaWiki und BlueSpice – Kollaborativ erstellte Zeichnungen, Hallo Welt! Blog on July 11, 2017. (german)
• Extension reference: DrawioEditor