{"id":22929,"date":"2025-11-01T01:09:54","date_gmt":"2025-11-01T00:09:54","guid":{"rendered":"http:\/\/blog.wenzlaff.de\/?p=22929"},"modified":"2025-11-01T19:48:50","modified_gmt":"2025-11-01T18:48:50","slug":"git-graphen-visuell-ansprechend-darstellen-mit-bit-booster","status":"publish","type":"post","link":"http:\/\/blog.wenzlaff.de\/?p=22929","title":{"rendered":"Git-Graphen visuell ansprechend darstellen mit Bit-Booster"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2025\/11\/git-bild.jpg\" alt=\"\" width=\"1024\" height=\"1024\" \/><\/p>\n<p>Die Visualisierung von Git-Historien stellt Entwicklungsteams oft vor Herausforderungen. W\u00e4hrend IDEs und GitLab integrierte Graph-Ansichten bieten, fehlt es h\u00e4ufig an Flexibilit\u00e4t f\u00fcr Pr\u00e4sentationen oder Dokumentationen. Das Bit-Booster Offline Commit Graph Drawing Tool schlie\u00dft diese L\u00fccke elegant.<!--more--><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2025\/10\/git-graph.jpg\" alt=\"\" width=\"2044\" height=\"772\" class=\"aligncenter size-full wp-image-22932\" srcset=\"http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2025\/10\/git-graph.jpg 2044w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2025\/10\/git-graph-300x113.jpg 300w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2025\/10\/git-graph-1024x387.jpg 1024w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2025\/10\/git-graph-768x290.jpg 768w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2025\/10\/git-graph-1536x580.jpg 1536w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/p>\n<p>Bit-Booster transformiert die textuelle Ausgabe von Git-Log-Befehlen in visuell ansprechende Commit-Graphen. Das Tool arbeitet vollst\u00e4ndig offline und ben\u00f6tigt lediglich die strukturierte Ausgabe eines Git-Befehls.<\/p>\n<p>Der zentrale Befehl extrahiert die relevanten Commit-Informationen in einem strukturierten Format:<\/p>\n<pre class=\"lang:default decode:true \" >git log --all --date-order --pretty=\"%h|%p|%d\"<\/pre>\n<p>Die Optionen im Detail:<br \/>\n&#8211; `&#8211;all` inkludiert s\u00e4mtliche Branches und Tags<br \/>\n&#8211; `&#8211;date-order` sortiert Commits chronologisch nach Autor-Datum<br \/>\n&#8211; `&#8211;pretty=&#8220;%h|%p|%d&#8220;` formatiert die Ausgabe mit Pipe-Separatoren f\u00fcr Hash, Parent-Hashes und Ref-Namen<\/p>\n<p>Der Prozess zur Erstellung gliedert sich in drei Schritte:<\/p>\n<p>1. F\u00fchren Sie den Git-Log-Befehl in Ihrem Repository-Verzeichnis aus<br \/>\n2. Kopieren Sie die gesamte Terminal-Ausgabe<br \/>\n3. F\u00fcgen Sie den Text in das Eingabefeld des Bit-Booster-Tools ein<\/p>\n<p>Das Tool generiert automatisch eine grafische Darstellung mit farblich differenzierten Branches, Merge-Punkten und aussagekr\u00e4ftigen Ref-Labels.<\/p>\n<p>F\u00fcr spezifische Anwendungsf\u00e4lle l\u00e4sst sich der Basis-Befehl erweitern, so das auch Kommentare angezeigt werden.<br \/>\nEinfach alles in eine Datei schreiben und auf der Webseite <a href=\"https:\/\/bit-booster.com\/graph.html\" target=\"_blank\">https:\/\/bit-booster.com\/graph.html<\/a> eingeben, dann auf &#8222;Draw Commit Graph&#8220; klicken. Schon kann das Bild als svg geladen werden.<\/p>\n<pre class=\"lang:default decode:true \" >\r\n\r\ngit log --all --date-order --pretty=\"%h|%p|%d %s\" &gt; history.txt\r\n\r\n<\/pre>\n<p>Beispiel:<\/p>\n<pre class=\"nums:false nums-toggle:false minimize:true lang:default decode:true \" >04a059c|7acf0cb 6cf38cb| (HEAD -&gt; main, origin\/main, origin\/HEAD) Merge branch 'main' of https:\/\/gitlab.com\/IT-Berater\/twrente.git into main\r\n7acf0cb|acbab4e| format\r\nacbab4e|6c1baac| junit api entf.\r\n6cf38cb|6c1baac| README.md bearbeiten\r\n6c1baac|a39768c| (tag: v1.2.5) Ver. 1.2.5: Nicht mehr als 300 Events\/Termine in einer Datei.\r\na39768c|c6e6dea| Nicht mehr als 300 Events\/Termine in einer Datei.\r\nc6e6dea|5e4a9ff| (tag: v1.2.4) 1.2.4 Fix und Refactor.\r\n5e4a9ff|0ff8776| (tag: v1.2.3) Ersetze `new Locale(\"ru\")` durch `Locale.of(\"ru\")` (Java 19+)\r\n0ff8776|41ed003| 1.2.3\r\n41ed003|4eb0b09| Javadoc\r\n4eb0b09|a89725b| Ref. in neue Sprachen Klasse, rename prop\r\na89725b|7ddf6d4| (tag: v1.2.2) Neue Version mit 18 Sprachen\r\n7ddf6d4|44f5c88| 6 Sprachen erg.\r\n44f5c88|67bd46f| 6 Sprachen erg\u00e4nzt\r\n67bd46f|7f0db31| Javadoc erg.\r\n7f0db31|30fb15b| Bild v1.2.1\r\n30fb15b|39e6795| SuppressWarnings\r\n39e6795|c3e550d| Doc\r\nc3e550d|3d7c404| GenerateEventAction in eigene Klasse\r\n3d7c404|ae100be| Doc\r\nae100be|59f658d| Kleines Icon erg.\r\n59f658d|fba9cc0| Erw. bei fehlenden Prop. Exc. gefangen.\r\nfba9cc0|9b00821| Java 21 Modul erstellt, Kalender verschoben, Gui Ref.\r\n9b00821|913cade| (tag: v1.20) Nun mit Men\u00fc und 12 Sprachen\r\n913cade|2f5615e| Sprachen \u00fcbersetzt\r\n2f5615e|8990250| Gr und Heb.\r\n8990250|dac7582| Hindi und Arabisch erg.\r\ndac7582|bfcc34a| Exit Button gel\u00f6scht\r\nbfcc34a|066a21a| 8 Sprachen mit neuem Men\u00fc\r\n066a21a|96f8ddf| \u00dcbersetzungen erg\u00e4nzt\r\n96f8ddf|01f0040| Alles auf englisch, auch Save Dialog\r\n01f0040|9effc6c| Fix falschen Dateinamen, de\r\n9effc6c|8cc4ead| Gui engl. schon mal ok\r\n8cc4ead|4a2735b| Englisch vorbereitet\r\n4a2735b|ada8920| (tag: v1.1.4) Neuen Hyperlink f\u00fcr Info auf Webseite\r\nada8920|a1f063d| Ref. rename\r\na1f063d|08c0911| Bilder 1.1.4\r\n08c0911|8aacf63| Ref. rename GenerateEventAction\r\n8aacf63|4f16f7e| Ref. ActionListenerImplementation erst.\r\n4f16f7e|37d383c| Add Checkbox optimiert\r\n37d383c|34b9267| Neuen JUnit Test\r\n34b9267|1de4f87| Fix Javadoc\r\n1de4f87|5eadf0f| Neue JUnit Test testGenerateICSFileZweiTag\r\n5eadf0f|8098228| JUnit Test f\u00fcr Wochentage angepasst\r\n8098228|46c1a0a| Locale auf DE\r\n46c1a0a|c373afe| Frame zentrieren\r\nc373afe|3c9959b| Ref. eigene Main\r\n3c9959b|bdcd084| Mit Wochentag Checkbox\r\nbdcd084|e2b8c44| 1.1.3 Gui kleiner\r\ne2b8c44|9b8cd9d| Bild mit h\u00f6herer Aufl\u00f6sung\r\n9b8cd9d|8ce82ee ec3196f| Merge branch 'main' of https:\/\/gitlab.com\/IT-Berater\/twrente\r\nec3196f|7076cd1| LICENSE bearbeiten\r\n7076cd1|9ae0001| Neue Datei hinzuf\u00fcgen\r\n8ce82ee|f81187c| 10 Pixel linker Rand f\u00fcr Label\r\nf81187c|c1fbf46| clean\r\nc1fbf46|f23fefe| File Filter um ical erg.\r\nf23fefe|8032aaf| eine weltweit eindeutige PRODID erg.\r\n8032aaf|cb3d7e5| Bild\r\ncb3d7e5|9ae0001| Neuer Ablauf mit Save Dialog\r\n9ae0001|c13ea24| (tag: v1.1.2) Readme erg.\r\nc13ea24|951f6bd| Ablauf erg.\r\n951f6bd|1f10bad| Bild in Readme und Link angp.\r\n1f10bad|10ce09e| Readme erg.\r\n10ce09e|0db8231| Java Doc, und vorbereitet f\u00fcr n\u00e4chste Maven Version\r\n0db8231|2496f27| Speichern Text angepasst\r\n2496f27|789a29b| Mit File Save Dialog\r\n789a29b|0571ac1| (tag: v1.1.1-Release) v1.1.1\r\n0571ac1|d897d64 5cdd4ef| Merge branch 'main' of https:\/\/gitlab.com\/IT-Berater\/twrente\r\n5cdd4ef|17f4494| Datei .gitlab-ci.yml aktualisieren\r\nd897d64|640bfe0 17f4494| Merge branch 'main' of https:\/\/gitlab.com\/IT-Berater\/twrente\r\n17f4494|112fcba| Datei .gitlab-ci.yml aktualisieren\r\n112fcba|154d9c3| maven:3.9.9-eclipse-temurin-21\r\n154d9c3|6b0a89a| Datei .gitlab-ci.yml aktualisieren\r\n6b0a89a|643370e| Datei .gitlab-ci.yml aktualisieren\r\n640bfe0|5690d0f 643370e| Merge branch 'main' of https:\/\/gitlab.com\/IT-Berater\/twrente\r\n643370e|c252645| Pipeline erg.\r\n5690d0f|c252645| Mit Von Datum f\u00fcr Ereignis\r\nc252645|b708284| (tag: v1.1.1) 1.1.0 Ereignis nun frei bearbeitbar,\r\nb708284|7d16337| Neues Eingabe Feld f\u00fcr die Ereignisse\r\n7d16337|689b541| Ablauf Diagramm erstellt\r\n689b541|2c23229| Fix JUnit Test\r\n2c23229|15b93b6| Fix, nun als ganzt\u00e4giges Ereignis\r\n15b93b6|5b841d5| 1.0.0 nach Maven Central ver\u00f6ffentlicht\r\n5b841d5|bb85695| Finale 1.0.0\r\nbb85695|deb36f1| 5. Prompt, erzeuge JUnit Testklasse\r\ndeb36f1|2434716| 4. Prompt mit Exit Button\r\n2434716|e28b36c| 3. Prompt, funktion schon mal ok.\r\ne28b36c|cbbe150| (tag: v0.0.1) Bild erg.\r\ncbbe150|2685488| Erste Version\r\n2685488|| Initial commit<\/pre>\n<p>Ergibt (Auszug):<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2025\/10\/git-graph.jpg\" alt=\"\" width=\"2044\" height=\"772\" class=\"aligncenter size-full wp-image-22932\" srcset=\"http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2025\/10\/git-graph.jpg 2044w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2025\/10\/git-graph-300x113.jpg 300w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2025\/10\/git-graph-1024x387.jpg 1024w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2025\/10\/git-graph-768x290.jpg 768w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2025\/10\/git-graph-1536x580.jpg 1536w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/p>\n<p>Die generierten Graphen eignen sich hervorragend f\u00fcr:<br \/>\n&#8211; Architektur-Dokumentationen zur Veranschaulichung von Branching-Strategien<br \/>\n&#8211; Pr\u00e4sentationen \u00fcber Git-Workflows und Best Practices<br \/>\n&#8211; Schulungsmaterialien f\u00fcr Teams<br \/>\n&#8211; Retrospektiven zur Visualisierung von Release-Zyklen<\/p>\n<p>Das Tool bew\u00e4hrt sich besonders bei der Demonstration von Merge-Strategien. Entwicklungsteams k\u00f6nnen verschiedene Ans\u00e4tze wie Fast-Forward, No-Fast-Forward oder Rebase visuell vergleichen. F\u00fcr Code-Reviews erm\u00f6glicht die Darstellung ein schnelles Verst\u00e4ndnis von Feature-Branch-Integrationen.<\/p>\n<p>F\u00fcr aussagekr\u00e4ftige Visualisierungen empfiehlt sich eine konsistente Naming-Convention f\u00fcr Branches. Tags sollten semantisch versioniert sein und wichtige Meilensteine markieren. Bei umfangreichen Repositories kann eine zeitliche oder thematische Filterung die \u00dcbersichtlichkeit erheblich steigern.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die Visualisierung von Git-Historien stellt Entwicklungsteams oft vor Herausforderungen. W\u00e4hrend IDEs und GitLab integrierte Graph-Ansichten bieten, fehlt es h\u00e4ufig an Flexibilit\u00e4t f\u00fcr Pr\u00e4sentationen oder Dokumentationen. Das Bit-Booster Offline Commit Graph Drawing Tool schlie\u00dft diese L\u00fccke elegant.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[220,4176,7],"tags":[552,6246,325,6249,6248,6250,6247],"class_list":["post-22929","post","type-post","status-publish","format-standard","hentry","category-anleitung","category-git","category-tools","tag-bilder","tag-bit-booster","tag-git","tag-git-bilder","tag-git-graph","tag-git-graphen","tag-svg"],"_links":{"self":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts\/22929","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=22929"}],"version-history":[{"count":0,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts\/22929\/revisions"}],"wp:attachment":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=22929"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=22929"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=22929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}