Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
HTML TeX Other
branch: master
Failed to load latest commit information.
.gitignore perform automatic detection of SVG capabilities
Makefile Makefile: convert tab to spaces link try. Portuguese translation.
basic-usage-2.tex add 'git checkout HEAD' and 'git commit -a'
basic-usage.tex Use a scaling factor for all sizes
checkout-after-detached.tex remove vim modeline
checkout-b-detached.tex Use a scaling factor for all sizes
checkout-branch.tex remove vim modeline
checkout-detached.tex remove vim modeline
checkout-files.tex remove vim modeline
cherry-pick.tex use loosely dashed lines instead of deltas
commit-amend.tex add highlight for new commits / branches
commit-detached.tex add highlight for new commits / branches
commit-maint.tex add highlight for new commits / branches
commit-master.tex add highlight for new commits / branches
common.tex Use a scaling factor for all sizes
conventions.tex Use a scaling factor for all sizes
diff.tex remove vim modeline
index-de.html Corrected german language
index-en.html Add link to "Visualizing Git Concepts with D3".
index-es.html Little fixes & typos
index-fr.html Portuguese translation.
index-it.html Portuguese translation.
index-ja.html Portuguese translation.
index-ko.html Portuguese translation.
index-pt.html Corrections for Portuguese translations.
index-ru.html Update index-ru.html. Fix typo
index-sk.html Portuguese translation.
index-vi.html Portuguese translation.
index-zh-cn.html Portuguese translation.
index.html Portuguese translation.
merge-ff.tex remove vim modeline
merge.tex Use a scaling factor for all sizes
publish publish: back up and restore old index; use add -f
rebase-onto.tex use loosely dashed lines instead of deltas
rebase.tex use loosely dashed lines instead of deltas
reset-commit.tex remove vim modeline
reset-files.tex remove vim modeline
reset.tex remove vim modeline
translate-en.html add translate-en.html
visual-git-guide.css css: add permanent, non-dropdown language links
visual-git-guide.js Turn on Google Analytics.

A Visual Git Reference

The goal of this website is to be a concise, visual reference for how git commands work. I often draw pictures like this on a whiteboard for my colleagues, so I figured I would make a nice electronic version once and for all.


I chose to draw the images using TeX and PGF/TikZ. I originally tried using Graphviz, but unfortunately there is no way to tell it how to lay out the graph exactly. Using TikZ, I was able to create a domain-specific language to represent commit graphs, and I think the result turned out quite well.

All of the common macros are stored in common.tex. Each image source includes this file. To see an example of how to use these macros, look at commit-master.tex.

To generate the image files, I first create PDFs using pdflatex, and from there I create SVGs and PNGs using pdf2svg and convert, respectively.

Building from Source

First, the following must be installed:

sudo apt-get install texlive texlive-fonts-extra pdf2svg imagemagick

Then, build the images:


Finally, create the gh-pages branch:

make gh-pages


Copyright © 2010, Mark Lodato. Japanese translation © 2010, Kazu Yamamoto. Korean translation © 2011, Sean. Russian translation © 2012, Alex Sychev. French translation © 2012, Michel Lefranc. Chinese translation © 2012, wych. Spanish translation © 2012, Lucas Videla. Italian translation © 2012, Daniel Londero. German translation © 2013, Martin Funk. Vietnamese translation © 2013, Hoat Le. Slovak translation © 2013 Ľudovít Lučenič. Portuguese translation © 2014 Gustavo de Oliveira This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.

Something went wrong with that request. Please try again.