2.2.5 Diagrams (drawio)

done
Drawio allows diagrams to be created and edited directly in a wiki page. It can be used for flowcharts, process diagrams, decision trees, infographics, and other visualizations.

Insert a diagram

To create a diagram:

1. Create or open the page where the diagram is to be inserted.
2. In the VisualEditor toolbar, open the Content droplet menu.

   

   Diagram Content Droplet

3. Select diagram.
4. Select Insert. A dialog opens with the following options:
   • Name: Enter a unique name for the diagram. This name is used as the image name in the wiki.
   • Edit mode: Choose how the Drawio editor is displayed:
     • Fullscreen view: Opens the Drawio editor in the entire browser window.
     • Page view: Displays the Drawio editor in the page content area.
   • Image description: Enter alternative text for screen readers. The text is not displayed when the page is viewed.
   • Image alignment: Set the horizontal alignment of the diagram in the page content area.
5. Select Insert. The Drawio diagram is inserted into the page.

   

   Drawio "insert"-dialog window

6. Save the page.
   

The diagram is now available on the page for editing.

Drawio placeholder and [Edit] link

Important:Each diagram must have a unique name in the wiki. If multiple diagrams have the same name, they use the same file, and saving one diagram can overwrite another.

Edit a diagram

To edit a diagram:

1. In page view, select Edit next to the Drawio placeholder or saved diagram.
2. Make the required changes in the Drawio editor.
3. Select Save in the Drawio editor.
4. Select Exit next to Save to close the editor.
   

The changes are saved with the diagram.

Change the Drawio theme

The Drawio editor uses the minimal theme by default.
The following themes are supported:

• minimal
• classic
• dark
  

To use a different theme, add the theme attribute to the drawio tag in source edit mode. For example:

 <drawio filename="Org chart" editmode="inline" theme="classic" alignment="center" alt="Tree view of all departments with current roles" />

Add links to shapes

Links can be added to shapes in a Drawio diagram to open wiki pages.
To add a link to a shape:

1. Right-click the shape and select Edit Link.
2. Enter the path to the target page. For an internal wiki page, include the subwiki name in the path. For example: /HR/wiki/Main Page or /IMS/wiki/Main Page. The page-selection dropdown currently has no function in BlueSpice.
3. Select Apply.
4. Repeat steps 1-3 for other shapes as needed.
5. Select Save.
6. Select Exit to close the Drawio editor.
   

If the changes are not displayed after exiting the editor, refresh the page with F5.

Diagram format

Newly created Drawio diagrams are saved and displayed in SVG format.
A Details link is generated with the diagram. It links to the versioning page for the diagram.

Import an existing diagram

Existing Visio diagrams in .vsdx format can be imported into the Drawio editor and edited further.
To import a Visio diagram:

1. Insert a Drawio diagram on a wiki page.
2. In the Drawio editor, select File > Import From > Device.
3. Select the .vsdx file to import.
4. Edit the imported diagram as needed.

Use diagrams in tables and page layouts

Drawio diagrams in table cells or page layouts can cause problems with editing and with how the diagrams are displayed in PDF exports.
For better results, create the Drawio diagram on a separate wiki page and insert the resulting image into the table cell or page layout with the required dimensions.
If a Drawio diagram is created directly in a table cell, additional CSS on MediaWiki:Common.css can be used to control its size in PDF exports:

/** ERM42590*/
.pdfcreator-type-page .drawio-table-test img {
	max-width: 10cm !important;
}

Prevent automatic resizing of linked PNG diagrams

By default, Drawio PNG images are automatically resized to fit the content area. For diagrams with links on shapes, this can cause the link boundaries to no longer match the shapes because the links are based on image map coordinates.
Automatic resizing can be disabled with CSS.

Disable resizing for all Drawio PNG 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;
}

These rules disable automatic resizing for all Drawio preview images.

Disable resizing for selected diagrams

To apply the styling only to selected diagrams, wrap the <drawio> tag in a container with the drawio-linked class in source edit mode:

<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 previous rules to MediaWiki:Common.css. Use the following rules instead:

/*Drawio png - do not auto-resize preview images when links are added directly to the shapes */
.drawio-linked {
    overflow-x: scroll;
}

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

Configuration

Administrators can configure Drawio in the Config Manager. The following settings are available:

• Backend URL: Specifies the base URL of the diagrams.net (formerly draw.io) backend service used for editing diagrams.
• Edit mode: Specifies how the Drawio editor is displayed by default.