Draw.io ist eine kostenpflichtige Erweiterung (Add-on) für Confluence. Es eignet sich hervorragend zum Zeichnen von Diagrammen aller Arten. Das Werkzeug bietet zahlreiche Diagrammtypen, die oft in der Software-Entwicklung zum Einsatz kommen. Für die Darstellung in Diagrammen bietet draw.io eine ganze Reihe von Symbolen für

  • Unified Modelling Language (UML),
  • Enterprise Integration Patterns (EIP) oder
  • Business Process Modeling Language (BPML)

Ebenfalls interessant sind die Schablonen für iOS-Mockups.

Den Kern von draw.io bildet “mxGraph“, einer auf JavaScript basierten Bibliothek für Datenvisualisierung, die der englische Hersteller des Werkzeuges selbst entwickelte. Die HTML5-Anwendung bietet eine breite Browser-Unterstützung.

Das ausgereifte Diagramming-Plugin für Confluence und JIRA wird von JGraph produziert. Mit draw.io lassen sich über eine intuitive und responsive Oberfläche nahtlos Diagramme aller Art entwickeln. Der Artikel gibt einen Überblick über die Funktionen von draw.io. Ein Interview mit JGraph-Mitbegründer Gaudenz Alder bietet eine kompakte Zusammenfassung der Eigenschaften und Potenziale.

Weiterlesen auf seibert-media.net

In einem Video sprechen Gaudenz Alder von JGraph und Martin Seibert über beide Tools und versuchen dabei, speziell auf die möglichen Fragen eines Kunden einzugehen, der unvoreingenommen nach einer professionellen webbasierten Diagramming-Software sucht.

Weiterlesen auf seibert-media.net

Die neue Version des Diagramming-Werkzeugs draw.io für Confluence eröffnet die Möglichkeit, schnell und unkompliziert eigene Bibliotheken mit individuellen Shapes anzulegen und dauerhaft zu nutzen.

Weiterlesen auf seibert-media.net

Medienbibliothek

Confluence erlaubt Anhänge in jeder Seite. Die Medienbibliothek in Confluence ist daher eine besondere Seite in der Produktdokumentation. Sie enthält Abbildungen und Diagramme, die in anderen Seiten verwendet werden. Sie hilft den Autoren, den Überblick zu behalten. Jedes Bild gibt es nur in einer Version. Eine Änderung im Diagramm wirkt sich sofort auf alle Seiten aus, in denen das Diagramm verwendet wird. Dadurch erkennen Autoren selbst oder durch Feedback der Leser recht schnell, ob Inhalte einer Seite, in der das Diagramm verlinkt wurde, noch richtig sind.

ktip Ohne Medienbibliothek gibt es Anhänge verteilt auf viele Seiten im Wiki. Es passiert dann manchmal, dass das gleiche Diagramm von zwei Autoren unabhängig voneinander in zwei verschiedenen Seiten eingefügt wird. Ändert sich eine Version des Diagramms, entsteht sofort eine Inkonsistenz in der Dokumentation, die aber nur sehr schwer entdeckt wird, weil jede Seite für sich immer noch konsistent ist.

Ein weiteres Ziel ist es, unabhängig vom Werkzeug zur Bearbeitung (hier draw.io) für die Einbettung in den Seiten konsequent PNG-Dateien bereitzustellen. Das hat Vorteile in der Benutzererfahrung der Leser (die Anzeige des Bildes ist immer gleich, unabhängig vom Werkzeug) und beim Export von Teilen der Produktdokumentation beispielsweise als PDF.

Diagramm erstellen

Die schrittweise Anleitung richtet sich an Autoren, die in Confluence mit dem Werkzeug draw.io ein Diagramm erstellen und zentral verfügbar machen wollen, entsprechend der Idee der Medienbibliothek.

Du legst eine neue, leere Seite an. Die übergeordnete Seite ist immer die Startseite der Medienbibliothek. Der Titel der Image-Seite beschreibt das Diagramm knapp, aber eindeutig. Es ist hilfreich, wenn der Titel einen Hinweis auf den Diagrammtyp gibt. Der Titel hat immer das Präfix “Image”.

Danach trägst du Stichworte ein. Das Stichwort “image” ist zwingend erforderlich, um die Art der Seite zu kennzeichnen. Weitere Stichworte leitest du aus dem Titel des Diagramms ab.

