Haben Sie wenig Erfahrung mit der Erstellung von professionellen Diagrammen?

Dann hilft Ihnen unser umfangreiches Tutorial.

Testen Sie draw.io kostenlos

draw.io in Confluence öffnen

Ein draw.io-Diagramm kann auf jeder beliebigen Confluence-Seite erstellt werden, vorausgesetzt Sie haben die Berechtigung, diese Seite zu bearbeiten. 

draw.io kann als Makro über den Makro-Browser auf der Seite platziert werden. Dazu klicken Sie auf das Plus-Icon in der Werkzeugleiste und wählen draw.io im Dropdown-Menü aus. Falls die Option hier nicht aufgeführt ist, klicken Sie den untersten Punkt "Andere Makros" an. In dem sich öffnenden Dialogfeld geben Sie in die Suchleiste oben rechts "drawio" ein.  

 Wer sich einige Klicks sparen möchte, kann das draw.io-Makro auch durch das Schreiben einer geschweiften Klammer (Windows: "Alt Gr" + "7", Mac: "alt"+"8") aufrufen "{draw"

Vorlagen-Manager

Nachdem Sie das draw.io-Makro auf der Seite platziert haben, öffnet sich der Vorlagen-Manager.

• Unter dem erstem Punkt "draw.io-Diagramme" kann ein neues leeres draw.io-Dokument geöffnet werden.
• Über den Punkt "Suchen" können auch bereits existierende Diagramme als Vorlage verwendet werden.
• draw.io bringt zusätzlich einige Vorlagen mit (z.B. Flowcharts, Mindmaps, etc.), diese finden Sie unter den weiteren Kategoriepunkten.

Folgen Sie einem der drei Punkte und der draw.io-Editor öffnet sich.

Diagramm speichern

Über "Datei" > "Speichern" in der Menüleiste kann das Diagramm gespeichert werden, ohne es zu beenden. Der einfachste Weg, ein Diagramm zu speichern und gleichzeitig zu schließen, ist der blaue "Speichern und Beenden"-Button oben rechts. Sobald der draw.io-Editor über "Speichern & Beenden" geschlossen wird, wechselt die Ansicht wieder auf die Confluence-Seite.

draw.io speichert automatisch den aktuellen Stand. Falls Sie also versehentlich auf "Beenden" klicken, können Sie über das Einfügen eines neuen Diagramms den Zustand wiederherstellen.

Speichert man ein draw.io-Diagramm zum ersten Mal, wird der Dateiname für das Diagramm festgelegt. Beachten Sie, dass dieser Name im Nachhinein nicht mehr geändert werden kann. Nach dem Speichern kann das Diagramm jederzeit wieder bearbeitet werden: Diagramm anklicken und in der erscheinenden Werkzeugleiste den Button "Bearbeiten" drücken.

Ansichtsmodus

Im Ansichts- bzw. Lesemodus der Confluence-Seite kann das Diagramm im Vollbild-Modus angezeigt werden (auch vergrößern und verkleinern ist möglich). Klicken sie dazu auf das Diagramm wie bei einem Bild.

Die Diagramm-Ansicht (Größe, Rahmen, Kopfleiste, etc.) auf der Confluence-Seite kann jederzeit geändert werden. Dazu gehen Sie zunächst in den Editier-Modus der Confluence-Seite und klicken das Diagramm an.

In der Werkzeugleiste haben Sie folgende Möglichkeiten, das Diagramm zu bearbeiten:

• Ansicht des Diagramms auf der Confluence-Seite (Rahmen, Toolbar, ...)
• Duplizieren des Diagramms
• Änderung der Ansichtsgröße auf der Seite (ähnlich wie bei Bildern in Confluence)
• Entfernen des Diagramms

Navigation auf der Zeichenfläche

Sie wissen nun, wie Sie draw.io in Confluence einsetzen.

Im nächsten Schritt wollen wir uns mit den Bedienfeldern und der Navigation auf der Zeichenfläche im draw.io-Editor beschäftigen. 

In der Mitte befindet sich die Zeichenfläche. Alles, was hier platziert wird, ist nach dem Speichern auf der Seite sichtbar.
Zwei der wichtigsten Dinge beim Navigieren sind das Verschieben der Zeichenfläche und das Heran- und Hinauszoomen.

Die Zeichenfläche kann durch Scrollen mit dem Mausrad oder per Scrollbalken verschoben werden.
Dies funktioniert ebenso, indem Sie die rechte Maustaste gedrückt halten und die Zeichenfläche hin und her bewegen (alternativ Leertaste drücke und ziehen). 

