Convert Figma logo to code with AI

git-school logovisualizing-git

:framed_picture: Visualize how common Git operations affect the commit graph

1,230
191
1,230
71

Top Related Projects

An interactive git visualization and tutorial. Aspiring students of git can use this app to educate and challenge themselves towards mastery of git!

:computer: :mortar_board: Git-it is a (Mac, Win, Linux) Desktop App for Learning Git and GitHub

Flight rules for git

6,836

Git your game on!

PDF on Git Internals

21,293

Most commonly used git tips and tricks.

Quick Overview

Visualizing Git is an interactive web-based tool designed to help users understand and visualize Git operations. It provides a graphical representation of Git commands and their effects on the repository structure, making it easier for beginners to grasp Git concepts and for experienced users to experiment with complex Git scenarios.

Pros

  • Intuitive visual representation of Git operations
  • Interactive interface allowing real-time experimentation
  • Supports a wide range of Git commands and scenarios
  • Accessible online without any installation required

Cons

  • Limited to predefined scenarios and commands
  • May not fully represent the complexity of real-world Git usage
  • Lacks advanced Git features and integrations
  • Requires an internet connection to use

Getting Started

To use Visualizing Git, simply visit the project website at https://git-school.github.io/visualizing-git/. No installation or setup is required. Once on the website, you can start experimenting with Git commands in the provided terminal-like interface. The visual representation will update in real-time as you enter commands.

Example usage:

  1. Type git commit to create a new commit
  2. Use git branch feature to create a new branch
  3. Switch to the branch with git checkout feature
  4. Make changes and commit with git commit
  5. Merge branches using git merge master

Explore different Git scenarios by combining various commands and observing the resulting repository structure in the visualization area.

Competitor Comparisons

An interactive git visualization and tutorial. Aspiring students of git can use this app to educate and challenge themselves towards mastery of git!

Pros of learnGitBranching

  • More comprehensive and structured learning experience with guided tutorials
  • Includes a wider range of Git concepts and commands
  • Offers a sandbox mode for free experimentation

Cons of learnGitBranching

  • More complex interface, which may be overwhelming for beginners
  • Lacks real-time collaboration features
  • Visualization style may not be as intuitive for some users

Code Comparison

learnGitBranching:

var levelSolution = [
  'git checkout -b bugFix',
  'git commit',
  'git checkout main',
  'git commit',
  'git merge bugFix'
];

visualizing-git:

const commands = [
  'git init',
  'git add .',
  'git commit -m "Initial commit"',
  'git branch feature',
  'git checkout feature'
];

Both repositories use JavaScript to define Git commands, but learnGitBranching's approach is more focused on specific level solutions, while visualizing-git uses a simpler array of commands for visualization.

learnGitBranching offers a more in-depth learning experience with structured levels and a wider range of Git concepts. However, its interface may be more complex for beginners. visualizing-git provides a simpler, more straightforward visualization tool that may be easier for some users to grasp initially but lacks the comprehensive learning structure of learnGitBranching.

:computer: :mortar_board: Git-it is a (Mac, Win, Linux) Desktop App for Learning Git and GitHub

Pros of git-it-electron

  • Interactive, step-by-step tutorial for learning Git basics
  • Cross-platform desktop application (Windows, macOS, Linux)
  • Includes built-in terminal for hands-on practice

Cons of git-it-electron

  • Limited to basic Git concepts and commands
  • May not provide as clear visual representation of Git operations

Code comparison

git-it-electron (JavaScript):

const Git = require('nodegit')
const path = require('path')

Git.Repository.open(path.resolve(__dirname, '.git'))
  .then(function(repo) {
    // Repository operations
  })

visualizing-git (JavaScript):

import { GitEngine } from './git-engine'

const gitEngine = new GitEngine()
gitEngine.createBranch('feature')
gitEngine.commit('Add new feature')

Summary

git-it-electron is an interactive tutorial application for learning Git basics, while visualizing-git focuses on providing visual representations of Git operations. git-it-electron offers a more comprehensive learning experience with built-in exercises, but may not provide as detailed visual explanations. visualizing-git excels in demonstrating Git concepts through visual aids but lacks the guided tutorial approach of git-it-electron.

Both projects use JavaScript, with git-it-electron utilizing Node.js modules for Git operations and visualizing-git implementing a custom Git engine for visualization purposes.

Flight rules for git

Pros of git-flight-rules

  • Comprehensive guide with detailed explanations for various Git scenarios
  • Covers a wide range of Git commands and use cases
  • Regularly updated with community contributions

Cons of git-flight-rules

  • Text-based format may be less intuitive for visual learners
  • Requires more time to read and understand compared to interactive visualizations
  • May be overwhelming for beginners due to the extensive content

Code comparison

visualizing-git:

<div id="sandbox">
  <div id="commands"></div>
  <div id="graph"></div>
