So liest du die Visualisierungen

Jede Visualisierung wird von einem Git-Simulator angetrieben, dessen Ausgabe mit echtem Git geprüft wird. Hier siehst du, was jeder Teil der Bühne bedeutet – und eine Live-Bühne zum Ausprobieren.

Live-Beispiel: git commit

Drücke ▶ und sieh zu, wie eine Datei von deiner Festplatte in den Staging-Bereich und dann in einen Commit wandert. Um eigene Befehle zu tippen, öffne die Spielwiese.

DEINE DATEIEN – EINE DATEI, DREI ORTEArbeitsverz.FestplatteStagingnächster CommitHEADletzter Commitadd ›commit ›GITUALIZEDEIN REPOSITORY – .git auf deinem Laptop2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commitmainmain: ein verschiebbares Label auf einem CommitHEADHEAD → der Branch, auf dem du bistREADME.mdunverändertapp.jsunverändertindex.htmlunverändertv1v1v1v1v1v1v2v2v2HEAD → main → 2e039ac “Add homepage”
0.0s / 66s
CommitRing = der Commit, auf dem HEAD stehtnicht erreichbar (existiert noch)Branch = verschiebbares Labelorigin/* = dein Lesezeichen des RemotesHEAD = wo du gerade bist

1 Deine Dateien – eine Datei, drei Orte

Die Tabelle links verfolgt jede Datei durch die drei Orte, an denen Git sie aufbewahrt. Ein Versionslabel (v1, v2 …) ändert sich, wenn sich der Inhalt ändert, und eine Zelle blinkt, wenn ein Befehl sie berührt.

DEINE DATEIEN – EINE DATEI, DREI ORTEArbeitsverz.FestplatteStagingnächster CommitHEADletzter Commitadd ›commit ›GITUALIZEDEIN REPOSITORY – .git auf deinem Laptop2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commitmainmain: ein verschiebbares Label auf einem CommitHEADHEAD → der Branch, auf dem du bistREADME.mdunverändertapp.jsgestagtindex.htmlgeändertlogin.jsunverfolgtv1v1v1v2v2v1v3v2v2v1——HEAD → main → 2e039ac “Add homepage”

Arbeitsverz.

Die Datei auf deiner Festplatte – das, was dein Editor zeigt. Änderungen landen zuerst hier.

DEINE DATEIEN – EINE DATEI, DREI ORTEArbeitsverz.FestplatteStagingnächster CommitHEADletzter Commitadd ›commit ›GITUALIZEDEIN REPOSITORY – .git auf deinem Laptop2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commitmainmain: ein verschiebbares Label auf einem CommitHEADHEAD → der Branch, auf dem du bistREADME.mdunverändertapp.jsgestagtindex.htmlgeändertlogin.jsunverfolgtv1v1v1v2v2v1v3v2v2v1——HEAD → main → 2e039ac “Add homepage”

Staging

Der Entwurf deines nächsten Commits. git add kopiert eine Version hierher.

DEINE DATEIEN – EINE DATEI, DREI ORTEArbeitsverz.FestplatteStagingnächster CommitHEADletzter Commitadd ›commit ›GITUALIZEDEIN REPOSITORY – .git auf deinem Laptop2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commitmainmain: ein verschiebbares Label auf einem CommitHEADHEAD → der Branch, auf dem du bistREADME.mdunverändertapp.jsgestagtindex.htmlgeändertlogin.jsunverfolgtv1v1v1v2v2v1v3v2v2v1——HEAD → main → 2e039ac “Add homepage”

HEAD

Die Version im letzten Commit des Branches, auf dem du bist.

DEINE DATEIEN – EINE DATEI, DREI ORTEArbeitsverz.FestplatteStagingnächster CommitHEADletzter Commitadd ›commit ›GITUALIZEDEIN REPOSITORY – .git auf deinem Laptop2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commitmainmain: ein verschiebbares Label auf einem CommitHEADHEAD → der Branch, auf dem du bistREADME.mdunverändertapp.jsgestagtindex.htmlgeändertlogin.jsunverfolgtv1v1v1v2v2v1v3v2v2v1——HEAD → main → 2e039ac “Add homepage”

Statuszeile

Unter jedem Dateinamen: unchanged, modified, staged, untracked, conflict … genau das, was git status sagen würde.

2 Der Commit-Graph

Die rechte Seite zeichnet dein Repository. Alles darauf stammt aus dem echten Zustand nach jedem Befehl – nichts wird von Hand platziert.

DEINE DATEIEN – EINE DATEI, DREI ORTEArbeitsverz.FestplatteStagingnächster CommitHEADletzter Commitadd ›commit ›GITUALIZEDEIN REPOSITORY – .git auf deinem Laptop2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commitmainmain: ein verschiebbares Label auf einem CommitHEADHEAD → der Branch, auf dem du bistREADME.mdunverändertapp.jsgestagtindex.htmlgeändertlogin.jsunverfolgtv1v1v1v2v2v1v3v2v2v1——HEAD → main → 2e039ac “Add homepage”

Kreis

Ein Commit mit kurzem Hash und Nachricht. Die Hashes sind echt: Sie werden aus dem Inhalt berechnet.

DEINE DATEIEN – EINE DATEI, DREI ORTEArbeitsverz.FestplatteStagingnächster CommitHEADletzter Commitadd ›commit ›GITUALIZEDEIN REPOSITORY – .git auf deinem Laptop16a965cMerge feature…16a965c6f96f4a7acb902f45bf46455f09ccff30 Merge feature/logina2b8b5dDocument inst…a2b8b5df5d4f38ac299e9b25e95ebcc998bfb7fa Document install2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit960123aCall login on…960123a1d58a1488381355be004d5a6ff601640c Call login on load19d2019Add login page19d2019870aaae1bc0c6d1a5aa8cc1f8d76c6473 Add login pagefeature/loginfeature/login: ein verschiebbares Label auf einem Commitmainmain: ein verschiebbares Label auf einem CommitHEADHEAD → der Branch, auf dem du bistREADME.mdunverändertapp.jsunverändertindex.htmlunverändertlogin.jsunverändertv2v2v2v2v2v2v2v2v2v1v1v1HEAD → main → 16a965c “Merge feature/login”

Linie

Führt vom Elternteil zum Kind. Ein Merge-Commit hat zwei Eltern, also treffen sich zwei Linien.

DEINE DATEIEN – EINE DATEI, DREI ORTEArbeitsverz.FestplatteStagingnächster CommitHEADletzter Commitadd ›commit ›GITUALIZEDEIN REPOSITORY – .git auf deinem Laptopa2b8b5dDocument installa2b8b5df5d4f38ac299e9b25e95ebcc998bfb7fa Document install2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit960123aCall login on lo…960123a1d58a1488381355be004d5a6ff601640c Call login on load19d2019Add login page19d2019870aaae1bc0c6d1a5aa8cc1f8d76c6473 Add login pagemainmain: ein verschiebbares Label auf einem Commitfeature/loginfeature/login: ein verschiebbares Label auf einem CommitHEADHEAD → der Branch, auf dem du bistREADME.mdunverändertapp.jsunverändertindex.htmlunverändertv2v2v2v1v1v1v2v2v2HEAD → main → a2b8b5d “Document install”

Label

Ein Branch ist nur ein verschiebbares Label auf einem Commit (main, feature/login …).

DEINE DATEIEN – EINE DATEI, DREI ORTEArbeitsverz.FestplatteStagingnächster CommitHEADletzter Commitadd ›commit ›GITUALIZEDEIN REPOSITORY – .git auf deinem Laptopa2b8b5dDocument installa2b8b5df5d4f38ac299e9b25e95ebcc998bfb7fa Document install2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit960123aCall login on lo…960123a1d58a1488381355be004d5a6ff601640c Call login on load19d2019Add login page19d2019870aaae1bc0c6d1a5aa8cc1f8d76c6473 Add login pagemainmain: ein verschiebbares Label auf einem Commitfeature/loginfeature/login: ein verschiebbares Label auf einem CommitHEADHEAD → der Branch, auf dem du bistREADME.mdunverändertapp.jsunverändertindex.htmlunverändertv2v2v2v1v1v1v2v2v2HEAD → main → a2b8b5d “Document install”

HEAD

Wo du bist. Es steht neben dem Branch, auf dem du bist, oder direkt auf einem Commit, wenn HEAD detached ist.

DEINE DATEIEN – EINE DATEI, DREI ORTEArbeitsverz.FestplatteStagingnächster CommitHEADletzter Commitadd ›commit ›GITUALIZE☁ ORIGIN – github.com/acme/shop (ein anderes Repository)DEIN REPOSITORY – .git auf deinem Laptop2b4c917Add to cart2b4c91785b581691dd1665ce1839576f03d6ac23 Add to cart2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commitorigin/mainorigin/main: dein LOKALES Lesezeichen, wo origins Branch bei deinem letzten Fetch/Push standmainmain: ein verschiebbares Label auf einem CommitHEADHEAD → der Branch, auf dem du bistmainmain: so, wie er AUF origin existiertREADME.mdunverändertapp.jsunverändertindex.htmlunverändertv1v1v1v2v2v2v2v2v2HEAD → main → 2b4c917 “Add to cart”

Gestricheltes Label

origin/main und Co.: deine zuletzt bekannte Kopie der Server-Branches, aktualisiert durch fetch, pull und push.

DEINE DATEIEN – EINE DATEI, DREI ORTEArbeitsverz.FestplatteStagingnächster CommitHEADletzter Commitadd ›commit ›GITUALIZEDEIN REPOSITORY – .git auf deinem Laptopb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepage (unerreichbar – kein Branch zeigt hierher; das Reflog kennt ihn noch)mainmain: ein verschiebbares Label auf einem CommitHEADHEAD → der Branch, auf dem du bistREADME.mdunverändertapp.jsunverändertindex.htmlunverändertv1v1v1v1v1v1v1v1v1HEAD → main → b272b3a “Set up project”

Blasser gestrichelter Kreis

Ein nicht erreichbarer Commit – kein Branch zeigt mehr auf ihn, aber er existiert noch (das Reflog kann ihn zurückholen).

DEINE DATEIEN – EINE DATEI, DREI ORTEArbeitsverz.FestplatteStagingnächster CommitHEADletzter Commitadd ›commit ›GITUALIZE☁ ORIGIN – github.com/acme/shop (ein anderes Repository)DEIN REPOSITORY – .git auf deinem Laptop2b4c917Add to cart2b4c91785b581691dd1665ce1839576f03d6ac23 Add to cart2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commitorigin/mainorigin/main: dein LOKALES Lesezeichen, wo origins Branch bei deinem letzten Fetch/Push standmainmain: ein verschiebbares Label auf einem CommitHEADHEAD → der Branch, auf dem du bistmainmain: so, wie er AUF origin existiertREADME.mdunverändertapp.jsunverändertindex.htmlunverändertv1v1v1v2v2v2v2v2v2HEAD → main → 2b4c917 “Add to cart”

ORIGIN-Bereich

Wird gezeigt, wenn eine Lektion ein Remote nutzt: das Repository des Servers über deinem, damit push und fetch Commits sichtbar zwischen ihnen bewegen.

3 Das Terminal

Jede Lektion ist eine Liste von Git-Befehlen. Ein in die Website eingebauter Git-Simulator führt sie in deinem Browser aus – vor jedem Release wird seine Ausgabe Zeile für Zeile mit echtem Git 2.48 geprüft.

~/shop — bashgit add -p
$ git add -p app.js
diff --git a/app.js b/app.js index 4f29dbf..1cd9aa2 100644 --- a/app.js +++ b/app.js @@ -1,6 +1,6 @@ const cart = [] function add(item) { - cart.push(item) + if (item) cart.push(item) } function remove(item) { const i = cart.indexOf(item) (1/2) Stage this hunk [y,n,q,a,d,j,J,g,/,e,p,?]?

Abfragen

Interaktive Befehle (add -p, rebase -i) halten bei jeder Frage an, damit du sie lesen kannst, bevor die Antwort eingetippt wird.

~/shop — bashgit commit
$ git commit
✎ .git/COMMIT_EDITMSGsaved ✓ — git continues
Add cart feature
 
# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
#
# On branch main
# Changes to be committed:
# modified: app.js
#
# Untracked files:
# login.js
#

Editor-Ansicht

Wenn Git einen Editor öffnet (Commit-Nachricht, Rebase-Todo-Liste, Tag-Nachricht), zeigt die Bühne die bearbeitete Datei.

$try any command… (help)✎ Edit a file
Nicht weiter? Wahrscheinliche nächste Befehle
cat index.html
Den Konflikt ansehen: deine Version steht zwischen <<<<<<< und =======, ihre darunter
code index.html
Im Editor lösen (behält beide Seiten, entfernt die Marker)
git add index.html
Nach dem Lösen: sagt Git „index.html ist repariert“

Spielwiese

Lektionen sind nur zum Anschauen. Um eigene Befehle zu tippen, öffne die Spielwiese (Link unter jeder Visualisierung): Der Graph reagiert genau wie in den Lektionen, und Hinweise schlagen die wahrscheinlichsten nächsten Befehle vor, wenn du nicht weiterkommst.

~/shop — bashgit fetch
# meanwhile… Sam pushes 7f94dc7 “Update README” to origin/main
$ git fetch
remote: Enumerating objects: 5, done. remote: Counting objects: 100% (5/5), done. remote: Compressing objects: 100% (1/1), done. remote: Total 3 (delta 1), reused 0 (delta 0), pack-reused 0 (from 0) Unpacking objects: 100% (3/3), 312 bytes | 312.00 KiB/s, done. From github.com:acme/shop 2e039ac..7f94dc7 main -> origin/main

Kollegen-Zeilen

Eine Erzählzeile wie „ein Kollege pusht …“ bedeutet, dass jemand anderes den Server geändert hat – der Grund, warum sich ein späterer Push oder Pull so verhält.

4 Eine Nachricht nach der anderen

Ein Schritt ist in Takte unterteilt. Jeder Takt ändert eine Sache und erklärt sie in einer Bildunterschrift unten auf der Bühne; alles andere wird abgedunkelt.

~/shop — bash① der Befehl wird eingetippt
$ echo "<p>Sale</p>" >> index.html
DEINE DATEIEN – EINE DATEI, DREI ORTEArbeitsverz.FestplatteStagingnächster CommitHEADletzter Commitadd ›commit ›GITUALIZEDEIN REPOSITORY – .git auf deinem Laptop2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commitmainmain: ein verschiebbares Label auf einem CommitHEADHEAD → der Branch, auf dem du bistREADME.mdunverändertapp.jsgestagtindex.htmlgeändertv1v1v1v2v2v1v3v2v2HEAD → main → 2e039ac “Add homepage”

Ursache zuerst

Der Befehl wird getippt, bevor sich etwas bewegt, und die Bereiche ändern sich erst, wenn seine Wirkung eintrifft.

DEINE DATEIEN – EINE DATEI, DREI ORTEArbeitsverz.FestplatteStagingnächster CommitHEADletzter Commitadd ›commit ›GITUALIZE☁ ORIGIN – github.com/acme/shop (ein anderes Repository)DEIN REPOSITORY – .git auf deinem Laptop2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit2b4c917Add to cart2b4c91785b581691dd1665ce1839576f03d6ac23 Add to cartmainmain: ein verschiebbares Label auf einem Commitorigin/mainorigin/main: dein LOKALES Lesezeichen, wo origins Branch bei deinem letzten Fetch/Push standHEADHEAD → der Branch, auf dem du bistmainmain: so, wie er AUF origin existiertREADME.mdunverändertapp.jsgestagtindex.htmlunverändertv1v1v1v2v2v1v2v2v2HEAD → main → 2e039ac “Add homepage”
Ein neuer Commit 2b4c917 entsteht – ein Schnappschuss von allem im Staging-Bereich. main rückt darauf vor (HEAD kommt mit – er zeigt auf main)

Bildunterschrift

Was gerade passiert ist und warum, in einem Satz. Der Bereich neben dem Terminal wiederholt es mit der Erklärung des Schritts.

  1. 1Umsehengit log --oneline
  2. 2Du änderstecho "cart.push(item)" >> app.js
  3. 3Neue Dateiecho "export function login() {}" > login.js
  4. 4Git fragengit status
  5. 5Stagengit add app.js login.js

Kapitel

Die nummerierte Liste unter der Erklärung. Klicke auf einen Schritt, um dorthin zu springen.

5 Bedienelemente

Spiel sie wie ein Video ab oder geh Schritt für Schritt vor.

⏮◀▶▶|1× ▾

⏮ ◀ ▶ ▶|

Neu starten, vorheriger Schritt, Abspielen / Pause, nächster Schritt.

⏮◀▶▶|1× ▾

Zeitleiste

Ziehen, um zu jedem Moment der Lektion zu springen.

⏮◀▶▶|1× ▾

Tempo

0,5× bis 2×.

SpaceAbspielen / Pause←→vorheriger / nächster Schritt

Tastatur

Klicke auf die Bühne, dann Leertaste = Abspielen / Pause, ← / → = vorheriger / nächster Schritt.

6 Befehlsseiten, Optionen und Szenarien

Wo die Visualisierungen zu finden sind.

--force-with-leaseGit ≥ 1.8.5Empfohlen
▷ Visualisierung anzeigen

Befehlsseite

Die Hauptvisualisierung deckt den alltäglichen Einsatz des Befehls ab. Jede Option hat eine eigene kurze Visualisierung – öffne sie in der Optionsliste.

EmpfohlenMainstream, safe choiceBei BedarfUseful in specific casesNicht empfohlenRisky or superseded

Empfehlung

Jede Option trägt ein Badge: Empfohlen, Bei Bedarf oder Nicht empfohlen, mit einer Begründung in einer Zeile.

git add --editGit ≥ 1.6.4

Den Diff vor dem Stagen im Editor öffnen. Du kannst von Hand auswählen, welche Änderungen hineinkommen.

$ git add -e app.js

Warum es keine Animation gibt

git add -e öffnet den ganzen Diff als Patch in deinem Editor; du löschst die Zeilen, die nicht gestagt werden sollen, und git wendet den Rest an. Das ist eine von Hand bearbeitete Datei, keine Zustandsänderung des Repositorys, die die Bühne animieren könnte – git add -p ist das visuelle Gegenstück.

So funktioniert’s

Einige Optionen hängen von Dingen außerhalb des Repositorys ab (dein Editor, Dateirechte, Zeilenenden). Sie bekommen statt einer Animation eine Erklärkarte.

1Das Feature starten
Verzweigen
$ git switch -c feature/login
Login-Seite
$ echo "export function login() {}" > login.js && git add login.js && git commit -m "Add login page"
Einbinden
$ echo "login()" >> app.js && git commit -am "Call login on load"

Szenarien

Durchläufe aus der Praxis, als eine durchgehende Geschichte gespielt, in anklickbare betitelte Abschnitte gegliedert.

Einstellungen

Das Zahnrad im Header enthält die Einstellungen: Sprache, helle oder dunkle Website, Visualisierungs-Theme, Farbenblind-Modus und Textgröße.

Bereit zum Lernen?

Folge einem ganzen Workflow oder wähle einen Befehl.

Szenario: Feature-BranchBefehle ansehen