Pretty git branch graphs

Question

I've seen some books and articles have some really pretty looking graphs of git branches and commits. How can I make high-quality printable images of git history?

Answer 1

git-forest is an excellent perl script I've been using for more than a year and I hardly use the git log command directly any more.

These are some of the things I love about this script:

• It uses unicode characters to draw the lines in the graph giving a more continuous look to the graph lines.
• You can combine --reverse with the graph output, which is not possible with the regular git log command.
• It uses git log internally to grab the list of commits, so all options that you pass to git log can also be passed to this script as well.

I have an alias using git-forest as follows:

[alias]
tree = "forest --pretty=format:\"%C(red)%h %C(magenta)(%ar) %C(blue)%an %C(reset)%s\" --style=15 --reverse"

This is how the output looks like on a terminal:

Answer 2

Looking at this conversation tried to use my favorite git-cola & git-dag. Running View->DAG... from git-cola and replace Log: master -- with --all shows pretty graph with all branches.

Answer 3

Depends on what they looked like. I use gitx which makes pictures like this one:

You can compare git log --graph vs. gitk on a 24-way octopus merge (originally from http://clojure-log.n01se.net/date/2008-12-24.html):

Answer 4

gitg: a gtk-based repository viewer, that's new but interesting and useful
http://git.gnome.org/browse/gitg
I use it currently

Answer 5

Gitgraph.js allows to draw pretty git branches without a repository. Just write a Javascript code that configures your branches and commits and render it in browser.

var gitGraph = new GitGraph({
   template: "blackarrow",
   mode: "compact",
   orientation: "horizontal",
   reverseArrow: true
});

var master = gitGraph.branch("master").commit().commit();
var develop = gitGraph.branch("develop").commit();
master.commit();
develop.commit().commit();
develop.merge(master);

or with metro template:

or with commit messages, authors, and tags:

Test it with JSFiddle.

Generate it with Git Grapher by @bsara.

Answer 6

I've added three custom commands: git tree, git stree and git vtree. I'll go over them in that order.

[alias]
    tree = log --all --graph --decorate=short --color --format=format:'%C(bold blue)%h%C(reset) %C(auto)%d%C(reset)\n         %C(black)[%cr]%C(reset)  %x09%C(black)%an: %s %C(reset)'

With git stree and git vtree I've use bash to help with the formatting.

[alias]
    logx = log --all --graph --decorate=short --color --format=format:'%C(bold blue)%h%C(reset)+%C(dim black)(%cr)%C(reset)+%C(auto)%d%C(reset)++\n+++       %C(bold black)%an%C(reset)%C(black): %s%C(reset)'
    stree = !bash -c '"                                                                             \
        while IFS=+ read -r hash time branch message; do                                            \
            timelength=$(echo \"$time\" | sed -r \"s:[^ ][[]([0-9]{1,2}(;[0-9]{1,2})?)?m::g\");     \
            timelength=$(echo \"16+${#time}-${#timelength}\" | bc);                                 \
            printf \"%${timelength}s    %s %s %s\n\" \"$time\" \"$hash\" \"$branch\" \"\";          \
        done < <(git logx && echo);"'

---

[alias]
    logx = log --all --graph --decorate=short --color --format=format:'%C(bold blue)%h%C(reset)+%C(dim black)(%cr)%C(reset)+%C(auto)%d%C(reset)++\n+++       %C(bold black)%an%C(reset)%C(black): %s%C(reset)'
    vtree = !bash -c '"                                                                             \
        while IFS=+ read -r hash time branch message; do                                            \
            timelength=$(echo \"$time\" | sed -r \"s:[^ ][[]([0-9]{1,2}(;[0-9]{1,2})?)?m::g\");     \
            timelength=$(echo \"16+${#time}-${#timelength}\" | bc);                                 \
            printf \"%${timelength}s    %s %s %s\n\" \"$time\" \"$hash\" \"$branch\" \"$message\";  \
        done < <(git logx && echo);"'

---

EDIT: This works with git version 1.9a. The color value 'auto' is apparently making its debut in this release. It's a nice addition because branch names will get a different color. This makes it easier to distinguish between local and remote branches for instance.