UserManual:Extension/DrawioEditor

Summary

Draw.io offers extensive drawing possibilities for process flowcharts, infographics and other visualizations on a wiki page. Descriptive graphics like process chains or decision trees can be constructed directly on a wiki page.

• 

  Edit mode

• 

  Saved flowchart

Creating a drawing

To insert a drawing with VisualEditor:

1. Create or choose a page where you want to insert a drawing.
2. Select Insert > Magic word from the editor toolbar.
3. Choose drawio from the list of magic words.
4. Click Done. This opens a dialog box. Enter a name for your drawing.
5. Click Insert.
   
   This inserts the following tag in your source code {{#drawio:Name_of_the_flowchart}}
6. Save the page.
7. Click Edit to open the draw.io editor. For the best editing experience, set your wiki into full-screen mode using the toggle button in the main toolbar:
   
   
   
8. In draw.io, click Save to save your drawing.
9. In draw.io, click Exit to close the draw.io editor.

Using draw.io with image maps

Draw.io 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 or create an image map.
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.

Related info

• draw.io support
• mediawiki.org/wiki/Extension:DrawioEditor
• UserManual:DrawioEditor
• Anja Ebersbach, draw.io für MediaWiki und BlueSpice-Kollaborativ erstellte Zeichnungen, Hallo Welt! Blog vom 11. Juli 2017. (german)