DrawioEditor

Summary

The extension Manual:Extension/DrawioEditor offers extensive illustration possibilities for processes, complicated flowcharts, and much more. Descriptive graphics like process chains or decision trees can be constructed easily!

• Manual:Extension/DrawioEditor Diagram Editing.png

  Creating or editing a diagram with Manual:Extension/DrawioEditor

• Manual:Extension/DrawioEditor Diagram.png

  Completed, inserted diagram

How to create flowcharts with Manual:Extension/DrawioEditor

Step 1: Create or choose a page where you want to insert a flowchart.

Step 2: Enter the following code at the desired spot:

{{#drawio:Name_of_the_flowchart}}

Step 3: After saving the article, you will now find an Edit link at the respective spot of the page. Click on it to open the creation mode for the flowchart.

In the plugin you can now choose boxes, arrows, etc. on the left and insert and combine it on the right. Clicking Save will save your changes and the diagram on your wiki page will be automatically replaced.

By the way: there is also a Help tab where you can find a detailed user manual.

You can find more information on the Manual:Extension/DrawioEditor homepage.

Create links: Use DrawIO with ImageMap

DrawIO creates a versioned png-file in the File namespace. This means that every change of the flowchart that was concluded by Save will create a new, updated version of this png-file. You can now integrate this file on another page in your wiki and use ImageMapEdit to link parts of it internally or externally to other pages.
Please note: unfortunately it is not possible to use ImageMapEdit directly with the DrawIO tag in an article, so you will have to create separate pages for this.

More information about the use of ImageMaps can be found here.

External Links

• Anja Ebersbach: draw.io für MediaWiki und BlueSpice – Kollaborativ erstellte Zeichnungen, Hallo Welt! Blog vom 11. Juli 2017. (german)
• MediaWiki.org: Extension:Manual:Extension/DrawioEditorEditor
• draw.io Homepage