Bilder sagen mehr als Worte – eine alte Weisheit, deren Gültigkeit niemand anzweifelt. Das gilt im Übrigen auch (o Wunder!) im Bereich Softwareentwicklung. Denn obschon Code für Menschen, die sich mit Programmierung so überhaupt nicht auskennen, oft ein Gewirr aus Buchstaben, Zahlen und kryptischen Zeichen ist, liegen ihm doch immer Logik, Struktur und ein Ziel zugrunde. Und all das lässt sich visualisieren – beispielsweise mit Diagrammen.

Diagramme in der Softwareentwicklung nutzen

Es gibt verschiedene Möglichkeiten, Diagramme in der Softwareentwicklung einzusetzen. Eine davon ist Gitflow: Dieses Modell bietet sich insbesondere für Projekte an, die definierte Release-Zyklen beinhalten, da Gitflow sich auf einen Feature-Zweig konzentriert und diesen erst dann wieder an den Hauptzweig (Master Branch) ankoppelt, wenn das Feature komplett ist.

Gitflow-Diagramme können ein wertvolles Tool sein, wenn es darum geht, Entwicklungsschritte zu koordinieren und dabei sicherzustellen, dass Code richtig organisiert und gepflegt wird. Außerdem kannst du ein solches Diagramm auch heranziehen, um neuen Teammitgliedern das Verzweigungsmodell (Branching Model), das in einem bestimmten Projekt verwendet wird, schnell zu erklären.

Wenn dein Team Confluence nutzt, bietet der draw.io Whiteboard-Editor eine einfache Möglichkeit, um ein Gitflow-Diagramm direkt in deiner Projektseite zu erstellen. In diesem Beitrag zeigen wir dir, wie das funktioniert. Oder liebst du die Herausforderung und möchtest direkt zur Tat schreiten? Dann kannst du draw.io via Atlassian-Marketplace kostenfrei testen.

Der Whiteboard-Editor von draw.io

Das Whiteboard-Makro von draw.io verwendet unseren intuitiven Drag-and-Drop Diagrammersteller mit einem vereinfachten Editor – so hast du mehr Platz, um deine Ideen großzügig zu skizzieren. Wie du loslegen kannst? Ganz simpel: Wenn du draw.io installiert hast, öffne schlicht eine Confluence-Seite und füge das “draw.io Board” Makro mit einem Klick ein.

Arbeiten mit einer Vorlage

Wie du im weiteren Verlauf vorgehst hängt davon ab, welcher Diagramm-Typ du bist. Bist du der Typ, der es hilfreich findet, ein Gitflow-Diagramm “from scratch” zu erstellen? Kein Problem!
Oder greifst du lieber auf Vorlagen zurück, um nicht so viel Zeit auf Vorüberlegungen zu verschwenden? Auch dann kann dir geholfen werden – denn draw.io bietet eine fertige Gitflow-Vorlage an. Dafür klickst du auf das umrahmte Pluszeichen im linken Menü und dann auf “Template”.

Das bringt dich in die Vorlagen-Bibliotohek. Dort wählst du die Kategorie “Software” aus, scrollst nach unten, bis du die Gitflow-Vorlage findest, und anschließend auf “Einfügen”. Jetzt kannst du das Diagramm nach Herzenslust bearbeiten: Knoten hinzufügen oder entfernen, die Beschriftungen bearbeiten, Farben zuordnen usw.

Übrigens: Dein Gitflow-Diagramm von Grund auf neu zu erstellen kann nahezu genauso schnell gehen wie das Ändern der Vorlage. Wie schon gesagt: Typsache!

So legst du den Master Branch in deinem Gitflow-Diagramm an

In einem Gitflow-Diagramm ist der Master Branch der Hauptzweig, in dem die offizielle Versionsgeschichte aufgezeichnet wird. Als Ausgangspunkt deines Zweigs kannst du einfach eine Kreisform auf dem Board einfügen, entweder über das “Formen”-Auswahlfeld (Kreisform anklicken und auf das Board ziehen) oder indem du die F-Taste drückst. Jeder Kreis in diesem Zweig steht für eine andere Produktionsversion deines Projekts.

Die Größe des Kreises kannst du mit den Ziehpunkten des Begrenzungsrahmens ändern und strecken und die Farbe und den Linienstil mithilfe des Formatmenüs auf der rechten Seite anpassen. Wenn dein Kreis so aussieht, wie du ihn haben wolltest, klicke im Formatmenü auf die Option “Als Standardstil festlegen”. Dadurch wird derselbe Stil auf alle anderen Formen angewendet, die du dem Board hinzufügst. Mit einem Doppelklick auf den Kreis kannst du ihn mit der korrekten Versionsnummer beschriften.

Um den nächsten Knoten für die Produktionsversion hinzuzufügen, klicke auf den ersten Kreis und wähle die Pfeile außerhalb des Begrenzungsrahmens aus. Nun kannst du entweder klicken und ziehen, um einen Pfeil zu erstellen, der in einem anderen Kreis endet, oder du klickst auf den Pfeil und wählst die gewünschte Form, in diesem Fall einen Kreis.

