漂亮的 git 分支图

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

答案

更新:这个答案已经得到了应有的重视。最初发布是因为我认为这些图形看起来不错,可以在 Illustrator 中绘制它们以进行发布 - 并且没有更好的解决方案。但是,现在对此问题存在更多适用的答案,例如fraczJubobsHarry Lee的答案!请去投票那些!!

更新 2: 对于 git问题中的Visualization 分支拓扑,我已经发布了此答案的改进版本,因为它在那里更合适。该版本包括 lg3 ,它同时显示作者和提交者信息,因此您确实应该检查一下。出于历史原因(我会承认)代表离开此答案,尽管我真的很想删除它。

:我通常在~/.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 log ,但是当您需要它时,请记住:

” = 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 别名。

我个人使用gitxgitk --allgitnub

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 Metro主题

或带有提交消息,作者和标签:

带有提交消息的GitGraph

JSFiddle测试它。

使用 @bsara 使用Git Grapher生成它。

gitdags构建在TikZ 和 PGF gitdags是一个小小的 LaTeX 软件包,可让您轻松生成矢量图形提交图等。

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

我经常用它来生成我的 Git 问题答案的图形,以替代 ASCII 提交图形:

这是这样一个图表的示例,演示了简单的变基的效果:

在此处输入图片说明

\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的git

linux-2.6

SourceTree 是一个非常好的产品。它的确打印出了美观,中等大小的历史记录和分支图:(以下是在一个实验性的 Git 项目上完成的,只是为了看到一些分支)。支持 Windows 7 + 和 Mac OS X 10.6+。

在此处输入图片说明

http://www.sourcetreeapp.com/

我只是写了一个工具,可以使用 HTML / Canvas 生成漂亮的 git commits 图。

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

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

预习:

预习

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"

这是终端上的输出结果:

在此处输入图片说明

我编写了一个 Web 工具,用于将 git 日志转换为漂亮的 SVG 图形: Bit-Booster - 脱机提交图形绘制工具

git log --pretty='%h|%p|%d'直接上传到工具中,然后单击 “下载 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 (该工具)