draw.io für MediaWiki und BlueSpice – Kollaborativ erstellte Zeichnungen

Ein Bild sagt mehr als tausend Worte - Grafiken im Wiki darstellen mit Draw.io. Bild: CCO Public Domain via Pixabay.
Ein Bild sagt mehr als tausend Worte – Grafiken im Wiki darstellen mit draw.io. Bild: CCO Public Domain via Pixabay.

Dem erfahrenen und kreativen Internet-Autor ist der Diagramm-Editor draw.io schon lange ein Begriff. Er basiert auf einer Webanwendung, die bereits 2005 von dem Unternehmen JGraph als freie Software entwickelt wurde und mittlerweile mit diversen Anwendungen wie z.B. Confluence kompatibel ist.

Auch für Mediawiki steht draw.io als Erweiterung zur Verfügung und bietet umfangreiche Darstellungsmöglichkeiten für Prozesse, aufwendige Flussdiagramme und vieles mehr. Damit erfüllt sich der Wunsch vieler Wiki-User, anschauliche Grafiken wie Ablaufdiagramme, Prozessketten oder Entscheidungsbäume im Wiki zusammen erarbeiten und präsentieren zu können.

Vorteile von draw.io

Kommen wir zunächst ganz allgemein zu den Vorzügen dieses Programms:

  • Keine Lizenzkosten: Bei draw.io handelt es sich um eine freie Software. Sie kann nicht nur über die Website der Entwickler kostenlos genutzt werden, sondern steht auch auf Github zum Download und/oder Weiterentwicklung zur Verfügung.
  • Mächtiges Tool: draw.io bietet – obwohl es webbasiert ist – sehr viele Funktionen und braucht sich in dieser Hinsicht selbst vor der professionellen proprietären Konkurrenz wie z.B. der Desktop-Lösung MS Visio, dem es vom Look & Feel her sehr ähnlich ist, nicht zu verstecken. Aus etlichen Toolbars können alle möglichen klassischen und der DIN-Norm entsprechenden Elemente per Drag & Drop auf die Bearbeitungsfläche gezogen, positioniert und mit Verbindungslinien versehen werden. Aber auch einfache Zeichnungen, wie z. B. Umrisspläne oder Präsentationen können in draw.io kreiert werden.
Prozesse schnell und einfach mit der Anwendung Draw.io im Wiki darstellen.
Prozesse schnell und einfach mit der Anwendung draw.io im Wiki darstellen.
  • Leichte Bedienbarkeit: Die Programmoberfläche ist weitestgehend selbsterklärend und sowohl für Anfänger sofort nutzbar als für fortgeschrittene User attraktiv. Die Oberfläche ist sehr ansprechend gestaltet und lädt zum sofortigen Loslegen ein. Selbst sehr aufwändige Diagramme können mit draw.io direkt im Browser gestaltet werden. Dem kommt entgegen, dass die Toolbars nach Belieben aktiviert und deaktiviert werden können, sodass der Nutzer stets zwischen einer eher übersichtlichen Oberfläche oder dem kompletten Funktionsumfang wählen kann.
