Bildbearbeitung kann man längst im Web betreiben und auch Diagramme fabriziert man im Netz. Zum Beispiel mit Draw.io. Für eine kleine Grafik zwischendurch muss man sich noch nicht einmal anmelden.
Wobei es etwas zu weit gefasst ist, wenn man Draw.io als Spezialist für Diagramme beschreibt. Man fabriziert mit dieser Software typischerweise Flussdiagramme, Organigramme und ähnliches: Also Grafiken, die vor allem aus Kästchen bestehen, in denen es Text hat und die durch Linien verbunden sind.
Schnell Kästchen zeichnen
Von einer solchen Software erwartet man, dass sich Kästchen leicht und schnell zeichnen, mit Text füllen und einfärben lassen. Die Kästchen sollen sich leicht mit Linien bzw. Pfeilen verbinden lassen. Und die Verbindungen müssen dynamisch sein, d.h. automatisch nachgeführt werden, wenn man ein Kästchen verschiebt. Praktisch ist eine Bibliothek mit vielen Formen. Man möchte dort auch die für Flussdiagramme typischen Elemente wie Rhombus, Parallelogramm, Die haben nämlich bestimmte Bedeutungen wie Verzweigung und Input/Output. Naja, zumindest dann, wenn man sie streng nach Lehrbuch benutzt. Ich bin in solchen Fällen fürs Improvisieren.
Ja, und nett ist auch, wenn man mit Stilen arbeiten kann, sodass die Formatierungen auch einigermassen konsistent eingesetzt werden. Und ich finde Anpassungsmöglichkeiten für die Verbindungslinien wichtig. Sind die, wenn zwei Elemente nicht direkt unter- bzw. nebeneinander stehen, dann trotzdem senkrecht bzw. waagrecht, und wird der Versatz mit einem Winkel ausgeglichen? Oder kann man auch Schrägen oder Rundungen haben, den Ansatzpunkt versetzen oder zumindest die Winkel abrunden?
Diese Dinge beherrscht Draw.io. Der Grafikdienst hilft auch beim Ausrichten von Elementen durch dynamische Hilfslinien (die erscheinen dann, wenn Ränder bzw. Mittelpunkte bündig ausgerichtet sind). Was ich vermisse, ist eine schöne Verteilungsfunktion. Es gibt zwar den Befehl Arrange > Distribute mit den Unterbefehlen Horizontal und Vertical, aber die machen IMHO seltsame Dinge. Aber man kann sein Werk am Ende in ein Standardlayout überführen. Dazu dient der Befehl Arrange > Layout mit Optionen wie Horizontal Flow, Vertical Tree, Organic oder Circle. Mit denen sollte etwas herauskommen, das einigermassen gut ausschaut.
Und: Draw.io hält viele Vorlagen bereit. Da die Software normalerweise mit einem leeren Blatt startet, bekommt man die via File > New zu Gesicht. Man kann hier aus zwölf Kategorien und so ungefähr hundert Vorlagen wählen. Auch Mindmaps, Rack-Anordnungen, Designs von Leiterplatten, Mockups und Venn-Diagramme gehören zum Angebot.
Eine schlaue Speichermethode
Die, wenn man so sagen kann, technische Spezialität dieses Dienstes ist, dass er keinen Speicherplatz zur Verfügung stellt, sondern Diagramme bei Drittdiensten speichert: Bei Google Drive, Github, Dropbox, Onedrive oder lokal, als Datei auf der Festplatte oder im Browser. Das ist ein Konzept, das ich so noch nie gesehen habe, das mir aber einleuchtet: Man muss als Dienstanbieter keine Serverinfrastruktur aufbauen oder mieten, um die Kundendaten zu verwalten, sondern braucht nur Kapazität zum Betrieb der Webanwendung selbst. Das dürfte die Anforderungen markant reduzieren und auch die Betriebskosten senken. Natürlich erhöht es auch das Ausfallrisiko, da man, zumindest wenn man bei Google Drive, Dropbox oder Onedrive speichert, von zwei Webdiensten abhängig ist. Andererseits kann man als Nutzer frei wählen, ob man der Cloud vertraut oder lieber auf seine eigene Festplatte. Das ist eine Wahlfreiheit, die man als Nutzer nur selten bekommt.
Ich habe Draw.io für ein kleines Projekt ausprobiert, nämlich für das animierte Flussdiagramm in diesem Video hier. Ich fand den Dienst brauchbar, habe meinen ersten Entwurf dann aber in Illustrator zu Ende geführt. Das lag daran, dass die Desktop-Software einen deutlichen Tick effizienter arbeitet. Die Kontrolle der Schrift, das Verteilen und Ausrichten der Elemente und insbesondere der Export der einzelnen Elemente als PNG ist mit Illustrator komfortabler und präziser möglich.
Adobes Vektorprogramm ist hervorragend gerüstet, um Elemente sauber untereinanderzustellen. Und es verteilt Abstände zwischen Elementen per Mausklick gleichmässig. Das macht es einfacher, die Grafik am Schluss so in der Breite oder Länge zu stauchen oder auseinanderzuziehen, dass es gut aussieht bzw. der zur Verfügung stehende Platz schön gefüllt wird.
Tempo vor Schönheit
Bei meinem kleinen Videoprojekt kam noch eine elaborierte Sortierungs- und Gliederungsanforderung hinzu. Ich habe die einzelnen Bestandteile des Flussdiagramms in Final Cut übereinander gestapelt, um sie nacheinander einzeln animiert einblenden zu können. Das geht am einfachsten, wenn man alle Formen und Textelemente, die in einem Rutsch eingeblendet werden sollen, auf eine Ebene legt und dann Ebene für Ebene separat als PNG-Datei wegspeichert. Aber zugegeben – das ist eine spezielle Anforderung, für die ein einfaches Webtool nicht gerüstet sein muss.
Somit lautet das Fazit: Wenn Tempo vor Schönheit geht, dann ist Draw.io allemal eine gute Wahl. Sollte man ein gesteigertes Interesse an typografischen Feinheiten und gestalterischer Rafinesse haben, dann ist ein Desktop-Programm wie Illustrator nach wie vor die bessere Wahl. Man kann aus Draw.io auch Vektorformate exportieren (PDF und SVG), aber die Nachbearbeitung in einem anderen Programm ist wie in solchen Fällen üblich kein besonderer Spass. Das liegt am Aufbau der Elemente. Ein in Draw.io gezeichnetes Textrechteck besteht in Illustrator aus zwei Elementen, nämlich dem Rahmen mit Kontur und Füllfläche und dem Text. Somit kann man es nicht einfach in der Grösse ändern, ohne den Text manuell zentrieren und allenfalls skalieren und umbrechen zu müssen. Und selbst wenn man es nur verschieben möchte, muss man aufpassen, beide Teile zu erwischen. Das ist aber typisch für Vektorgrafiken. Bei denen sollte man schon am Anfang genau wissen, was man will, und das passende Softwarewerkzeug wählen.