web-dev-qa-db-ja.com

かなりgitの枝グラフ

私はいくつかの本や記事にgitのブランチとコミットのグラフがとてもきれいに見えるのを見ました。 gitの履歴を高品質で印刷可能な画像にするにはどうすればいいですか？

gitgit-log
1168
krosenvold

更新：この答えはそれが値するよりはるかに注目を集めています。これはもともと掲載されたものです。なぜなら、グラフは見栄えがよく、出版用にIllustratorで描画できる可能性があるからです。これ以上の解決策はありません。しかし、 fracz 、 Jubobs 、 Harry Lee のように、このQに対するより適切な答えが今や存在します。それらを投票してください！

更新2： gitでブランチトポロジを視覚化する という質問に対して、私はこの答えの改良版を投稿しました。そのバージョンにはlg3が含まれています。これは作者とコミッターの両方の情報を表示するので、実際に確認する必要があります。歴史的な理由でこの回答を残す（＆rep、認めます）が、本当に削除したいのですが。

2¢ ：私は通常~/.gitconfigファイルに投入する2つのエイリアスを持っています。

[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

1673
Slipp D. Thompson

ここでの回答の多くは素晴らしいですが、エイリアスや特別な設定をしなくても、単純に1行の回答を求めている人にとっては、次のようになります。

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

誰もがいつもgit logをやっているわけではありませんが、あなたがそれを必要なときに覚えているだけです：

" 犬 " = git log - a ll - d エコレート - o neline - g raph

enter image description here

846
Patoshi パトシ

テキスト出力のためにあなたは試すことができます：

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

または

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

または： ここ DAGグラフを描画するためのgraphvizエイリアス。

私は個人的には gitx 、gitk --allおよび gitnub を使います。

309
keo

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で生成してください。

206
fracz

TikZ＆PGF 、 gitdags の上に構築された小さなLaTeXパッケージで、ベクトルグラフィックのコミットグラフなどを簡単に作成できます。

既存のリポジトリのコミットグラフの自動生成は not の目的は gitdags です。それが作り出すグラフは 教育目的 のためだけに意図されています。

ASCII commit graphに代わるものとして、Gitの質問に対する回答のグラフを作成するためによく使用します。

これは単純なリベースの効果を示すそのようなグラフの例です。

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}
109
jubobs

Gitg はGNOME用のGitkとGitXのクローンです（KDEなどでも動作します）。これはきれいな色のグラフを表示します。

積極的に開発されています（2012年現在）。コミット（グラフノード）を時系列順または トポロジー 順に並べ替えたり、選択したブランチにつながらないコミットを非表示にしたりできます。

大規模なリポジトリや複雑な依存関係グラフではうまく動作します。

Linux-gitとlinux-2.6のリポジトリを表示したサンプルスクリーンショット：

linux-git

linux-2.6

73
Mechanical snail

SourceTreeは本当に良いものです。見栄えの良い中規模の履歴とブランチグラフが表示されます。 Windows 7以降およびMac OS X 10.6以降をサポートします。

enter image description here

http://www.sourcetreeapp.com/ /

57
太極者無極而生

私はHTML/Canvasを使ってかわいいgitのコミットグラフを生成できるツールを1つだけ書きました。

そしてそれを使いやすくするjQueryプラグインを提供してください。

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

プレビュー：

preview

56
Harry Lee

git-forest は私が1年以上使用している優れた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"

端末上での出力は次のようになります。

enter image description here

53
Tuxdude

関連する質問への回答 で見つけたGraphvizスクリプトに基づいて、 Rubyスクリプトをハックアップしました これはgitリポジトリの概要ビューを作成します。これはすべての線形履歴を取り除き、単に「おもしろい」コミット、つまり複数の親、複数の子供を持つコミット、またはブランチやタグで指し示されたコミットを示します。これが jquery 用に生成するグラフの一部です。

jquery sample

git-big-picture および BranchMaster は、タグ、ブランチ、マージなどがどのように関連しているかを表示するだけで、グラフの上位レベルの構造のみを表示しようとする類似のツールです。

この質問 にはさらにいくつかの選択肢があります。

41
Matt McHenry

私はgitログをきれいなSVGグラフに変換するためのWebツールを書きました： ビットブースター - オフラインコミットグラフ描画ツール

git log --pretty='%h|%p|%d'からの出力を直接ツールにアップロードしてから、「download graph.svg」リンクをクリックしてください。

このツールは純粋なクライアントサイドなので、あなたのGitデータは私のサーバーと共有されていません。 HTML + JSをローカルに保存して、 "file：///"というURLを使用して実行することもできます。 Ubuntu 12.04上のChrome 48およびFirefox 43で検証済み。

（blogspotブログエンジンを含む）あらゆるページに直接投稿できるHTMLを生成します。ここでいくつかのブログ記事を見てください。

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

これは、ツールによって生成されたサンプルHTMLファイルのスクリーンショットです。

http://bit-booster.com/graph.html （ツール）

39
G. Sylvie Davies

彼らがどのように見えたかによります。私は gitx を使います。

simple plot

git log --graphとgitkを24通りのタコのマージで比較できます（もともと http://clojure-log.n01se.net/date/2008-12-24.html から）：

24-way git octopus merge. Original URL was <code>http://lwn.net/images/ns/kernel/gitk-octopus.png</code>

36
Dustin

git tree、git stree、git vtreeの3つのカスタムコマンドを追加しました。私はその順番でそれらを見ていきます。

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

enter image description here

git streeと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で動作します。色値 'auto'はこのリリースで明らかにデビューしています。枝の名前が違う色になるので、これは素晴らしい追加です。これにより、たとえばローカルブランチとリモートブランチを区別しやすくなります。

34
gospes

より詳細なテキスト出力については、試してください。

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
30
kaoru

gitg ：gtkベースのリポジトリビューア、これは新しくても面白くて便利です
http://git.gnome.org/browse/gitg
現在使っています

27
saeedgnu

これは私のこの問題に関する見方です。

スクリーンショット

Screenshot

使用法：

git hist - 現在のブランチの履歴を表示する

git hist --all - すべてのブランチのグラフを表示する（リモートを含む）

git hist master devel - 2つ以上のブランチ間の関係を表示する

git hist --branches - すべてのローカルブランチを表示する

日付順ではなくトポロジ的にコミットをソートするために--topo-orderを追加しました（このエイリアスのデフォルト）

利点：

  • 普通の--decorateのように見えますので、異なるブランチ名のために別々の色で
  • コミッターEメールを追加します
  • コミットの相対日付と絶対日付を追加します
  • コミットを日付順に並べ替えます

セットアップ：

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)'"
26
drzymala

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

お分かりのように、次のものに基づいて、ほとんどキーストロークを節約するエイリアスです。

  • - 色：きれいに見える
  • --graph：両親を視覚化する
  • --date-order：レポを見て最もわかりやすい
  • --decorate：誰が誰ですか
  • --oneline：コミットについて知っておくべきことは何度もあります
  • --simplify-by-decoration：初見の基本（タグ、関連するマージ、ブランチのみ）
  • --all：このオプションがある場合とない場合のすべてのエイリアスを含むキーストロークの保存
  • --date = relative（％ar）：リポジトリ内でのアクティビティを理解します（ブランチがmasterの近くで、コミットが数ヶ月前になっていることがあります）

Gitの最近のバージョン（1.8.5以降）を参照すると、プレースホルダ％dの装飾で％C（自動）の恩恵を受けることができます。

ここから必要なのは、 gitrevisions をよく理解して、必要なものをすべてフィルタリングすることです（master..developのようなものです。ここで、--simplify-mergesは、長期的なブランチに役立ちます）