Für eine bessere Übersicht können die Toolbars von Draw.io nach Belieben aktiviert und deaktiviert werden.
Für eine bessere Übersicht können die Toolbars von draw.io nach Belieben aktiviert und deaktiviert werden.
  • Im- und Export von Daten: Mit Drag & Drop lassen sich auch eigene Images leicht importieren. Die fertigen Diagramme können anschließend vom XML-Standard in diverse Bilddateien, SVG, PDF oder HTML exportiert und in einer Dropbox oder Google Drive abgelegt werden.
  • Sicherheit der eigenen Daten: Zwar verbindet sich die Webapplikation im Browser mit der Website von draw.io, doch die vom User eingegebenen Informationen und Daten werden während der Verarbeitung ausschließlich clientseitig, also beim Nutzer im Browser vorgehalten. Klickt man auf Speichern, so werden sie ins Wiki geschrieben – ganz anders als beispielsweise beim Konkurrenzprodukt Gliffy.
  • Browserunabhängigkeit: draw.io basiert auf mxGraph, einer Grafik-Bibliothek in JavaScript, die in jedem aktuellen und sogar älteren Browsern funktioniert. Oft dauert es gerade in größeren Unternehmen eine Weile bis alle in Ihren Webanwendungen auf dem aktuellsten Stand sind. draw.io unterstützt Browser bis zum Internet Explorer 6 voll und ist damit auch in technisch älteren Umgebungen ohne Funktions- und Performanz-Einbußen zu nutzen.
  • Hohe Stabilität, gute Performanz: Hierin liegen mit die größten Vorteile der Anwendung. Die grafische Gestaltung mit einer Webapplikation verursacht häufig Performanzprobleme, d.h. der Bearbeitungsprozess stockt oder stürzt sogar ab. Aufgrund des sparsamen Einsatzes der Ressourcen erweist sich draw.io hingegen auch auf älteren Rechnern als äußerst stabil und flüssig. Das Programm punktet mit einer starken Performanz, sodass selbst größere Aktionen wie das Ziehen, Drehen, Vergrößern oder Verbinden von Objekten flüssig ablaufen.

draw.io für MediaWiki und BlueSpice

Seit der Version 2.23.3 ist die Anwendung draw.io auch in BlueSpice pro integriert und erfreut sich großer Begeisterung bei den Anwendern. Wenn die draw.io-Erweiterung in Ihrem Wiki installiert wurde, können auf jeder Wiki-Seite beliebig viele Diagramme eingebunden werden. Dazu müssen Sie im Bearbeitungsmodus der gewünschten Seite im Wiki-Text lediglich folgenden Tag an der gewünschten Stelle eingeben:

{{#drawio:Name_des_Flowcharts}}

Wenn Sie die Wiki-Seite anschließen speichern, erscheint eine noch leere Vorschau mit dem eingegebenen Namen des draw.io-Charts. Rechts oben finden Sie einen Bearbeiten-Link. Klicken Sie darauf, um den Erstellungs- bzw. Bearbeitenmodus des Flussdiagramms zu öffnen. Im Plugin können Sie nun Formen, Pfeile etc. auf der linken Seite auswählen und rechts einfügen. Im Reiter Hilfe des Plugins finden Sie außerdem eine ausführliche Benutzeranleitung.

Ein Klick auf Save speichert Ihre Änderungen und ersetzt automatisch das Diagramm auf Ihrer Wiki-Seite, wenn Sie die Erweiterung mit einem zusätzlichen Klick auf Exit wieder verlassen. In diesem Moment wird der Quellcode Ihres Diagramms und ein Bild im Wiki abgespeichert. draw.io erstellt dafür im Namensraum Datei ein versioniertes .png-File.

Durch jede Änderung des Flussdiagramms, die mit dem Klick auf Save gespeichert wurde, wird eine neue aktualisierte Version des .png-Files erzeugt. In der History können Sie bequem und einfach alle Änderungen einsehen und haben einen schnellen Zugriff auf alle Daten. Außerdem könnten Sie dieses File auch auf einer anderen Seite im Wiki einbinden und mit Hilfe der Funktion ImageMapEdit mit internen und externen Verlinkungen versehen.

Jede gespeicherte Änderung erzeugt eine neue aktualisierte Version der Datei.
Jede gespeicherte Änderung erzeugt eine neue aktualisierte Version der Datei.

Verschiedene Beispiele

Hier finden Sie vier Beispiele, die aufzeigen, welche Möglichkeiten Ihnen draw.io bietet:

Organigramm
Organigramm

EDV-Diagramm
EDV-Diagramm

Prozessdarstellung
Prozessdarstellung

Mindmap
Mindmap

Möchten Sie draw.io für BlueSpice testen?

Probieren Sie es aus und gestalten Sie Ihren Prozess in unserem BlueSpice pro Online Demo: draw.io testen.

Unsere Quellen sowie weitere Informationen finden Sie hier:

Dies könnte Ihnen auch gefallen

Schreiben Sie einen Kommentar