漂亮的git分支图

我看过一些书和文章，有一些非常漂亮的git分支和提交图。 我怎样才能做出高质量的git历史打印图像？

更新：这个答案已经得到了比它应得的更多的关注。 最初是因为我认为这些图表看起来不错，可以在Illustrator中为出版物绘制，而且没有更好的解决方案。 但是现在有更多适用于这个Q的答案，比如fracz ， Jubobs或者Harry Lee ！ 请去upvote那些！

更新2：我已经发布了这个答案的改进版本的可视化分支拓扑在git的问题，因为它更适合那里。 该版本包括 lg3 ，它显示作者和提交者的信息，所以你真的应该检查出来。 离开这个答案的历史（＆代表，我承认）的理由，但我真的很想删除它。

2¢ ：我通常在我的~/.gitconfig文件中有两个别名： 

 [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看起来像这样：
git lg1

和git lg2看起来像这样：
git lg2

这里的许多答案都很棒，但是对于那些只需要简单的一行来回答问题的人而不必设置别名或任何额外的东西，这里是： 

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

不是每个人都会一直在做一个git日志，但是当你需要的时候只需要记住：“ a dog ”= git log – a ll – d ecorate – o neline – g raph

在这里输入图像描述

对于文本输出你可以尝试： 

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

要么： 

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

或者： 这是绘制DAG图形的graphviz别名。

我个人使用gitx ， gitk --all和gitnub 。

Gitgraph.js允许在没有存储库的情况下绘制漂亮的git分支。 只需编写一个配置分支并提交并在浏览器中呈现的Javascript代码即可。 

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

用Gitgraph.js生成的样例图

或与metro模板：

GitGraph.js地铁主题

或提交消息，作者和标签：

GitGraph提交消息

用JSFiddle测试一下。

用@bsara生成Git Grapher 。

gitdags建立在TikZ和PGF gitdags是一个小小的LaTeX软件包，可以让您毫不费力地生成矢量图形提交图，等等。

自动生成现有的存储库的提交图不是 gitdags的目的; 它产生的图表仅用于教育目的 。

我经常用它来为Git问题的答案生成图表，作为ASCII提交图的替代方法：

  • 如何在master上执行bug修复并将其集成到我的不太稳定的分支中？
  • git如何提交 – 准确的工作？
  • 为什么Git在运行“git checkout origin / <branch>”后告诉我“目前不在任何分支上”？
  • 将master合并到分支和将分支合并到master中有什么区别？
  • Git rebase – 保留合并失败

下面是一个演示一个简单的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}

Gitg是GNOME的Gitk和GitX的一个克隆（它也适用于KDE等），它显示了一个漂亮的彩色图形。

积极开发（截至2012年）。 它允许您按时间顺序或拓扑对提交（图形节点）进行排序，并隐藏不会导致选定分支的提交。

它适用于大型软件库和复杂的依赖关系图。

示例屏幕截图显示了linux-git和linux-2.6版本库：

Linux的混帐

Linux的2.6

SourceTree是一个非常好的。 它确实打印出一个好看的中等规模的历史和分支图（下面是一个实验性的Git项目，只是为了看到一些分支）。 支持Windows 7 +和Mac OS X 10.6+。

在这里输入图像描述

http://www.sourcetreeapp.com/

git-forest是一个优秀的Perl脚本，我已经使用了一年多了，而且我几乎不再直接使用git log命令。

这些是我喜欢这个脚本的一些事情：

  • 它使用unicode字符在图形中绘制线条，使图形线条更加连续。
  • 您可以将--reverse与图形输出结合起来，这对于常规的git log命令来说是不可能的。
  • 它内部使用git log来获取提交列表，所以你传递给git log所有选项也可以传递给这个脚本。

我有一个使用git-forest的别名，如下所示： 

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

这是输出在终端上的样子：

在这里输入图像描述

我只写了一个工具，可以使用HTML / Canvas生成漂亮的git提交图。

并提供一个易于使用的jQuery插件。

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

预习：

预习

基于我在一个相关问题的答案中找到的Graphviz脚本，我已经破解了一个ruby脚本 ，它创建了一个git仓库的摘要视图。 它消除了所有的线性历史，只显示“有趣的”提交，即具有多个父母，多个孩子或由分支或标记指向的提交。 下面是它为jQuery生成的图片的一个片段：

jquery示例

git-big-picture和BranchMaster是类似的工具，通过只显示标签，分支，合并等等如何相关，试图只显示图形的高级结构。

这个问题有更多的选择。

取决于他们的样子。 我使用gitx来制作像这样的图片：

简单的情节

你可以在24路章鱼合并（最初来自http://clojure-log.n01se.net/date/2008-12-24.html ）上比较git log --graph和gitk：

24路git章鱼合并。原始网址是<code> http://lwn.nethttp://img.dovov.comns/kernel/gitk-octopus.png </ code>

我已经添加了三个自定义命令： git tree ， git vtree和git vtree 。 我会按顺序过去 

 [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)'

在这里输入图像描述

用git stree git vtree和git vtree我已经使用bash来帮助格式化。 

 [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);"'

git_stree

 [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);"'

git_vtree

编辑：这适用于git版本1.9a。 颜色值“自动”显然是在这个版本首次亮相。 这是一个很好的补充，因为分支名称会得到不同的颜色。 这使得例如区分本地和远程分支变得更容易。

有关更详细的文字输出，请尝试： 

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