Genau wie die Kreise kannst du auch die Linien zwischen den Knoten gestalten: Ändere Farben oder Konturen ganz nach deinen Wünschen, und die Formatierung wird automatisch auf die nächste von dir erstellte Linie angewendet.

Diesen Vorgang kannst du für so viele Knotenpunkte wie nötig wiederholen und die Beschriftungen nach und nach aktualisieren. Wenn du deinem Diagramm eine Legende hinzufügen möchtest, kannst du deinen Master Branch abschließen, indem du statt eines Kreises eine quadratische Form wählst und diese mit "Master Branch" beschriftest.

Projekt-, Feature- und Entwicklungszweige im Gitflow-Diagramm hinzufügen

Je nachdem, wie umfangreich dein Diagramm ist, könnte dein nächster Zweig ein Projekt, ein Feature oder die Entwicklung von Pre-Production Code sein.

Und so erstellst du einen zweiten Zweig: Kopiere einen der Kreise aus dem Hauptzweig und füge ihn ein. Ändere dann die Farbe und vergiss nicht, das wiederum als “Standardstil” zu definieren. Verwende die blauen Pfeile, um so viele Knoten zu klonen, wie du für diesen Zweig benötigst, und schließe mit einer quadratischen Form ab, um den Zweig zu kennzeichnen.

Eine Alternative – Typsache! – ist, den gesamten ersten Zweig zu kopieren, einzufügen und dann bei allen ausgewählten Knoten die Farbe zu ändern. Wenn du die Abstände zwischen den Knoten ändern möchtest, klicke einfach auf die Knoten und ziehe sie in die richtige Position, damit sich die Linien automatisch anpassen. Füge weitere Knoten hinzu und aktualisiere abschließend deine Beschriftungen.

Für alle weiteren Features, Hotfixes und benötigte Vorgänge wiederholst du das Ganze einfach so oft, bis du alle Zweige erstellt hast.

So verbindest du die Zweige

In einem Gitflow-Diagramm bilden die Verbindungen zwischen den Zweigen die Abfolge der Änderungen zwischen ihnen ab und zeigen an, welche Änderungen in welchen Zweigen zusammengeführt oder integriert wurden. Diese Verbindungen helfen dabei, die Beziehung zwischen verschiedenen Zweigen zu visualisieren – und unterstützen dein Team entsprechend dabei, die Gesamtentwicklung der Code-Basis zu verstehen.

Wenn du die Zweige in deinem Diagramm folgerichtig verbinden möchtest, bewege den Mauszeiger über einen Kreis und wähle dort einen der Ankerpunkte an dessen Rand aus. Klicke und ziehe von dort zum Zielkreis. Du kannst die Verbindungslinie und auch die Kurve der Linie nach Gusto gestalten und ändern, indem du auf sie klickst und den blauen Ankerpunkt ziehst.

Bibliotheken verwenden

draw.io's Board-Editor ist mit einem schlanken Satz von Formen und Werkzeugen ausgestattet. Du brauchst aber noch ein ganz bestimmtes Icon oder Bild? Kein Problem: Hinter dem Pluszeichen im Menü auf der linken Seite findest du hinter dem Befehl “Shapes” eine größere Bibliothek, die keine Wünschen offen lässt. Nutze die Suchleiste, um die gewünschte Form oder einen bestimmten Anwendungsfall zu finden, oder lade eigene Bilder hoch.

Klares Diagramm – klarer Code

Mit einem klaren und übersichtlichen Gitflow-Diagramm gewinnen du und dein Team ein tieferes Verständnis für eure Codebasis – für bessere Zusammenarbeit und effektives Projektmanagement. Und das alles in Confluence.
Also, worauf wartest du noch? Buche einfach eine kostenlose und unverbindliche Demo und finde heraus, wie draw.io den Arbeitsalltag einfacher und produktiver machen kann – nicht nur deinen, sondern den deines gesamten Teams.

Mehr über draw.io erfährst du auch auf dem Atlassian Marketplace.

Du suchst nach Tipps und Tricks? Dann schau dir z. B. unsere Tutorials und andere Kurzvideos an – die findest du auf unserem YouTube-Kanal. In unserer One-Stop-Tutorial-Bibliothek sammeln wir zudem interaktive Tutorials und Schritt-für-Schritt-Anleitungen für dich. Und auf unseren Social-Media-Kanälen teilen unsere Kunden immer wieder spannende Anwendungsfälle – schau doch gerne mal vorbei!

Und nun: Happy Diagramming!

 

Weiterführende Infos

Die gläserne Confluence-Seite: Mit draw.io Änderungen und Anpassungen lückenlos nachvollziehen
We 🧡 draw.io #6 – und einzigartige Diagramme bei unseren Kunden!
“I 🧡draw.io” #1: Clevere Flussdiagramme und Prozessdiagramme in Confluence
draw.io für Confluence oder: Wie ein paar Striche, Kreise und Co. deine Teamarbeit verbessern können
Mehr als ein reines Diagramming-Tool: draw.io goes Whiteboard