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

draw.io chart

Inserting a chart

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.

Editing the drawing

1. Click Edit on the saved page above the drawio placeholder 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:.You can now edit your drawing.
   
2. In Click Save in the draw.io , click Save window to save your drawing.
3. In Click Exit next to the Save button in the draw.io , click Exit window 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)