2.2.4 Diagrams (drawio)

Drawio 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.

Embedding the Drawio editor

To insert a drawing in the visual editor:

1. Create or choose a page where you want to insert a drawing.
2. Select Insert > Magic word from the editor toolbar.

   

   Insert Magic word

3. Choose drawio from the list of magic words.

   

   Magic word "drawio"

4. Click Done. This opens a dialog box. Enter a name for your drawing. This name is used to version your diagram as a PNG file in the wiki.
5. Click Insert.

   

   This inserts the tag <drawio filename="<nameoffile>"> in your source code.
6. Save the page.

The drawio editor is now available on the page.

Drawio placeholder and [Edit] link

Editing the diagram

Note:To open the drawio editor, you always click on the [Edit] link in page view mode.

To edit the diagram:

1. Click Edit on the saved page next to the drawio placeholder or your already saved diagram.

   

   the open drawio editor

2. Add any needed shapes to your diagram.
3. Click Save in the drawio window to save your drawing.
4. Click Exit next to the Save button to close the editor.

Adding links to shapes

To add a link to a shape:

1. Right-click to open the shape menu.
2. Click Edit Link.

   

   Shape menu

3. Provide the full path of the link.
   The full path must also be specified for internal wiki pages (example external link: https://bluespice.com, example internal link: https://de.wiki.bluespice.com/wiki/Manual:Extension/DrawioEditor).
   Note: The displayed dropdown menu currently has no function in BlueSpice.

   

   (1) Enter full url link path (2) Link can be opened in new window (3) Dropdown is not used in BlueSpice.

4. Click Apply.
5. Repeat steps 1-4 for other shapes in the diagram.
6. Click Save.
7. Click Exit to close the editor.

If you don't see the changes yet, click F5 on your keyboard to refresh the page.

Avoid auto-resizing of linked

shapes: By default, drawio images are resized to always fit into the content area.

Since the links are implemented as map coordinates, the png image cannot be resized without breaking the link boundaries. To avoid this, you can disable automatic resizing of your drawio images with the following css.

Remove auto-resizing auf drawio images

Add the following rules to MediaWiki:Common.css

/*Drawio png - do not auto-resize preview images when links are added directly to the shapes */
div[id*=drawio-img-box] {
    overflow-x:scroll 
}

/*Drawio png - do not auto-resize preview images when links are created as image maps from file description page */
div[id*=drawio-img-box] img {
    height: initial;
    max-width: initial;
    width: initial;
}

This will remove the auto-resizing behavior from all drawio preview images.

To apply this styling to only some drawio images, you could add a wrapper to these images in source editing mode. For example:

<div class="drawio-linked">
<drawio filename="processmap" alt="Processmap showing the management, core, and supporting processes ">
</drawio>
</div>

In this case, do not add the above styles to your Common.css, but use these rules instead:

/*Drawio png - do not auto-resize drawio diagrams that are wrapped in a container with class drawio-linked */

.drawio-linked {
    overflow-x:scroll 
}

.drawio-linked img {
    height: initial!important;
    max-width: initial!important;
    width: initial!important;
}

PNG and SVG format

In BlueSpice, drawio diagrams are saved in PNG format by default. It is possible to configure "svg" as image type.

Import of existing diagrams

Visio diagrams

Importing a .vsdx file

You can import files with the extension .vsdx directly into the drawio editor and edit them further. To do this, create a diagram on a wiki page. In the drawio editor, choose File> Import From> Device. You can then edit the imported diagram.

Related info

• draw.io Website
• mediawiki.org/wiki/Extension:DrawioEditor
• Reference:DrawioEditor
• Anja Ebersbach, draw.io für MediaWiki und BlueSpice, BlueSpice News & Know How, February 13 2020.

Technical Reference: DrawioEditor

PDF exclude - start

---

To submit feedback about this documentation, visit our community forum.

PDF exclude - end