コマンドラインの背後にある力はあなたのニーズに基づいた迅速な設定です（リポジトリはユニークなキーログ設定ではないことを理解してください - 従って--numstat、--raw、または--name-statusを追加することが時々必要です。さらに、デフォルトではページャを通して出力が表示されるので（少ないと言うと）、結果の中をいつでもすばやく検索することができます。 gitgraph のようなプロジェクトでは

25
albfan

非常にわずかに微調整してください 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"

--allを省略することによって、あなたは今することができます

git lgBranch1 <branch name>

あるいは

git lgBranch1 --all
17
Peter Ajtai

グラフの履歴を見るために、git logに~/.gitconfigというエイリアスがあります。

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

これが整っていると、git lは以下のように出力します。

enter image description here

Git 2.12 +では log.graphColors configurationオプションを使ってグラフの線の色をカスタマイズすることさえできます。

ログのフォーマットに関しては、 --oneline に似ていますが、 著者名 （.mailmapを尊重する）と 相対的な著者日付 が追加されています。コミットハッシュなどにデフォルトの色を使用するようGitに指示する%C(auto)構文は、Git> = 1.8.3 でサポートされていることに注意してください。

14
Eugene Yarmash

GitGraph

Gitリポジトリのコミット履歴のPNGまたはSVG表現を生成します。

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

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

これは私の端末のバリエーションで、ここでの多くの答えと似ています。 Wordの折り返しを防ぐためにlessに渡されるフラグを調整するのが好きです。

example output

コマンドは少し面倒なので、クイックアクセスのためにこれをエイリアスに設定しました。

11
Andy

私はtighttps://github.com/jonas/tig 、git用のずっと良いコマンドラインツールを提案します。

自作を使用してmacOSにtigをインストールすることができます。

$ brew install tig
$ tig

enter image description here

10
nodejh

gitkまたはgitk --allを試しましたか？しかし、それは関数としてprint/save imgを持っていません。

10
Adrian Panasiuk

Raphael Webグラフィックライブラリのデモの1つとしてファンキーなGitコミットグラフがあります。

デモは静的ですが、コードを取得して静的データを実際のデータセットと交換するのは十分に簡単なはずです。JSON形式のGit commit dataにすぎないと思います。

デモはこちらです： http://dmitrybaranovskiy.github.io/raphael/github/impact.html

6
Spudley

ditaa を試してください。任意のASCII図を画像に変換できます。 Gitブランチを念頭に置いて設計されたのではありませんが、その結果に感銘を受けました。

ソース（テキストファイル）：

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

コマンド：

Java -jar ditaa0_9.jar ascii-graph.txt

結果：

enter image description here

背景色、破線、さまざまな形状などもサポートされています。 例 を参照してください。

6
fracz

直接のツールについてはわかりませんが、データをドット形式にエクスポートしてgraphvizでレンダリングするスクリプトをハッキングすることができます。

5
Thomas

OSXユーザーのために、@ gospesの例を取っ​​てgsed（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が機能していないことについて。

4
markeissler

〜/ .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'
4
shuaihanhungry

リポジトリがGitlab上にある場合は、ブラウザでSVGとしてレンダリングされるので、そのグラフ表現を使用できます。

  • リポジトリのグラフビューに移動します。 https://gitlab.com/gitlab-org/gitter/webapp/network/develop

  • グラフを一番下までスクロールします（コミットが遅延ロードされます）。

  • ブラウザのインス​​ペクタを使ってSVG要素を新しいファイルにコピーします。

  • 好みのレンダラで開きます。インクスケープ

enter image description here

3
bugmenot123

この会話を見て私のお気に入りのgit-colaとgit-dagを使用しようとしました。 View->DAG...からgit-colaを実行し、 Log： master --を--allに置き換えると、すべての分岐を含むきれいなグラフが表示されます。

2
Aleksey Kontsevich

'Slipp D. Thompson'の答えに加えて、私はあなたが同じ装飾を持つがコミットによる単一行でこのエイリアスを追加することを提案します。

git config --global alias.tre "log --graph --decorate --pretty=oneline --abbrev-commit --all --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)'"
2
Lyes CHIOUKH