Difference between revisions of "Manual:Extension/DrawioEditor"

[unchecked revision][quality revision]
m (Text replacement - "Drawio" to "Manual:Extension/DrawioEditor")
m


Summary[edit | edit source]

The extension Manual:Extension/DrawioEditor Draw.io offers extensive illustration drawing possibilities for processes, complicated process flowcharts, and much moreinfographics and other visualizations on a wiki page. Descriptive graphics like process chains or decision trees can be constructed easily!

How to create flowcharts with Manual:Extension/DrawioEditor

directly on a wiki page.

Creating a drawing[edit | edit source]

Step 1: To insert a drawing with VisualEditor:

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

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

  1. 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.
    drawio dialog
    This inserts the following tag in your source code {{#drawio:Name_of_the_flowchart}}
Step 3: After saving the article, you will now find an Edit link at the respective spot of the
  1. Save the page.
  2. Click
on it
  1. Edit 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
  1. draw.io editor. For the best editing experience, set your wiki into full-screen mode using the toggle button in the main toolbar:
    full-screen icon

  2. In draw.io, click Save to save your drawing.
  3. In draw.io, click Exit to close the draw.io editor.

Using draw.io with image maps[edit | edit source]

DrawIO 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 and use ImageMapEdit to link parts of it internally or externally to other pagesor 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.

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

External Links[edit | edit source]

Anja Ebersbach:

Related info

  • MediaWiki.org: Extension:Manual:Extension/DrawioEditorEditor
  • draw.io Homepage


  • Attachments

    Discussions