Handbuch draw.io
draw.io ist ein Werkzeug zur flexiblen und leichtgewichtigen Erzeugung von Diagrammen. Dabei kann auf bestehende Grafik-Objekte (Shapes genannt) unterschiedlicher Notationen (z.B. UML oder BPMN) zurückgegriffen werden. Grafik-Objekte sind in Bibliotheken zusammengefasst. Bibliotheken können im linken Bereich unten unter + Mehr Shapes hinzugeladen und dann verwendet werden.
1. Einrichtung von draw.io
draw.io kann auf vielfältige Weise verwendet werden. Ohne Installation kann die Browser-Variante direkt aufgerufen werden. Für zahlreiche Betriebssystem-Plattformen stehen außerdem Installationspakete bereit. Darüber hinaus gibt es Unterstützung für weit verbreitete IDEs, beispielsweise für IntelliJ IDEA, allerdings ohne Konfigurationsmöglichkeit, oder Visual Studio Code.
| Tool | Bibliothek einbinden | Konfiguration einbinden |
|---|---|---|
draw.io (Web) |
||
draw.io (Standalone) |
||
Visual Studio Code (Plugin) |
||
IntelliJ IDEA (Plugin) |
1.1. IsyFact-Bibliothek einbinden
Die IsyFact stellt eine eigene Bibliothek bereit. Diese enthält u.a. Grafik-Objekte in Anlehnung an die Systemspezifikation-, Systementwurf- und Referenzarchitektur-Diagramme der IsyFact.
Bibliothek |
Die Bibliothek stellt eine Empfehlung für Nutzer der IsyFact dar. Sie wird intensiv zur Dokumentation der IsyFact verwendet.
1.1.1. Einbindung in draw.io
Über das Menü kann die Bibliothek eingebunden werden.
| In der Web-Version wird die Bibliothek am besten über ihre URL eingebunden. Die URL kann über den Download-Link in der Tabelle Download-Optionen der Bibliothek bezogen werden. Dazu genügt ein Rechtsklick auf den Download-Link und das Kopieren des Links. |
1.1.2. Einbindung in Visual Studio Code
In der Visual Studio Code Extension muss die Bibliothek manuell konfiguriert werden.
{
"hediet.vscode-drawio.customLibraries": [
{
"file": "<Dateipfad>/IsyFact.drawiolib.xml",
"libName": "IsyFact",
"entryId": "IsyFact"
}
]
}1.2. IsyFact-Konfiguration einbinden
Mit einer draw.io-Konfigurationsdatei können darüber hinaus u.a. Farbpaletten mit vordefinierten Werten belegt oder Standards für Verbinder gesetzt werden.
Konfiguration (draw.io) |
|
Konfiguration (Visual Studio Code) |
Diese enthält u.a. Farbvorgaben in Anlehnung an die Systemspezifikation-, Systementwurf- und Referenzarchitektur-Diagramme der IsyFact.
1.2.2. Einbindung in Visual Studio Code
Im Fall der Visual Studio Code Extension wird eine angepasste Extension-Konfiguration benötigt. Die Extension-Konfiguration im JSON-Format muss manuell in die Konfiguration von Visual Studio Code kopiert werden.
2. Arbeiten mit draw.io
Die folgenden Abschnitte geben Hinweise und Tipps, um die Arbeit mit draw.io zu erleichtern.
2.1. Auswahl des Speicherformats
draw.io speichert in manchen Formaten ein Modell des Diagramms. Dies hilft dabei, ein Diagramm später direkt aus dem Bild heraus weiter bearbeiten zu können.
| Für Online-Dokumentationen wird das Format Editierbares Vektor-Bild (.svg) empfohlen. Für PDF-Dokumentationen wird das Format Editierbares Bitmap-Bild (.png) empfohlen, da PDF-Viewer meist eingeschränkte Unterstützung für Vektorgrafiken bieten. |
2.2. Adaptive Farben
draw.io bietet die Möglichkeit, für Diagrammelemente sogenannte "adaptive Farben" zu verwenden. Diese passen sich automatisch an die Einstellung des Viewers an, um eine gute Lesbarkeit zu gewährleisten. Im Allgemeinen ist das Feature auch als "Dark Mode Support" bekannt.
Soll ein Diagramm adaptive Farben nicht unterstützen, so ist das Feature für das gesamte Diagramm zu deaktivieren. Dazu ist in der rechten Sidebar der Tab Style auszuwählen und dort die Option Adaptive Farben entsprechend auf "Ohne" zu setzen.
Für eine dauerhafte Deaktivierung von adaptiven Farben in draw.io kann der folgende Eintrag der globalen Konfiguration unter hinzugefügt werden.
{
"defaultAdaptiveColors": "none"
}Der Effekt dieser Einstellung ist in obiger Abbildung anhand des Wertes "Vorgegeben (Ohne)" zu sehen.