题 漂亮的git分支图


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


985
2018-06-29 10:12


起源


我创建了一个python脚本来创建graphiz图!看一看。 github.com/chode/git-graph - Stephan Bechter
如果你想要高质量和可打印的工具(bit-booster.com/graph.html)将“git log”转换为SVG。有关更多信息,请参阅 我的答案。 - G. Sylvie Davies
您是否正在寻找一种可视化您自己的git历史的工具 - 或者 - 一种能够绘制漂亮的“Git分支”的图表工具? - Uri Abramson
可能重复 在git中可视化分支拓扑 - trblnc
我会删除标签有向非循环图,因为它与这个问题无关 - Maksim Dmitriev


答案:


更新:这个答案得到了更多的关注。它最初发布是因为我认为图形看起来不错,它们可以在Illustrator中用于出版物 - 并且没有更好的解决方案。但现在存在更多适用于此Q的答案,例如 fracz的, Jubobs', 要么 哈里李的!请尽快投票!

更新2:我已经发布了这个答案的改进版本 在git中可视化分支拓扑 问题,因为那里更合适。该版本包括  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


1524
2018-01-31 04:22



是的。正常和明亮/大胆的颜色是:黑色 #202020/#555555,红色: #5d1a14/#da4939, 绿色: #424e24/#a5c261, 黄色: #6f5028/#ffc66d, 蓝色: #263e4e/#6d9cbe,洋红色: #3e1f50/#a256c7,青色: #234e3f/#62c1a1和白: #979797/#ffffff。 - Slipp D. Thompson
@Turbo:对我来说,我的终端应用程序(Terminal.app)的配置文件设置中的颜色是可以更改的。您正在使用的终端应用程序可能支持也可能不支持更改为给定ANSI颜色显示的颜色。此外,使用选项 - shift- [连字 - 减键]创建了破折号(精确的破折号)。我想我错误地认为所有当前的平台都使用Unicode。 - Slipp D. Thompson
你的 --date=relative 和 --abbrev-commit 是多余的,因为你明确使用 %cr 和 %h, 分别。 - graywh
我加了 %C(auto) refnames的修饰符(%d)获得更好的颜色。看到 stackoverflow.com/questions/5889878/color-in-git-log/... - Josef Eisl
很好的答案。我修改了命令看起来更像是--oneline --decorate的输出 lg = log --graph --abbrev-commit --decorate --format=format:'%C(yellow)%h%C(reset)%C(auto)%d%C(reset) %C(normal)%s%C(reset) %C(dim white)%an%C(reset) %C(dim blue)(%ar)%C (reset)' --all - Craig P. Motlin


这里的许多答案都很棒,但对于那些只需要一个简单的一行到点答案的人而不必设置别名或任何额外的,这里是:

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

不是每个人都会一直在做一个git日志,但是当你需要它时,请记住:“ 一只狗 “= git log - 一个二 - d生态 - Ø直线 - G拉夫

enter image description here


561
2018-01-29 00:50



git config --global alias.adog "log --all --decorate --oneline --graph" - fracz


对于文本输出,您可以尝试:

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

要么:

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

要么: 这里的  用于绘制DAG图的graphviz别名。

我个人用 gitxgitk --all 和 gitnub


290
2018-06-29 22:25



我想补充一下 --abbrev-commit --decorate,然后它是完美的! - asymmetric
-abeline暗示了--abbrev-commit,不是吗? - dwineman
@dwineman是的,你不需要 --abbrev-commit 如果你使用 --oneline - Thomas
似乎在你的第二行 git log --graph --oneline --decorate --date=relative --all 该 --date 论证是没用的。我可以看到日志中没有显示日期。 - lerner
指定--oneline时不显示日期 - martinkunev


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

sample graph generated with Gitgraph.js

或者 metro 模板:

GitGraph.js metro theme

或者使用提交消息,作者和标签:

GitGraph with commit messages

测试它 的jsfiddle