Heran- und Hinauszoomen kann man durch die Lupen-Werkzeuge in der Werkzeugleiste.
Außerdem können Sie mit gedrückter Alt-Taste das Mausrad vor und zurück bewegen.

Den jeweiligen Zoomstatus (in Prozent) sehen Sie oben in der Werkzeugleiste.

Bedienfelder und Werkzeuge (Übersicht)

Die Bedienfelder sind in drei Bereiche unterteilt:

1. Es gibt eine horizontale Werkzeugleiste überhalb der Zeichenfläche. 
   Hier finden Sie die wichtigsten Werkzeuge, die sich sowohl im Hauptmenü darüber als auch im Formatierungs-Bedienfeld rechts wiederfinden.
   Die Werkzeuge passen sich dem jeweiligen Kontext automatisch an, bspw. an das Bearbeiten von Texten.
2. Auch das eben erwähnte Formatierungs-Bedienfeld rechts passt sich an den Kontext an.
   Wenn Sie ein Objekt auswählen, können hier das Aussehen und der Text innerhalb des Objekts sowie die Anordnung und die Größe angepasst werden.
3. Links von der Zeichenfläche befindet sich die Formen-Bibliothek.
   In der Formen-Bibliothek finden sich die unterschiedlichsten Formen unterteilt in verschiedene Kategorien. Diese Kategorien können je nach Bedarf aufgeklappt und verwendet werden. 
   Neben den bereits vorhandenen Kategorien können Sie beliebig viele eigene Bibliotheken hinzufügen.
   Die in der Bibliothek enthaltenen verschiedenen Formen können einfach per Klicken, Halten und Ziehen auf die Zeichenfläche gebracht werden.

Mehrere Objekte können ausgewählt werden, indem Sie beim Auswählen die Shift-Taste gedrückt halten. 
Wenn Sie alle Elemente, die Sie aus der Bibliothek hinzugefügt haben, löschen möchten, so wählen Sie mit gedrückter Shift-Taste alle gewünschten Objekte aus und klicken auf das Mülleimer-Symbol in der Werkzeugleiste. 
Zum Löschen können Sie alternativ auch die Entf- oder die Rückschritt-Taste drücken.

Wenn nichts ausgewählt ist, kann die Zeichenfläche selbst angepasst werden.

Mehrere Objekte auswählen und verschieben

Einzelne Objekte verschieben Sie, indem Sie die Maustaste auf dem Objekt geklickt halten und es an die gewünschte Position ziehen.

Mehrere Objekte verschieben Sie, indem Sie alle gewünschten Objekte auswählen (Shift-Taste gedrückt halten oder Rahmen ziehen) und diese an die gewünschte Position ziehen.
Es ist wichtig, dass der Mauszeiger beim Verschieben überhalb eines der markierten Objekte liegt.

Liegen die Objekte, die Sie auswählen möchten, nahe beieinander, so können Sie mit gedrückter Maustaste einen Rahmen um alle Objekte ziehen.
Dabei ist es wichtig, in einer freien Fläche anzufangen und den Rahmen komplett um jedes Objekt zu ziehen, das Sie auswählen möchten.
Außerdem können Sie mehrere Objekte auswählen, indem Sie die Shift-Taste gedrückt halten und die gewünschten Formen auswählen.

 Falls Sie versehentlich etwas verschieben, können Sie das über den Rückgängig-Pfeil in der oberen Werkzeugleiste jederzeit rückgängig machen.

Duplizieren

Zum Duplizieren von Objekten gibt es unterschiedliche Möglichkeiten:

• über das Menü: Bearbeiten > Kopieren, Bearbeiten > Einfügen
• über das Menü: Bearbeiten > Duplizieren (ein Schritt gespart)
• Tastenkürzel: Strg + C / V oder Strg + D

Skalieren & Rotieren

Zum Skalieren, also Vergrößern und Verkleinern der Form, kann man diese ganz einfach an den acht blauen Punkten ziehen.

 Zum proportionalen Skalieren können Sie beim Ziehen einfach die Shift-Taste gedrückt halten.

Um eine Form zu drehen, können Sie das Rotations-Symbol geklickt halten und es in die gewünschte Drehrichtung ziehen.
Wenn Sie die Skalierung oder die Drehung genauer vornehmen möchten, dann können Sie das über das Formatieren-Bedienfeld rechts tun.
Dazu nutzen Sie im Reiter "Anordnen" den Punkt "Größe".

