1. 技术文章
  2. Pretty git branch graphs

Pretty git branch graphs

由 拟墨画扇 提交于 2019-12-16 19:42:09

问题


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?


回答1:


Update: This answer has gotten far more attention than it deserves.  It was originally posted because I think the graphs look nice and they could be drawn-over in Illustrator for a publication– and there was no better solution.  But there now exists much more applicable answers to this Q, such as fracz's, Jubobs', or Harry Lee's!  Please go upvote those!!

Update 2: I've posted an improved version of this answer to the Visualizing branch topology in git question, since it's far more appropriate there.  That version includes lg3, which shows both the author and committer info, so you really should check it out.  Leaving this answer for historical (& rep, I'll admit) reasons, though I'm really tempted to just delete it.

2¢: I have two aliases I normally throw in my ~/.gitconfig file:

[alias]
lg1 = log --graph --abbrev-commit --decorate --format=format:'%C(bold blue)%h%C(reset) - %C(bold green)(%ar)%C(reset) %C(white)%s%C(reset) %C(dim white)- %an%C(reset)%C(bold yellow)%d%C(reset)' --all
lg2 = log --graph --abbrev-commit --decorate --format=format:'%C(bold blue)%h%C(reset) - %C(bold cyan)%aD%C(reset) %C(bold green)(%ar)%C(reset)%C(bold yellow)%d%C(reset)%n''          %C(white)%s%C(reset) %C(dim white)- %an%C(reset)' --all
lg = !"git lg1"

git lg/git lg1 looks like this:

and git lg2 looks like this:




回答2:


Many of the answers here are great, but for those that just want a simple one line to the point answer without having to setup aliases or anything extra, here it is: 

git log --all --decorate --oneline --graph

Not everyone would be doing a git log all the time, but when you need it just remember:

"A Dog" = git log --all --decorate --oneline --graph




回答3:


For textual output you can try:

git log --graph --abbrev-commit --decorate --date=relative --all

or:

git log --graph --oneline --decorate --all

or: here's a graphviz alias for drawing the DAG graph.

I personally use gitx, gitk --all and gitnub.




回答4:


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.




回答5:


Built on top of TikZ & PGF, gitdags is a little LaTeX package that allows you to effortlessly produce vector-graphics commit graphs, and more.

Automatic generation of an existing repository's commit graph is not the purpose of gitdags; the graphs it produces are only meant for educational purposes.

I often use it to produce graphs for my answers to Git questions, as an alternative to ASCII commit graphs:

  • How can I do a bugfix on master and integrate it into my less stable branch(es)?
  • How does git commit --amend work, exactly?
  • Why does Git tell me "Not currently on any branch" after I run "git checkout origin/<branch>"?
  • What is the difference between merging master into branch and merging branch into master?
  • Git rebase --preserve-merges fails

Here is an example of such a graph demonstrating the effects of a simple rebase:

\documentclass{article}

\usepackage{subcaption}
\usepackage{gitdags}

\begin{document}

\begin{figure}
  \begin{subfigure}[b]{\textwidth}
    \centering
    \begin{tikzpicture}
      % Commit DAG
      \gitDAG[grow right sep = 2em]{
        A -- B -- { 
          C,
          D -- E,
        }
      };
      % Tag reference
      \gittag
        [v0p1]       % node name
        {v0.1}       % node text
        {above=of A} % node placement
        {A}          % target
      % Remote branch
      \gitremotebranch
        [origmaster]    % node name
        {origin/master} % node text
        {above=of C}    % node placement
        {C}             % target
      % Branch
      \gitbranch
        {master}     % node name and text 
        {above=of E} % node placement
        {E}          % target
      % HEAD reference
      \gitHEAD
        {above=of master} % node placement
        {master}          % target
    \end{tikzpicture}
    \subcaption{Before\ldots}
  \end{subfigure}

  \begin{subfigure}[b]{\textwidth}
    \centering
    \begin{tikzpicture}
      \gitDAG[grow right sep = 2em]{
        A -- B -- { 
          C -- D' -- E',
          {[nodes=unreachable] D -- E },
        }
      };
      % Tag reference
      \gittag
        [v0p1]       % node name
        {v0.1}       % node text
        {above=of A} % node placement
        {A}          % target
      % Remote branch
      \gitremotebranch
        [origmaster]    % node name
        {origin/master} % node text
        {above=of C}    % node placement
        {C}             % target
      % Branch
      \gitbranch
        {master}      % node name and text 
        {above=of E'} % node placement
        {E'}          % target
      % HEAD reference
      \gitHEAD
        {above=of master} % node placement
        {master}          % target
    \end{tikzpicture}
    \subcaption{\ldots{} and after \texttt{git rebase origin/master}}
  \end{subfigure}
  \caption{Demonstrating a typical \texttt{rebase}}
\end{figure}

\end{document}



回答6:


Gitg is a clone of Gitk and GitX for GNOME (it also works on KDE etc.) which shows a pretty colored graph.

It is actively developed (as of 2012). It lets you sort the commits (graph nodes) either chronologically or topologically, and hide commits that don't lead to a selected branch.

It works fine with large repositories and complex dependency graphs.

Sample screenshots, showing the linux-git and linux-2.6 repositories:




回答7:


SourceTree is a really good one. It does print out a good looking and medium size history and branch graph: (the following is done on an experimental Git project just to see some branches). Supports Windows 7+ and Mac OS X 10.6+.

http://www.sourcetreeapp.com/




回答8:


I just wrote one tool that can generate pretty git commits graph using HTML/Canvas.

And provide a jQuery plugin which make it easy to use.

[github] https://github.com/tclh123/commits-graph

Preview:




回答9:


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:




回答10:


I wrote a web tool for converting git logs into pretty SVG graphs: Bit-Booster - Offline Commit Graph Drawing Tool

Upload output from git log --pretty='%h|%p|%d' directly into the tool and then click on the "download graph.svg" link.

The tool is pure-client-side, and so none of your Git data is shared with my server. You can also save the HTML + JS locally and run it using "file:///" URL's. Verified on Chrome 48 and Firefox 43 on Ubuntu 12.04.

It generates HTML that can be posted directly into any page (including the blogspot blogging engine!). Take a look at some of the blog posts here:

http://bit-booster.blogspot.ca/

Here's a screenshot of a sample HTML file generated by the tool:

http://bit-booster.com/graph.html (the tool)




回答11:


Based on a Graphviz script I found in an answer to a related question, I've hacked up a ruby script that creates a summary view of a git repository. It elides all linear history and just shows "interesting" commits, i.e. those with multiple parents, multiple children, or pointed to by a branch or tag. Here's a snippet of the graph it generates for jquery:

git-big-picture and BranchMaster are similar tools that try to show only the high-level structure of a graph, by only displaying how tags, branches, merges, etc. are related.

This question has some more options.




回答12:


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):




回答13:


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.




回答14:


For more detailed textual output, please try: 

git log --graph --date-order -C -M --pretty=format:"<%h> %ad [%an] %Cgreen%d%Creset %s" --all --date=short

You can write alias in $HOME/.gitconfig

[alias]
    graph = log --graph --date-order -C -M --pretty=format:\"<%h> %ad [%an] %Cgreen%d%Creset %s\" --all --date=short



回答15:


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




回答16:


Although sometimes I use gitg, always come back to command line:

[alias]
    #quick look at all repo
    loggsa = log --color --date-order --graph --oneline --decorate --simplify-by-decoration --all
    #quick look at active branch (or refs pointed)
    loggs  = log --color --date-order --graph --oneline --decorate --simplify-by-decoration
    #extend look at all repo
    logga  = log --color --date-order --graph --oneline --decorate --all
    #extend look at active branch
    logg   = log --color --date-order --graph --oneline --decorate
    #Look with date
    logda  = log --color --date-order --date=local --graph --format=\"%C(auto)%h%Creset %C(blue bold)%ad%Creset %C(auto)%d%Creset %s\" --all
    logd   = log --color --date-order --date=local --graph --format=\"%C(auto)%h%Creset %C(blue bold)%ad%Creset %C(auto)%d%Creset %s\"        
    #Look with relative date
    logdra = log --color --date-order --graph --format=\"%C(auto)%h%Creset %C(blue bold)%ar%Creset %C(auto)%d%Creset %s\" --all
    logdr = log --color --date-order --graph --format=\"%C(auto)%h%Creset %C(blue bold)%ar%Creset %C(auto)%d%Creset %s\"  

    loga   = log --graph --color --decorate --all

    # For repos without subject body commits (vim repo, git-svn clones)
    logt  = log --graph --color --format=\"%C(auto)%h %d %<|(100,trunc) %s\"
    logta  = log --graph --color --format=\"%C(auto)%h %d %<|(100,trunc) %s\" --all        
    logtsa = log --graph --color --format=\"%C(auto)%h %d %<|(100,trunc) %s\" --all --simplify-by-decoration

As you can see is almost a keystroke saving aliases, based on:

  • --color: clear look
  • --graph: visualize parents
  • --date-order: most understandable look at repo
  • --decorate: who is who
  • --oneline: Many times all you need to know about a commit
  • --simplify-by-decoration: basic for a first look (just tags, relevant merges, branches)
  • --all: saving keystrokes with all alias with and without this option
  • --date=relative (%ar): Understand activity in repo (sometimes a branch is few commits near master but months ago from him)

See in recent version of git (1.8.5 and above) you can benefit from %C(auto) in decorate placeholder %d

From here all you need is a good understand of gitrevisions to filter whatever you need (something like master..develop, where --simplify-merges could help with long term branches)

The power behind command line is the quickly config based on your needs (understand a repo isn't a unique key log configuration, so adding --numstat, or --raw, or --name-status is sometimes needed. Here git log and aliases are fast, powerful and (with time) the prettiest graph you can achieved. Even more, with output showed by default through a pager (say less) you can always search quickly inside results. Not convinced? You can always parse the result with projects like gitgraph




回答17:


This is my take on this matter:

Screenshot:

Usage:

git hist - Show the history of current branch

git hist --all - Show the graph of all branches (including remotes)

git hist master devel - Show the relationship between two or more branches

git hist --branches - Show all local branches

Add --topo-order to sort commits topologically, instead of by date (default in this alias)

Benefits:

  • Looks just like plain --decorate, so with separate colors for different branch names
  • Adds committer email
  • Adds commit relative and absolute date
  • Sorts commits by date

Setup:

git config --global alias.hist "log --graph --date-order --date=short \
--pretty=format:'%C(auto)%h%d %C(reset)%s %C(bold blue)%ce %C(reset)%C(green)%cr (%cd)'"



回答18:


Very slightly tweaking Slipp's awesome answer, you can use his aliases to log just one branch:

[alias]
lgBranch1 = log --graph --format=format:'%C(bold blue)%h%C(reset) - %C(bold green)(%ar)%C(reset) %C(white)%s%C(reset) %C(bold white)— %an%C(reset)%C(bold yellow)%d%C(reset)' --abbrev-commit --date=relative
lgBranch2 = log --graph --format=format:'%C(bold blue)%h%C(reset) - %C(bold cyan)%aD%C(reset) %C(bold green)(%ar)%C(reset)%C(bold yellow)%d%C(reset)%n''          %C(white)%s%C(reset) %C(bold white)— %an%C(reset)' --abbrev-commit
lg = !"git lg1"

By leaving off the --all you can now do

git lgBranch1 <branch name>

or even

git lgBranch1 --all



回答19:


I have this git log alias in ~/.gitconfig to view the graph history:

[alias]
l = log --all --graph --pretty=format:'%C(auto)%h%C(auto)%d %s %C(dim white)(%aN, %ar)'

With this in place, git l will output something like:

In Git 2.12+ you can even customize the line colors of the graph using the log.graphColors configuration option.

As for the logs' format, it's similar to --oneline, with the addition of the author name (respecting .mailmap) and the relative author date. Note that the %C(auto) syntax, which tells Git to use the default colors for commit hash, etc. is supported in Git >= 1.8.3.




回答20:


I suggest tig https://github.com/jonas/tig , a much much better command line tool for git.

You can use homebrew to install tig on macOS:

$ brew install tig
$ tig




回答21:


Did you try gitk or gitk --all ? However it doesn't have a print/save img as function.




回答22:


GitGraph

Generates a PNG or SVG representation of your Git repository's commit history.

https://code.google.com/p/gitgraph




回答23:


git -c core.pager='less -SRF' log --oneline --graph --decorate

This is my terminal variation, similar to many answers here. I like to adjust the flags passed to less to prevent word wrapping.

I set this to an alias for quick access since the command is a bit cumbersome.




回答24:


Try ditaa. It can transform any ASCII diagram into an image. Although is was not designed with Git branches in mind, I was impressed by the results.

Source (txt file):

        +--------+
        | hotfix |
        +---+----+
            |
--*<---*<---*
       ^ 
       |
       \--*<---*
               |
           +---+----+
           | master |
           +--------+

Command:

java -jar ditaa0_9.jar ascii-graph.txt

Result:

It also supports background colors, dashed lines, different shapes and more. See the examples.




回答25:


I don't know about a direct tool, but maybe you can hack a script to export the data into dot format and render it with graphviz.




回答26:


There's a funky Git commit graph as one of the demos of the Raphael web graphics library.

The demo is static, but it should be easy enough to take the code and swap out their static data for a live set of data -- I think it's just Git commit data in JSON format.

The demo is here: http://dmitrybaranovskiy.github.io/raphael/github/impact.html




回答27:


If your repository sits on Gitlab, you can use its graph representation as that is rendered as SVG in your browser.

  • Go to your repository's graph view, e.g. https://gitlab.com/gitlab-org/gitter/webapp/network/develop

  • Scroll the graph down to the bottom (it lazy loads commits!)

  • Use your browser's inspector to copy the SVG element to a new file

  • Open it in a renderer of your choice, e.g. Inkscape




回答28:


some aliases in ~/.oh-my-zsh/plugins/git/git.plugin.zsh

gke='\gitk --all $(git log -g --pretty=%h)'
glg='git log --stat'
glgg='git log --graph'
glgga='git log --graph --decorate --all'
glgm='git log --graph --max-count=10'
glgp='git log --stat -p'
glo='git log --oneline --decorate'
glog='git log --oneline --decorate --graph'
gloga='git log --oneline --decorate --graph --all'
glol='git log --graph --pretty='\''%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset'\'' --abbrev-commit'
glola='git log --graph --pretty='\''%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset'\'' --abbrev-commit --all'



回答29:


For OSX users, I've taken the @gospes example and slightly modified it for gsed (gnu-sed installed via homebrew) and adjusted the colors (to work with a black background, not sure how the original example could possibly render the way it does in the example since it specifies black text on a terminal with a black background).

[alias]
    # tree, vtree, stree support
    logx = log --all --graph --decorate=short --color --format=format:'%C(bold blue)%h%C(reset)+%C(bold black)(%cr)%C(reset)+%C(auto)%d%C(reset)++\n+++       %C(bold black)%an%C(reset)%C(bold black): %s%C(reset)'
    tree = log --all --graph --decorate=short --color --format=format:'%C(bold blue)%h%C(reset) %C(auto)%d%C(reset)\n         %C(bold black)[%cr]%C(reset)  %x09%C(bold black)%an: %s %C(reset)'
    stree = !bash -c '" \
    while IFS=+ read -r hash time branch message; do \
        timelength=$(echo \"$time\" | gsed -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);"' | less -r
    vtree = !bash -c '" \
    while IFS=+ read -r hash time branch message; do \
      timelength=$(echo \"$time\" | gsed -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);"' | less -r

The key for OSX is to first install gnu sed (which has the -r option). Most easily done with homebrew, which will not overwrite the system-installed sed, but will instead install gnu sed as "gsed". Hope this helps @SlippD.Thompson who commented above about OSX not working.




回答30:


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.



来源：https://stackoverflow.com/questions/1057564/pretty-git-branch-graphs

标签
git
git-log
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!