Master Git Commands Visually: A Hands‑On Guide with Animated Diagrams

A visual Git learning tool can turn dull training into an engaging experience; the article showcases the tool and provides step‑by‑step demonstrations of common Git workflows.

1. Commit‑related operations

Two consecutive

git commit

commands are visualized, showing version changes.

<code>git commit
git commit</code>

Creating a new branch with

git checkout -b bugFix

automatically creates the branch if it does not exist.

<code>git checkout -b bugFix</code>

After committing on

main

and

bugFix

, the

git merge bugFix

command merges the feature branch back into

main

.

<code>git checkout -b bugFix
git commit
git checkout master
git commit
git merge bugFix</code>

The

git rebase

command rewrites history for a cleaner linear view.

<code>git checkout -b bugFix
git commit
git checkout main
git commit
git checkout bugFix
git rebase main</code>

2. HEAD movement

HEAD points to the latest commit on the current branch; many commands start by moving HEAD.

You can jump directly to a commit by its hash with

git checkout <hash>

.

<code>git checkout c4</code>

Relative shortcuts

^

and

~

allow quick navigation without remembering long hashes.

<code>git checkout bugFix
git checkout HEAD^</code>

3. cherry‑pick

git cherry-pick

copies selected commits onto the current HEAD, useful for selective integration.

<code>git cherry-pick c3 c4 c7</code>

4. Useful tips

Combining

git cherry-pick

with branch switches can resolve complex scenarios, and

git tag

adds readable labels to commits.

<code>git tag v0 c1
git tag v1 c2
git checkout c2</code>

5. Advanced tricks

Multiple rebase steps and special symbols (

~

,

^

) enable rapid branch creation and history reshaping.

<code>git rebase main bugFix
git rebase bugFix side
git rebase side another
git branch -f master another</code>

<code>git branch bugWork HEAD~^2~</code>

6. Remote repository operations

Cloning a remote repository is done with

git clone

.

git fetch

synchronizes remote data without altering the working tree, while

git pull

combines fetch and merge.

<code>git clone
git fetch
git pull</code>

Pushing local commits to the remote is performed with

git push

.

<code>git push</code>

Tool address

https://learngitbranching.js.org/?locale=en