用它生成它 Git Grapher 由@bsara。


184
2018-06-08 14:40



是的,这太棒了!将它发布到小提琴中 jsfiddle.net/guan1oz1所以你可以马上测试一下。 - berkus
箭头应指向父母,但不是儿童。 - jubobs
@Jubobs:好点。对于试图理解Git的人来说,这是一个常见的障碍:他们考虑的是时间顺序而不是继承。明确表示(几乎)git中的所有内容都与先前的内容有关,这有助于所有其他内容的到位。 - Slipp D. Thompson
关于箭头方向,来自docs:* @param {Boolean} [options.reverseArrow = false] - 如果为true,则使箭头指向祖先 - Scott
仅供参考,在看到这篇文章并使用gitgraph.js后,我决定创建一个基本上将UI放到gitgraph.js的小工具。它还没有完成,用户界面不是我想要它的地方,但欢迎捐款!看一看: github.com/bsara/git-grapher - bsara


建立在 TikZ和PGFgitdags 是一个小的LaTeX包,允许您毫不费力地生成矢量图形提交图等等。

自动生成现有存储库的提交图是  的目的 gitdags;它产生的图表仅供参考 教育目的

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

这是一个展示简单rebase效果的图表示例:

enter image description here

\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}

96
2017-08-24 04:14



@That看起来很棒!我还想了解如何使用它:考虑一个没有安装LaTeX的Windows用户。如何从头开始生成图表? - VonC
@VonC我不确定,但是如果你不想安装LaTeX,你可能能够生成你的图表 ShareLatex 和 WriteLaTeX等等。当我有更多时间时,我会调查它并扩展wiki ...随意推广这个包 :) - jubobs
这太好了!我会在某个时候编写一个教程,但是现在,我只想提一下你可以使用独立的文档类(我使用裁剪功能)对图表进行后期处理,使用 latex input.tex 生成一个dvi,然后最终使用 dvisvgm input.dvi 生成具有透明度的SVG。从SVG转换为像PNG这样的栅格格式很容易 convert -antialias -density 300 -background none input.svg output.png。顺便说一句,这些图像看起来 惊人 完全透明。还在处理字体问题...... i.imgur.com/1Xu2Ry5.png - vmrob
我花了一段时间才开始工作,所以我写了一个循序渐进的指南 在Ubuntu 14.04上从头开始使用gitdags - ChrisFreeman
@AndreaPolci看 github.com/Jubobs/gitdags/issues/3 以合并为例。的文档 gitdags 正在路上! - jubobs


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

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

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

示例截图,显示linux-git和linux-2.6存储库:

linux-git

linux-2.6


72
2017-11-01 23:35





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

enter image description here

http://www.sourcetreeapp.com/


57
2017-09-17 00:52



它也可以在App Store中使用,因此更新应该自动运行。 - WebOrCode
我喜欢sourcetree的图表,但我宁愿使用命令行,而sourcetree的默认设置总是搞乱我的回购。 - SgtPooki
SourceTree会坚持要您创建Atlassian帐户(或使用您的Google帐户并授予Atlassian一些权限以获取您的电子邮件和个人资料信息),并在Mac(OS X El Capitan v 10.11.5)上安装后,它会在“Clonning”步骤中失败: “致命:在.gitmodules中找不到路径'<path skipped>'的子模块映射”,还有一个奇怪的警告:“找不到模板/ usr / local / git / share / git-core / templates”。非常模糊的消息,不是那么好。 - Dmitry Shevkoplyas
然后在卸载后不要忘记整理您之前授予的Google安全权限: myaccount.google.com/security   - >已连接的应用和网站 - >与您的帐户关联的应用 - >管理应用 - Dmitry Shevkoplyas


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

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

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

预习:

preview


53
2018-01-14 15:07



看起来不错,你如何获得预先格式化的数据来绘制这个图表? - Olga
@Olga我只是将后端代码添加到我的仓库中。你可以查看 它 在github上。 - Harry Lee