Die Image-Seite hat vorerst keine weiteren Inhalte.

Im Menü “Einfügen” findest du die Confluence-Funktion “Draw.io Diagramm”. Mit dem Aufruf des Menüpunkts legst du ein neues Diagramm an.

22-confluence-tip-diagramme-mit-draw-io-erstellen-draw-io-einfugen

Im Editor von draw.io kannst du jetzt das Diagramm erstellen. Sehr nützlich ist die Möglichkeit, Texte mit Confluence-Seiten zu verknüpfen.

Weiterlesen auf support.draw.io

Wenn du mit dem Diagramm fertig bist, dann klickst du im Editor auf Speichern. Du wirst nun nach dem Namen des Diagramms gefragt. Der Name des Diagramms ist identisch mit dem Titel der Image-Seite.

Nach dem Speichern der Image-Seite befinden sich im Anhang nun zwei Dateien:

  • Eine XML-Datei mit dem Inhalt des Diagramms. Das ist die Quelldatei des Diagrammes, wie sie auch in der kostenlosen Variante von draw.io verwendet wird.
  • Eine PNG-Datei für die Verwendung in anderen Seiten. Sie wird automatisch von draw.io erzeugt und nach jeder Änderung auch aktualisiert.

Beide Dateien haben immer den gleichen Namen. Der Inhalt der Image-Seite ist jetzt das eingebettete Diagramm. Im Bearbeiten-Modus kann das Diagramm erneut bearbeitet werden.

Diagramm verwenden

Als sehr schönen Nebeneffekt durch dieses Vorgehen finden wir Diagramme sowohl über die normale Suche als auch über die Stichwortsuche von Confluence.

Grundsätzlich können wir die PNG-Datei aus dem Anhang der Image-Seite auch in anderen Seiten verwenden.  Der Nachteil ist, dass es keine Möglichkeit gibt, herauszufinden, welches Diagramm in anderen Seiten als der Image-Seite verwendet werden. Das erschwert die Pflege der Medienbibliothek.

Alternativ können Diagramme auch über das Makro “Seite einschließen” (“Include Page“) eingefügt werden. Das Makro zeigt die angegebenen Image-Seite dort an, wo das Makro eingefügt wurde. Dieses Vorgehen hat den Vorteil, dass wir durch durch den Aufruf des Menüpunktes “Seiteninformationen” (“Page Information“) im Abschnitt “Eingehenden Links” (“Incoming Links”) schnell einen Überblick über die Verwendung des Diagramms in anderen Seiten. Ein weiteren Vorteil der Verwendung des Makros “Seite einschließen” (“Include Page“) ist, dass ein Umbenennen der Image-Seite nicht dazu führt, dass der Link in den anderen Seiten kaputt geht.

Die Nutzung der Diagramme ist in allen Seiten gleich. Die Bearbeitung des Diagrammes mit draw.io ist in beiden Varianten nur in der Image-Seite der Medienbibliothek möglich.

Diagramm zur Navigation

Eine spezielle Verwendung von draw.io und Verlinkung ergibt sich im Zusammenhang mit dem Baustein Case. In den Essenzschritten nutzen wir Services und/oder Events, um konkrete Hinweise auf die technische Umsetzung zu geben. Eine schematische Darstellung ist ein wunderbares Mittel, um einen Überblick über Komponenten und Datenflüsse zu geben, die den Case realisieren. Durch die Verlinkung der dargestellten Komponenten mit Confluence-Seiten wird der Überblick sogar interaktiv. Wichtiges Wissen wird optisch ansprechend präsentiert, und mit einem Klick bekommt der interessierte Leser weitere Details. Die Essenzschritte im Case zeigen den Weg durch die Architektur, die durch das Diagramm visualisiert wird.

Fazit

Confluence wird durch draw.io um eine wichtige Funktion erweitert. Das Werkzeug lässt kaum Wünsche übrig. Jedes Diagramm ist aber isoliert. Draw.io ist ein Zeichenprogramm. Seine Grenzen hat draw.io dort, wo Diagramme voneinander stark abhängig sind, gemeinsame Elemente haben, z.B. gemeinsame Klassen in UML-Klassendiagrammen. Das Werkzeug ist keine angemessene Lösung für komplexe, detailreiche Modelle. Der Aufwand, eine Vielzahl voneinander abhängiger Diagramme dauerhaft zu pflegen, ist einfach zu groß.