Git Map

🌐 Live Demo

Git Map is a dependency-free Git visualisation and situation solver for beginners. The overview page shows the main Git areas:

• 📦 Stash
• 📝 Local Workspace
• 🎯 Staging Area
• 🗂️ Local Repo
• 🌐 Remote Repo

Version 1.0 adds a pasteable git status analyzer, guided scenario journeys, and before/after command previews so users can connect their current Git state to the next useful route. It also includes branch-map.html, an interactive Git Branch Map sandbox where visual branch, commit, switch, and merge actions produce the Git command sequence behind them.

🧭 How To Use

• Use Focused mode to learn one area at a time.
• Use Safe first to hide destructive commands, or Show risky when you want the full map.
• Hover over a top card to preview commands for that Git area.
• Click a top card to pin it active while you scroll and read the help panel.
• Click the pinned top card again to unpin it.
• Click another top card to change the pinned area.
• Press Enter or Space on a focused top card to pin it with the keyboard.
• Use Everything mode to see the full command map. This clears the pinned area.
• Use Light, Dark, or System appearance mode to match your preferred theme.
• Follow the Daily path markers for the common git pull, git add, git commit, and git push flow.
• Click a command ribbon in the diagram to highlight and jump to its detail card.
• Paste real git status output into Paste git status to detect clean, staged, unstaged, untracked, ahead, behind, diverged, and conflict states.
• Use Scenario journeys to step through common workflows such as edit-to-push, careful staging, conflict rescue, rejected push recovery, safe undo, and stash interruptions.
• Read Before, After, and Effect previews on command cards to understand what each command changes before copying it.
• Use What State Am I In? to match common git status situations with the next useful command.
• Use the command card Copy buttons to copy example commands.
• Open Git Branch Map to click commits on main, create feature branches from selected commits, add commits, merge branches, simulate a conflict, and review the generated command history.

⚠️ The page also marks risky commands, such as commands that discard edits or rewrite recent local history. Appearance choice is saved locally in the browser.

🚀 Use the live demo or open index.html in a browser to run it locally.

🛠️ Maintenance

The project stays no-build and dependency-free, but the page is split by responsibility:

• index.html: page shell and static content.
• branch-map.html: interactive branch, commit, and merge sandbox.
• src/styles.css: theme tokens, layout, and responsive styles.
• src/data.js: Git areas, command flows, before/after previews, status detectors, and scenario journeys.
• src/branch-map-model.js: pure branch sandbox constants, command generators, and validation helpers.
• src/app.js: rendering, SVG map drawing, and interactions.
• src/branch-map.js: branch sandbox state, SVG graph drawing, undo/reset, and command history.
• scripts/validate.mjs: data integrity checks.

Run the validator after changing commands or zones:

node scripts/validate.mjs

🧰 Command Coverage

• git status: inspect branch, workspace, staging, conflict, and remote tracking state.
• git add <file>: stage selected workspace changes.
• git add -p: stage selected hunks instead of whole files.
• git commit -m "message": save staged changes as a local commit.
• git push: publish local commits to the shared remote branch.
• git pull: fetch and integrate remote commits into the current branch.
• git fetch: update remote-tracking branches without changing workspace files.
• git diff: review unstaged workspace edits.
• git diff --staged: review the staged snapshot before committing.
• git switch <branch>: move to another branch.
• git switch -c <branch>: create and move to a new branch.
• git merge <branch>: bring another branch into the current branch.
• git rebase <branch>: replay commits on top of another branch.
• git cherry-pick <commit>: copy one commit onto the current branch.
• git revert <commit>: safely undo a commit by creating a new commit.
• git reset --hard HEAD: discard all local tracked changes.
• git restore .: discard unstaged workspace edits by restoring files from the index.
• git stash -u: stash tracked and untracked files.
• git stash branch <branch>: create a branch from a stash.
• git log --oneline --graph --decorate --all: view commit history as a graph.
• git blame <file>: see who last changed each line.
• git tag <name>: mark a release point.
• git remote add origin <url>: record a remote URL in local Git config.

📄 License

MIT License. See LICENSE.