</div>

git-flight-rules:

# flight rules for git

#### I committed with the wrong name and email configured

Summary

visualizing-git offers an interactive, visual approach to learning Git concepts, making it ideal for beginners and visual learners. It provides a hands-on experience but may lack depth for advanced users.

git-flight-rules, on the other hand, serves as a comprehensive reference guide for Git users of all levels. It covers a wide range of scenarios and commands but may be less engaging for those who prefer interactive learning.

The choice between these repositories depends on the user's learning style and level of Git expertise. visualizing-git is better for quick, visual understanding, while git-flight-rules is more suitable for in-depth knowledge and troubleshooting.

6,836

Git your game on!

Pros of Githug

  • Interactive command-line game for learning Git
  • Covers a wide range of Git concepts and commands
  • Provides immediate feedback and hints for each level

Cons of Githug

  • Requires local installation and setup
  • Limited visual representation of Git operations
  • May be less intuitive for absolute beginners

Code Comparison

Visualizing Git (HTML/JavaScript):

<div id="sandbox">
  <div class="repository"></div>
  <div class="terminal"></div>
</div>

Githug (Ruby):

difficulty 1
description "Initialize an empty repository."

setup do
  FileUtils.rm_rf("./git_hug")
end

solution do
  repo.valid?
end

hint do
  puts "You can initialize a repository with the command 'git init'"
end

Visualizing Git offers a web-based interface for visualizing Git operations, making it accessible without installation. It provides real-time visual feedback on Git commands, which can be especially helpful for beginners.

Githug, on the other hand, offers a more hands-on approach through its command-line interface. It presents a series of challenges that cover various Git concepts, providing a structured learning path for users.

While Visualizing Git excels in immediate visual representation, Githug offers a more comprehensive and practical learning experience through its game-like structure and diverse set of challenges.

PDF on Git Internals

Pros of git-internals-pdf

  • Comprehensive PDF format for in-depth learning
  • Detailed explanations of Git's internal workings
  • Portable and easily shareable resource

Cons of git-internals-pdf

  • Static content, not interactive like visualizing-git
  • May be less engaging for visual learners
  • Requires PDF reader software

Code comparison

visualizing-git:

function createCommit(commit) {
  const parent = commit.parent ? [commit.parent] : [];
  return {
    id: commit.id,
    parent: parent,
    // ... other properties
  };
}

git-internals-pdf:

No direct code comparison available, as git-internals-pdf is a PDF document
containing explanations and diagrams rather than executable code.

The visualizing-git repository provides an interactive web-based tool for visualizing Git operations, making it easier for users to understand Git concepts through hands-on experience. On the other hand, git-internals-pdf offers a comprehensive guide to Git's internal workings in a portable PDF format, which is ideal for in-depth study but lacks the interactivity of visualizing-git.

21,293

Most commonly used git tips and tricks.

Pros of tips

  • Comprehensive collection of Git tips and tricks
  • Regularly updated with community contributions
  • Covers a wide range of Git scenarios and commands

Cons of tips

  • Text-based format may be less intuitive for visual learners
  • Lacks interactive elements for hands-on practice
  • May overwhelm beginners with its extensive list of tips

Code comparison

visualizing-git:

<div id="sandbox">
  <div id="commands"></div>
  <div id="graph"></div>
</div>

tips:

# Most commonly used
git clone <repo>
git branch
git checkout <branch>
git push origin <branch>
git pull origin <branch>

visualizing-git provides an interactive HTML-based interface for visualizing Git operations, while tips offers a markdown-based list of Git commands and tips. The code snippets showcase the different approaches: visualizing-git uses HTML for structuring its interface, whereas tips uses markdown for presenting information in a text-based format.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Visualize Git

Git is an amazingly powerful tool — and it can be amazingly confusing. Demystify Git commands with visualizations powered by D3. Give it a try at http://git-school.github.io/visualizing-git/!

By Git School

Visualize Git illustrates what's going on underneath the hood when you use common Git operations. You'll see what exactly is happening to your commit graph. We aim to support all the most basic git operations, including interacting with remotes.

Here are some examples of the fun things you can do with it:

Rebase

rebase

Cherry-pick

cherry-pick

Push/pull

push-pull

Supported operations

Type help in the command box to see a list of supported operations

pres() = Turn on presenter mode
undo = Undo the last git command
redo = Redo the last undone git command
mode = Change mode (local or remote)
clear = Clear the history pane and reset the visualization

Available Git Commands:

git branch
git checkout
git cherry_pick
git commit
git fetch
git log
git merge
git pull
git push
git rebase
git reflog
git reset
git rev_parse
git revert
git tag

We hope you find this tool useful! Issues and pull requests are welcome! Enjoy! :sparkles:

Based on the awesome work done by @onlywei :bow: