draw.io for MediaWiki and BlueSpice – create drawings collaboratively

A picture is worth a thousand words - show graphics in your wiki with draw.io. Picture: CCO Public Domain via Pixabay.
A picture is worth a thousand words – show graphics in your wiki with draw.io. Picture: CCO Public Domain via Pixabay.

Experienced and creative authors already got to know the diagram editor draw.io a long time ago. It is based on a web application, already developed by the company JGraph as free software, and it is already compatible with diverse applications like, for example, Confluence.

draw.io is also available for MediaWiki, making is possible to display processes, elaborate flowcharts and much more and in many ways. This fulfils the desire of many wiki users to create and present clear graphics like flowcharts, process chains and decision trees, working collaboratively in the wiki.

Advantages of draw.io

Let us now come to the general advantages this program offers:

  • No licensing costs: draw.io is free software. It is available for free not only via the developer’s website, but also for download on Github and/or for further development.
  • Powerful tool: draw.io offers many functions comparing favourably in this regard even with the professional proprietary competition such as the desktop solution MS Visio, which has a very similar look and feel. Toolbars contain all the classic elements you might want and those corresponding to DIN norms. Drag and drop them onto the work space, position them and add lines to connect them together. But simple drawings, like floor plans can also be created in draw.io.
Show processes simply and quickly in your wiki with the application draw.io.
  • Simple to use: the programme’s interface is as self-explanatory as can be. It can be used straight away by a beginner but it is still attractive to advanced users. The user interface is very pleasant and inviting to work with. Even very involved diagrams can be designed directly in your browser with draw.io. You can activate and deactivate the toolbars at will, so that you can always choose to make the interface cleaner or show more functions at the same time.
Draw.io’s toolbars can be activated and deactivated at will, so you can have a clear, tidy interface.
  • Import and export files: images are also easy to import just by dragging and dropping them. When finished, the diagrams can be exported from the XML standard into diverse image formats, SVG, PDF or HTML and placed in a Dropbox or in Google Drive.
  • Keep your data safe: While the web application in your browser does connect to the draw.io website, the data and information entered by the user remains on the client side at all times, i.e. it stays in your browser. When you click on save, then the data is saved in the wiki – this is totally different, for example, to the competing product Gliffy.
  • Browser independence: draw.io is based on mxGraph, a graphic library in JavaScript which functions in every modern browser and even older browsers. It can often take time in a company to update all the web applications to the most recent versions, particularly in big companies. draw.io fully supports browsers going back to Internet Explorer 6, and so it can be used in older technical environments without influencing function or performance.
  • High stability, good performance: These are the biggest advantages to the application. Designing graphics with a web application often causes performance problems, meaning that the editing process stalls or even crashes. However, due to its sparing use of resources, draw.io is exceptionally stable and smooth even on older computers. The programme’s performance is so superior that even larger actions run smoothly like dragging, rotating, enlarging or connecting objects.

draw.io for MediaWiki and BlueSpice

The application draw.io had been integrated into BlueSpice pro since Version 2.23.3, sparking great enthusiasm from users. If the draw.io extension is installed in your wiki, it lets you incorporate as many diagrams as you like into each wiki page. To embed a diagram, you only need to enter the edit mode on the page you want it to appear, and add the following tag at the position you want:

{{#drawio:Name_of the_flowchart}}

When you later save the wiki page, a preview will appear of the chart. It starts of blank but with the name you have given it. At the top right you can find a link to edit it. Click there to open the creation or editing mode for the flowchart. Now you can choose shapes, arrows etc. on the left hand side and insert them on the right. In the plugin’s help tab, you can also find comprehensive instructions.

Click on save to save your changes and automatically replace the diagram on your wiki page when you leave the extension with a further click on exit. In this moment, your diagram’s source code and a picture is saved in the wiki. draw.io creates a .png file with history in the namespace File.

Whenever you save a change to the flowchart by clicking on save, a new updated version of the .png file is created. The figure’s history is very convenient, showing you simply all the changes that have been made, and letting you quickly access all the files. In addition, you can integrate this file on other pages in the wiki too, and using the function ImageMapEdit, equip it with both internal and external links.

Every change you save creates a new updated version of the file.

Various examples

You can find four examples showing you the possibilities that draw.io offers you:

Organisational chart
Computing diagram
Process visualisation


Would you like to test draw.io for BlueSpice?

Try now and design your process in our BlueSpice pro online demo: test draw.io.

You can find our sources and further information:

You Might Also Like

1 Comment

Leave a Reply