0

I have just installed DrawioEditor in mediawiki 1.33 and followed the simple usage step by creating a placeholder {{#drawio:ChartName}} for the chart. According to the doc, when I save the page I ought to see a placeholder with an edit link

Save the page and *you'll see a placeholder with an Edit link on its top right. Click it to start the draw.io editor.

Problem is that I don't see any edit link on the top right, as shown in the screen shot below

enter image description here

Olumide
  • 5,397
  • 10
  • 55
  • 104

2 Answers2

2

If you follow the official MediaWiki "Extension:DrawioEditor" installation instructions (https://www.mediawiki.org/wiki/Extension:DrawioEditor) then it will never work with a greenfield installation. Their single line change requirement in LocalSettings.php is ridiculous. Instead, you need to enable the uploads option and only then will the "Edit" button appear. But to see the diagrams you will also need to enable scalable vector graphics (svg).

Do the following:

  1. Download MediaWiki's DrawioEditor and place its contents into the "extensions/DrawioEditor" directory.
  2. Download Mediwiki's NativeSvgHandler and place its contents into the "extensions/NativeSvgHandler" directory.
  3. Update the LocalSettings.php to include this line (if not already defined): wfLoadExtension( 'NativeSvgHandler' );
  4. Update the LocalSettings.php to include this line (if not already defined): wfLoadExtension( 'DrawioEditor' );
  5. Update the LocalSettings.php to include this line (if not already defined): $wgDrawioEditorImageInteractive = true;
  6. chmod & chown & chgrp the extensions/NativeSvgHandler folder similarly as your other extension folders (if using UNIX or a Synology NAS).
  7. chmod & chown & chgrp the extensions/DrawioEditor folder similarly as your other extension folders (if using UNIX or a Synology NAS).
  8. Extend the default FileExtensions array to also include the svg MIME type by adding this line into the LocalSettings.php file if not already set: $wgFileExtensions[] = 'svg';
  9. Enable uploads within your LocalSettings.php to true: $wgEnableUploads = true;. Without this setting you will NOT see the "Edit" button.

Now refresh the page containing the diagram and you should finally see an "Edit" link in the top right corner of the diagram's bounding box, which you had already correctly defined within the page as {{#drawio:ChartName}}.

NOTE: I should also point out that if you are using a MediaWiki earlier than v1.35, then you will need to set additional settings within LocalSettings.php because v1.35 correctly defaults a lot of the values relating to svg configuration, whereas the earlier MediaWiki versions did not so you may need to explicitly define some of the values with additional config.

NOTE2: Sometimes there is an issue with the text labels NOT appearing in the diagrams (MediaWiki v1.35), but the problem relates to bugs in both MediaWiki and DrawioEditor, so there are three lines of code you need to alter to see the text labels as described here: T271347 which affects these two files under your mediawiki directory:

  • includes/upload/UploadBase.php
  • extensions/DrawioEditor/resources/ext.drawioeditor.js
Lucy Smith
  • 59
  • 3
0

I switched to xwiki it has excellent integration with draw io

Olumide
  • 5,397
  • 10
  • 55
  • 104