Wenn Sie die Höhe eines Rechtecks an ein anderes anpassen wollen, übernehmen Sie den Wert für das andere Rechteck.
Ebenso lassen sich Drehungen vornehmen. 

Formen umwandeln

Um Formen einfach umzuwandeln, ziehen Sie eine beliebige Form aus der Bibliothek auf die zu ersetzende Form, bis das schwarze "Umwandeln-Symbol" erscheint. So lassen sich auch mehrere Formen umwandeln, indem Sie die zwei zu ersetzenden Formen auswählen und auf eine von diesen eine beliebige Form ziehen.

Texte in einer Form

Text kann direkt in eine Form eingefügt werden. Dazu klicken Sie die gewünschte Form an und geben Text ein. Text und Form sind dabei immer miteinander verbunden und müssen beispielsweise beim Verschieben nicht einzeln markiert werden. Befindet sich Text in einer Form, so bricht er automatisch um. Im Bedienfeld rechts unter dem Reiter "Text" können Textgröße, Schriftart, Schriftfarbe usw. bearbeitet werden.

Text auf einer Verbindungslinie

Das Gleiche gilt, wenn Sie einer Linie Text hinzufügen. Dazu klicken Sie doppelt auf die entsprechende Linie und geben den gewünschten Text ein. Texte auf Verbindungslinien können auch mehrere Zeilen enthalten. Auch mehrere Texte auf einer Linie sind möglich. Die Textfelder lassen sich dabei an dem gelben Greifer anfassen und auf die gewünschte Position schieben. Das gilt auch für den Fall, wenn Sie Text über der Linie positionieren möchten. 

Freitext

Text kann auch ganz frei (ohne Form oder Linie) auf der Fläche platziert werden. Dazu klicken Sie doppelt auf eine freie Fläche oder fügen "Text" aus der Bibliothek ein. 

Formen mit Linien/Pfeilen verbinden

Wenn Sie mit der Maus über eine Form fahren (ohne darauf zu klicken), so erscheinen mehrere kleine Kreuze (Verbindungspunkte) und vier blaue Pfeile (Verbindungspfeile). Dabei sollten Sie darauf achten, dass die Form beim Darüberfahren nicht ausgewählt ist, sonst erscheinen nur die blauen Verbindungspfeile. Eine Verbindungslinie kann entweder aus einem der kleinen Kreuze oder aus einem der blauen Pfeile herausgezogen werden. Sobald Sie über einen Verbindungspunkt fahren, wird dieser grün hervorgehoben und Sie wissen somit, dass Sie ihn getroffen haben. 

Verbindungslinien aus der Bibliothek

Um einen Konnektor aus der Symbolbibliothek einzufügen, klicken Sie auf die Verbindung, die Sie verwenden möchten, und ziehen Sie sie dann aus der Bibliothek an die gewünschte Stelle im Zeichenbereich. Sie können dann die Enden der Anschlüsse mit den Verbindungspunkten eines der Objekte in Ihrem Diagramm verbinden.

Duplizieren und verbinden

• Klicken Sie beim unteren Rechteck einfach nur auf den blauen Pfeil, dadurch wird die Form samt Inhalt (Farbe und Form) dupliziert und direkt mit einer Linie verbunden.
• Klicken Sie auf den blauen Pfeil einer Form und eine andere liegt in unmittelbarer Nähe, so wird nur eine Verbindungslinie zu der benachbarten Form erstellt.
• Standardmäßig ist ein Linienende mit einem Pfeil versehen, dieser kann im Bedienfeld rechts verändert oder entfernt werden.

Es gibt mehrere Möglichkeiten, Formen zu duplizieren und mit Konnektoren zu arbeiten.

Speicherverhalten (Änderungshistorie)

Änderungen am Diagramm werden durch das Speichern direkt in Confluence in der Revisions-Historie aufgenommen.

Hier werden Informationen über Änderungszeit sowie über den betreffenden Bearbeiter angezeigt.
Zudem können Sie hier einen beliebigen Stand eines Diagramms wiederherstellen.

Import & Export von Diagrammen

Über Datei > Importieren.../Exportieren... können Sie Ihre erstellten Diagramme von folgenden bzw. in folgende Dateiformate im- bzw. exportieren.

Sie wollen alle Gliffy-Diagramme in draw.io importieren? Die Massenimport-Funktion von draw.io macht es möglich.