漂亮的 git 分支图

Pretty git branch graphs

提问by krosenvold

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?

我看过一些书籍和文章有一些非常漂亮的 git 分支和提交图。如何制作高质量的 git 历史可打印图像？

回答by Slipp D. Thompson

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!!

更新：这个答案受到的关注远远超过应有的程度。??最初发布是因为我认为这些图表看起来不错，并且可以在 Illustrator 中绘制以供发表——而且没有更好的解决方案。??但是有现在存在更多适用于这个问题的答案，例如fracz的、Jubobs的或Harry Lee的！？？请投票给那些！

Update 2: I've posted an improved version of this answer to the Visualizing branch topology in gitquestion, since it's far more appropriate there.??That version includeslg3, 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：我已经在 git问题中将这个答案的改进版本发布到可视化分支拓扑，因为它在那里更合适。??那个版本包括lg3，它显示了作者和提交者信息，所以你真的应该检查它出。？？出于历史原因（和代表，我承认）留下这个答案，尽管我真的很想删除它。

My 2￠: I have two aliases I normally throw in my ~/.gitconfigfile:

我的 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 lg1looks like this:

git lg/git lg1看起来像这样：

and git lg2looks like this:

和git lg2看起来像这样：

回答by Patoshi パトシ

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 logall the time, but when you need it just remember:

不是每个人都会一直在做git log，但是当您需要时，请记住：

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

“狗”= GIT中的日志-一个LL - decorate - öneline -克拉夫

回答by keo

For textual output you can try:

对于文本输出，您可以尝试：

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

or:

或者：

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

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

或：这是用于绘制 DAG 图的 graphviz 别名。

I personally use gitx, gitk --alland gitnub.

我个人使用gitx,gitk --all和gitnub.

回答by fracz

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

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

or with metrotemplate:

或使用metro模板：

or with commit messages, authors, and tags:

或使用提交消息、作者和标签：

Test it with JSFiddle.

用JSFiddle测试它。

Generate it with Git Grapherby @bsara.

使用@bsara 的Git Grapher生成它。

回答by jub0bs

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

建立在顶部TikZ＆PGF，gitdags是一个小乳胶包，让您毫不费力地产生矢量图形提交图表，等等。

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

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

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

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

• 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

• 如何在 master 上修复错误并将其集成到我不太稳定的分支中？
• git commit --amend 究竟是如何工作的？
• 为什么在我运行“git checkout origin/<branch>”后，Git 会告诉我“当前不在任何分支上”？
• 将 master 合并到分支和将分支合并到 master 之间有什么区别？
• Git rebase --preserve-merges 失败

Here is an example of such a graph demonstrating the effects of a simple 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}

回答by Mechanical snail

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

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

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.

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

It works fine with large repositories and complex dependency graphs.

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

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

示例屏幕截图，显示了 linux-git 和 linux-2.6 存储库：

回答by Harry Lee

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

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

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

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

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

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

Preview:

预览：

回答by nonopolarity

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+.

SourceTree 是一个非常好的。它确实打印出一个漂亮的中等大小的历史和分支图：（以下是在一个实验性的 Git 项目上完成的，只是为了看到一些分支）。支持 Windows 7+ 和 Mac OS X 10.6+。

http://www.sourcetreeapp.com/

http://www.sourcetreeapp.com/

回答by Tuxdude

git-forestis an excellent perl script I've been using for more than a year and I hardly use the git logcommand directly any more.

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

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 --reversewith the graph output, which is not possible with the regular git logcommand.
• It uses git loginternally to grab the list of commits, so all options that you pass to git logcan also be passed to this script as well.

• 它使用 unicode 字符在图形中绘制线条，使图形线条更加连续。
• 您可以结合--reverse图形输出，这是常规git log命令无法实现的。
• 它在git log内部使用来获取提交列表，因此您传递给的所有选项git log也可以传递给此脚本。

I have an alias using git-forestas follows:

我有一个别名使用git-forest如下：

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

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

回答by G. Sylvie Davies

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

我编写了一个将 git 日志转换为漂亮的 SVG 图形的网络工具： 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.

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

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.

该工具是纯客户端的，因此您的任何 Git 数据都不会与我的服务器共享。您还可以在本地保存 HTML + JS 并使用“file:///” URL 运行它。在 Ubuntu 12.04 上的 Chrome 48 和 Firefox 43 上验证。

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:

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

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

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

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

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

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

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