您可以在$ HOME / .gitconfig中编写别名 

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

gitg ：一个基于gtk的版本库查看器，这是新的，但有趣的和有用的
http://git.gnome.org/browse/gitg
我目前使用它

虽然有时我使用gitg ，但总是回到命令行： 

 [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

正如你所看到的几乎是一个按键节省别名，基于：

  • – 颜色：清晰的外观
  • – 图：可视化父母
  • – 日期顺序：最容易理解的回购看看
  • – 装饰：谁是谁
  • –oneline：多次你需要知道一个提交
  • – 简化装饰：基本的第一次看（只是标签，相关合并，分支机构）
  • – 全部：保存与所有别名的击键和没有这个选项
  • –date = relative（％ar）：理解repo中的活动（有时候分支很少提交，但是几个月前从他那里提交）

请参阅最近版本的git（1.8.5及以上版本），您可以从装饰占位符％d中的％C（自动）中受益

从这里你所需要的是了解gitrevisions来过滤任何你需要的东西（像master..develop，其中–simplify-merges可以帮助长期分支）

命令行背后的力量是根据您的需要快速配置（理解repo不是一个唯一的密钥日志配置，所以有时需要添加–numstat或–raw或–name-status。别名是快速，强大和（随着时间的推移）最漂亮的图形，你可以实现更多，输出显示默认通过一个传呼机（说少），你总是可以快速搜索内结果不相信？你总是可以解析结果像gitgraph这样的项目

我写了一个网页工具，用于将git日志转换为漂亮的SVG图形： Bit-Booster – 离线提交图形绘图工具

将git log --pretty='%h|%p|%d'直接上传到工具中，然后点击“download graph.svg”链接。

该工具是纯粹的客户端，所以没有你的Git数据与我的服务器共享。 您也可以在本地保存HTML + JS，并使用“file：///”URL来运行它。 在Ubuntu 12.04上的Chrome 48和Firefox 43上进行了验证。

它生成的HTML可以直接发布到任何页面（包括blogspot博客引擎！）。 看看这里的一些博客帖子：

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

以下是该工具生成的示例HTML文件的屏幕截图：

http://bit-booster.com/graph.html （该工具）

非常略微调整Slipp真棒的答案 ，你可以使用他的别名只记录一个分支： 

 [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"

通过离开 – 所有你现在可以做 

 git lgBranch1 <branch name>

甚至 

 gitlgBranch1 --all

GitGraph

为您的Git存储库的提交历史生成一个PNG或SVG表示。

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

我在~/.gitconfig有这个git log别名来查看图表历史记录： 

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

有了这个， git l会输出如下所示的内容：

在这里输入图像描述

在Git 2.12 +中，您甚至可以使用log.graphColors配置选项自定义图形的线条颜色。

至于日志的格式，它类似于--oneline ，增加了作者的名字 （尊重.mailmap ）和相对作者的日期 。 请注意，Git> = 1.8.3支持%C(auto)语法，它告诉Git使用默认的提交散列颜色等。

你尝试过gitk或gitk --all ？ 但是它没有打印/保存img功能。 

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

这是我的终端变体，类似于这里的许多答案。 我喜欢调整传递给less的标志，以防止换行。

示例输出

我把它设置为别名以便快速访问，因为该命令有点麻烦。

这是我对此事的看法：

截图：

截图

用法：

git hist – 显示当前分支的历史记录

git hist --all – 显示所有分支的图形（包括遥控器）

git hist master devel – 显示两个或更多分支之间的关系

git hist --branches – 显示所有本地分支

添加--topo-order拓扑排序提交拓扑，而不是按日期（默认在这个别名）

优点：

  • 看起来就像普通的--decorate ，所以用不同的分支名称分开的颜色
  • 添加提交者电子邮件
  • 添加提交相对和绝对日期
  • 按日期排序提交

建立：

git config –global alias.hist“log –graph –date-order –date = short –pretty = format：'％C（auto）％h％d％C（reset）％s％C（bold蓝色）％ce％C（复位）％C（绿色）％cr（％cd）'“

作为Raphael网络图形库的演示之一，有一个时髦的Git提交图。

该演示是静态的，但它应该很容易采取代码和交换出他们的静态数据为一组实时数据 – 我想这只是Git提交数据在JSON格式。

演示在这里： http : //dmitrybaranovskiy.github.io/raphael/github/impact.html

我不知道一个直接的工具，但也许你可以破解脚本将数据导出为点格式并使用graphviz进行渲染。

试试ditaa 。 它可以将任何ASCII图转换成图像。 虽然没有设计Git分支，但结果令我印象深刻。

来源（txt文件）： 

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

命令： 

 java -jar ditaa0_9.jar ascii-graph.txt

结果：

在这里输入图像描述

它也支持背景颜色，虚线，不同的形状和更多。 看例子 。

对于OSX用户，我已经采取了@gospes的例子，并对gsed（通过homebrew安装的gnu-sed ）稍作修改，并调整颜色（以黑色背景工作，不知道原始示例如何可能呈现方式因为它在黑色背景的终端上指定黑色文本）。 

 [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

OSX的关键是首先安装gnu sed（其中有-r选项）。 使用自制软件很容易，不会覆盖系统安装的sed，而是将gnu sed安装为“gsed”。 希望这有助于@ SlippD.Thompson谁评论上面关于OSX不工作。

    Interesting Posts

    如何检查有向图是否是非循环的？