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.

git commit
git commit

Creating a new branch with git checkout -b bugFix automatically creates the branch if it does not exist. git checkout -b bugFix After committing on main and bugFix, the git merge bugFix command merges the feature branch back into main.

git checkout -b bugFix
git commit
git checkout master
git commit
git merge bugFix

The git rebase command rewrites history for a cleaner linear view.

git checkout -b bugFix
git commit
git checkout main
git commit
git checkout bugFix
git rebase main

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>. git checkout c4 Relative shortcuts ^ and ~ allow quick navigation without remembering long hashes.

git checkout bugFix
git checkout HEAD^

3. cherry‑pick

git cherry-pick

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

git cherry-pick c3 c4 c7

4. Useful tips

Combining git cherry-pick with branch switches can resolve complex scenarios, and git tag adds readable labels to commits.

git tag v0 c1
git tag v1 c2
git checkout c2

5. Advanced tricks

Multiple rebase steps and special symbols ( ~, ^) enable rapid branch creation and history reshaping.

git rebase main bugFix
git rebase bugFix side
git rebase side another
git branch -f master another

git branch bugWork HEAD~^2~

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.

git clone
git fetch
git pull

Pushing local commits to the remote is performed with git push.

git push

Tool address

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