{"id":3639,"date":"2025-01-09T18:08:28","date_gmt":"2025-01-09T17:08:28","guid":{"rendered":"https:\/\/informatik.htwk-leipzig.de\/seminar\/?p=3639"},"modified":"2025-03-25T00:12:19","modified_gmt":"2025-03-24T23:12:19","slug":"draw-io","status":"publish","type":"post","link":"https:\/\/informatik.htwk-leipzig.de\/seminar\/lehrveranstaltungen\/betriebliche-informationssysteme\/2025\/draw-io\/","title":{"rendered":"draw.io"},"content":{"rendered":"<h2>Einf\u00fchrung<\/h2>\n<p>Draw.io (auch bekannt als diagrams.net) ist eine webbasierte Anwendung, mit der man allein oder im Team diverse Diagramme und Visualisierungen erstellen kann. Sie ist die in diesem Bereich weltweit meistgenutzte browserbasierte Endnutzer-Software.<br \/>\nDie Anwendung kann dabei \u00fcber einen beliebigen Browser laufen oder f\u00fcr den offline-Gebrauch als Desktop-App heruntergeladen werden. Die Nutzung beider Varianten ist kostenlos.<br \/>\nDie haupts\u00e4chlichen Funktionalit\u00e4ten von draw.io sind:<\/p>\n<ul>\n<li>Diagramme\/Visualisierungen erstellen<\/li>\n<li>Zusammenarbeit mit mehreren Nutzern an einem Diagramm<\/li>\n<li>Integration mit Cloud-Diensten<\/li>\n<li>verschiedene Speicher- und Exportformat<\/li>\n<\/ul>\n<p>Draw.io ist ein flexibles und benutzerfreundliches Werkzeug, das sowohl von Anf\u00e4ngern als auch erfahrenen Benutzern genutzt werden kann.<\/p>\n<p>Die genauen Anwendungsm\u00f6glichkeiten von draw.io sind breit gef\u00e4chert. So k\u00f6nnen z.B. auch physikalische Zeichnungen oder auch Grundrisse von Wohnungen erstellt werden. Es gibt eine umfangreiche Seite mit Beispielen und Hilfestellungen zum Umsetzen dieser.<br \/>\nhttps:\/\/www.drawio.com\/example-diagrams<\/p>\n<h2>Funktionen<\/h2>\n<h4>Aufbau<\/h4>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3645 size-large\" title=\"\" src=\"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2025\/01\/Rastergrafik-1024x494.png\" alt=\"\" width=\"910\" height=\"439\" srcset=\"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2025\/01\/Rastergrafik-1024x494.png 1024w, https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2025\/01\/Rastergrafik-300x145.png 300w, https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2025\/01\/Rastergrafik-768x371.png 768w, https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2025\/01\/Rastergrafik-1536x742.png 1536w, https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2025\/01\/Rastergrafik.png 1916w\" sizes=\"auto, (max-width: 910px) 100vw, 910px\" \/><\/p>\n<p style=\"text-align: center\">Abb.: \u201cdraw.io Oberfl\u00e4che\u201d<\/p>\n<p>Die Oberfl\u00e4che von draw.io ist \u00fcbersichtlich und intuitiv gestaltet. An der linken Seite befindet sich eine Navigationsleiste mit einer Bibliothek an Shapes. Oberhalb befindet sich eine Men\u00fcleiste und darunter eine Toolbar. An der rechten Seite gibt es eine Formatleiste, in welcher ausgew\u00e4hlte Objekte angepasst werden k\u00f6nnen. In der Mitte ist die Canvas-Fl\u00e4che, auf welcher gearbeitet wird. Die gesamte Oberfl\u00e4che kann zus\u00e4tzlich zum hellen Design auch in den dunklen Modus umgestellt werden.<\/p>\n<h4>Shapes-Bibliotheken<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-3649 aligncenter\" title=\"\" src=\"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2025\/01\/image-300x227.png\" alt=\"\" width=\"300\" height=\"227\" srcset=\"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2025\/01\/image-300x227.png 300w, https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2025\/01\/image-1024x775.png 1024w, https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2025\/01\/image-768x581.png 768w, https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2025\/01\/image.png 1068w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p style=\"text-align: center\">Abb.: \u201cAusschnitt Shapes-Bibliothek\u201d<\/p>\n<p>Sollten die standardm\u00e4\u00dfig vorhandenen Shapes nicht ausreichen, gibt es umfangreiche Bibliotheken von weiteren Shapes, welche unter anderem auch Komponenten von iOS oder zur Darstellung von SAP-Systemen. Sollten ben\u00f6tigte Shapes dann weiterhin fehlen, k\u00f6nnen dennoch Bilder verwendet werden.<\/p>\n<h4>Sketch Style<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3651 size-large\" title=\"\" src=\"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2025\/01\/sketch-theme-tutorial-1024x551.png\" alt=\"\" width=\"910\" height=\"490\" srcset=\"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2025\/01\/sketch-theme-tutorial-1024x551.png 1024w, https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2025\/01\/sketch-theme-tutorial-300x161.png 300w, https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2025\/01\/sketch-theme-tutorial-768x413.png 768w, https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2025\/01\/sketch-theme-tutorial-1536x826.png 1536w, https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2025\/01\/sketch-theme-tutorial-2048x1102.png 2048w\" sizes=\"auto, (max-width: 910px) 100vw, 910px\" \/><\/p>\n<p style=\"text-align: center\">Abb.: \u201cSketch Oberfl\u00e4che\u201d<\/p>\n<p>Der Sketch Style ist eine kompakte Version von draw.io, welche darauf ausgelegt ist, nur als Whiteboard genutzt zu werden. Diese Variante ist sehr einfach zu nutzen, aber bietet auch wesentlich weniger Umfang als die Standard Variante und ist somit weniger vielseitig.<\/p>\n<h4>Simultan in Echtzeit anwendbar (auch als Whiteboard)<\/h4>\n<p>Die Zusammenarbeit wird erm\u00f6glicht indem ein Diagramm in Google Drive, Microsoft OneDrive, DropBox, oder draw.io in Confluence gespeichert wird. Dann kann mit einem Einladungslink zusammengearbeitet werden. Sobald mehrere Personen an einem Diagramm arbeiten, sind die Cursor der Teilnehmenden auf der Oberfl\u00e4che zu sehen. So l\u00e4sst sich draw.io auch sehr gut als Whiteboard verwenden.<\/p>\n<h4>Sowohl online im Browser als auch gesch\u00fctzt offline in der App verf\u00fcgbar<\/h4>\n<p>Da draw.io als Webapplikation verf\u00fcgbar ist, kann man sie auf den meisten Ger\u00e4ten verwenden. Sollte ein Unternehmen ben\u00f6tigen, dass sensible Dateien nur in einem bestimmten System existieren, kann daf\u00fcr auch die lokale Applikation genutzt werden, die auch auf Linux, Windows und MacOS l\u00e4uft.<\/p>\n<h4>Integrationen (Speicher, Drittanbieter) und Plattformen<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3654 size-large\" title=\"\" src=\"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2025\/01\/integrations-1024x416.png\" alt=\"\" width=\"910\" height=\"370\" srcset=\"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2025\/01\/integrations-1024x416.png 1024w, https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2025\/01\/integrations-300x122.png 300w, https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2025\/01\/integrations-768x312.png 768w, https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2025\/01\/integrations.png 1061w\" sizes=\"auto, (max-width: 910px) 100vw, 910px\" \/><\/p>\n<p style=\"text-align: center\">Abb.: \u201c\u00dcbersicht Integrationen, Speicher und Drittanbieter\u201d<\/p>\n<p>Da es Open Source ist, gibt es einige Integrationen von draw.io. Genauso k\u00f6nnen beispielsweise Google Drive, Dropbox, OneDrive, GitHub, GitLab direkt als Speicher angewendet werden. Draw.io kann plattformunabh\u00e4ngig eingesetzt werden, was an der webbasierten Natur liegt.<\/p>\n<h2><b>Finanzierung und Datenschutz<\/b><\/h2>\n<p>Draw.io ist ein Trademark der JGraph Ltd und draw.io AG. Die Unternehmen besitzen und arbeiten zusammen an der Software und betreiben sie. Draw.io will hochwertige Diagrammsoftware kostenlos f\u00fcr alle bereitstellen.<\/p>\n<p>Das Gesch\u00e4ftsmodell basiert auf der kostenlosen Bereitstellung der Anwendung, mit der Ausnahme von bestimmten draw.io Integrationen wie \u201cAtlassian\u201d. Das bedeutet, Organisationen wie Google oder BMW, welche Atlassian Produkte nutzen, bezahlen draw.io f\u00fcr die Integration von draw.io in diese Plattformen.<\/p>\n<p>Es wird Wert darauf gelegt, den Nutzern stets Zugang zu den Daten zu gew\u00e4hrleisten, ohne diese zu verbergen oder den Zugriff darauf zu beschr\u00e4nken. Au\u00dferdem kann die Software sowohl offline als auch online genutzt werden.<\/p>\n<p>Das ist ein Gegensatz zu anderen Diagramm-Softwares, welche den Zugriff auf Daten abbrechen, sobald das Modell nicht mehr bezahlt wird. Das Vertrauensproblem von anderen Anbietern, das beinhaltet, dass sowohl die Anwendung als auch die Datenspeicherung von einer monatlichen Zahlung abh\u00e4ngen, wird somit von draw.io gel\u00f6st.<\/p>\n<p>Diagrammsoftware ist ein milliardenschwerer Marktbereich, welcher sich aufgrund von fehlender Konkurrenz nicht viel entwickelt hat. Eines der Ziele, draw.io kostenlos zur Verf\u00fcgung zu stellen, ist es, diesen Bereich wettbewerbsf\u00e4higer zu machen.<\/p>\n<h2><b>Alternativen<\/b><\/h2>\n<p>Da die Anwendungsf\u00e4lle von draw.io so weit gef\u00e4chert sind, gibt es eine Vielzahl an Anwendungen, die Alternativen f\u00fcr bestimmte Teilbereiche von draw.io bieten. Viele dieser Anwendungen sind dabei aber auf eine engere Auswahl an Diagramm- oder Visualisierungstypen spezialisiert, wie z.B. Lucidcharts f\u00fcr Diagramme oder Figma f\u00fcr Mockups oder Oberfl\u00e4chengestaltung. Diese Alternativen k\u00f6nnen in ihren gew\u00e4hlten Spezialgebieten teilweise weitergehende Funktionalit\u00e4ten bieten.<\/p>\n<p>Allerdings bieten viele der alternativen Softwarel\u00f6sungen komplexe Kostenmodelle, die meist auf Abonnements basieren, wobei ohne ein abgeschlossenes Abonnement nur eine stark eingeschr\u00e4nkte Version der jeweiligen Anwendung verf\u00fcgbar ist oder zuvor erstellte Diagramme nicht mehr zug\u00e4nglich sind.<\/p>\n<h2><b>Fazit<\/b><\/h2>\n<p>Draw.io ist eine benutzerfreundliche Alternative zu kostenpflichtigen Diagrammsoftwares, die vor allem durch ihre Flexibilit\u00e4t, Datenschutzfreundlichkeit und Kostenfreiheit \u00fcberzeugt. W\u00e4hrend andere Anbieter oft auf kostenpflichtige Abonnements setzen, bietet draw.io auch ohne Einschr\u00e4nkungen Zugang zu Funktionen und erstellten Inhalten. Mit dieser Strategie unterst\u00fctzt die Software nicht nur Einzelanwender, sondern f\u00f6rdert auch den Wettbewerb im Markt der Diagrammtools. Funktionen wie Echtzeit-Zusammenarbeit, umfassende Shapes-Bibliotheken und Integrationen mit Cloud-Diensten wie Google Drive, Dropbox und GitHub machen draw.io dabei vielseitig einsetzbar.<\/p>\n<h2><b>Quellen<\/b><\/h2>\n<p><a href=\"https:\/\/www.drawio.com\/about\">https:\/\/www.drawio.com\/about<\/a><\/p>\n<p><a href=\"https:\/\/www.drawio.com\/integrations\">https:\/\/www.drawio.com\/integrations<\/a><\/p>\n<p><a href=\"https:\/\/www.drawio.com\/blog\/diagram-editor-theme\">https:\/\/www.drawio.com\/blog\/diagram-editor-theme<\/a><\/p>\n<p><a href=\"https:\/\/www.drawio.com\/features\">https:\/\/www.drawio.com\/features<\/a><\/p>\n<p><a href=\"https:\/\/app.diagrams.net\">https:\/\/app.diagrams.net<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Einf\u00fchrung Draw.io (auch bekannt als diagrams.net) ist eine webbasierte Anwendung, mit der man allein oder im Team diverse Diagramme und<\/p>\n","protected":false},"author":185,"featured_media":3666,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-3639","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-betriebliche-informationssysteme"],"_links":{"self":[{"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/posts\/3639","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/users\/185"}],"replies":[{"embeddable":true,"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/comments?post=3639"}],"version-history":[{"count":6,"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/posts\/3639\/revisions"}],"predecessor-version":[{"id":3667,"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/posts\/3639\/revisions\/3667"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/media\/3666"}],"wp:attachment":[{"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/media?parent=3639"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/categories?post=3639"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/tags?post=3639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}