git - Pretty Git ブランチグラフ

Question

いくつかの本や記事に、Git のブランチとコミットの非常に見栄えの良いグラフが掲載されているのを見てきました。Git 履歴の印刷可能な高品質の画像を作成するにはどうすればよいですか?

score 2132 · Accepted Answer

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

私の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

_{(注: fracz の、Jubobs の、またはHarry Lee のなど、この質問に対するより適切な回答が存在するようになりました!)}

score 413 · Accepted Answer

テキスト出力の場合は、次のことを試すことができます。

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

または：

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

または：DAGグラフを描画するためのGraphviz エイリアスは次のとおりです。

私は個人的に、、を使用gitxしgitk --allてgitnubいます。

score 290 · Accepted Answer

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で生成します。

score 140 · Accepted Answer

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

既存のリポジトリのコミットグラフの自動生成はの目的ではありませんgitdags。生成されるグラフは、教育目的のみを目的としています。

ASCII コミットグラフの代わりに、Git の質問に対する回答のグラフを作成するためによく使用します。

以下は、単純なリベースの効果を示すグラフの例です。

ここに画像の説明を入力

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

score 85 · Accepted Answer

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

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

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

linux-git および linux-2.6 リポジトリを示すスクリーンショットの例:

score 68 · Accepted Answer

HTML/Canvasを使用してきれいな Git コミットグラフを生成できるツールを 1 つ作成しました。

また、使いやすい jQuery プラグインを提供します。

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

プレビュー:

プレビュー

score 62 · Accepted Answer

Sourcetreeは本当に良いものです。見栄えの良い中サイズの履歴とブランチグラフが出力されます (以下は、いくつかのブランチを表示するためだけに、実験的な Git プロジェクトで実行されます)。Windows 7 以降および Mac OS X 10.6 以降をサポートします。

Sourcetree の出力例

score 58 · Accepted Answer

git-forestは、私が 1 年以上使用している優れた Perl スクリプトであり、git logコマンドを直接使用することはほとんどありません。

これらは、私がこのスクリプトで気に入っている点の一部です。

ユニコード文字を使用してグラフの線を描画し、グラフの線をより連続的に表示します。
通常のコマンド--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"

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

score 45 · Accepted Answer

関連する質問への回答で見つけた Graphviz スクリプトに基づいて、Git リポジトリの概要ビューを作成するRuby スクリプトをハックしました。それはすべての線形履歴を省略し、「興味深い」コミット、つまり複数の親、複数の子を持つコミット、またはブランチまたはタグによって指されているコミットのみを表示します。jQuery用に生成されるグラフのスニペットを次に示します。

jQuery サンプル

git-big-pictureとBranchMasterは、タグ、ブランチ、マージなどの関係のみを表示することで、グラフの高レベル構造のみを表示しようとする同様のツールです。

この質問にはさらにいくつかのオプションがあります。

score 45 · Accepted Answer

git tree、git streeおよびの 3 つのカスタムコマンドを追加しまし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、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」は、このリリースで明らかにデビューしています。ブランチ名が異なる色になるので、これは素晴らしい追加です。これにより、たとえば、ローカルブランチとリモートブランチを簡単に区別できます。

score 37 · Accepted Answer

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

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

score 37 · Accepted Answer

それは彼らがどのように見えたかによって異なります。次のような写真を作成するgitxを使用します。

単純なプロット

24 方向のタコのマージでgit log --graph対gitkを比較できます(元はhttp://clojure-log.n01se.net/date/2008-12-24.htmlから):

24 通りの Git octopus マージ。元の URL は http://lwn.net/images/ns/kernel/gitk-octopus.png でした。

score 29 · Accepted Answer

gitg : gtk ベースのリポジトリビューアー。これは新しいものですが、興味深くて便利です。

現在使用しています。

score 28 · Accepted Answer

私は時々gitgを使用しますが、いつもコマンドラインに戻ります。

[alias]
    # Quick look at all repositories
    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 the 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 the 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 repositories without subject body commits (Vim repository, 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

ご覧のとおり、以下に基づいて、ほぼキーストロークを節約するエイリアスです。

--color: クリアルック
--graph: 親を可視化
--date-order: 最も分かりやすいレポの見方
--decorate: 誰が誰だ
--oneline: 多くの場合、コミットについて知っておく必要があるすべてのこと
--simplify-by-decoration: 初見の基本 (タグ、関連するマージ、ブランチのみ)
--all: このオプションの有無にかかわらず、すべてのエイリアスでキーストロークを保存します
--date=relative (%ar): リポジトリでのアクティビティを理解します (ブランチが master の近くに数か月前にコミットされている場合があります)

Git の最近のバージョン (1.8.5 以降) では、装飾プレースホルダー %d で %C(auto) を利用できます。

ここから必要なのは、必要なものをフィルタリングするためのgitrevisionsをよく理解することだけです (master..develop のようなもので、--simplify-merges長期的なブランチに役立つ可能性があります)。

コマンドラインの背後にある機能は、ニーズに基づいて迅速に構成できることです (リポジトリは一意のキーログ構成ではないことを理解してください。そのため、--numstat、--raw、または --name-status を追加する必要がある場合があります。ここgit logとエイリアス高速で強力で、(時間をかけて) 達成できる最も美しいグラフです. さらに, 出力はデフォルトでページャーを介して表示されます (控えめに言っても) 結果の中をいつでもすばやく検索できます. 納得できませんか? プロジェクトで常に結果を解析できますgitgraphのように。

score 17 · Accepted Answer

Slipp の素晴らしい回答を微調整すると、彼のエイリアスを使用して 1 つのブランチのみをログに記録できます。

[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

score 14 · Accepted Answer

gitkまたはを試してくださいgitk --all。ただし、関数としての印刷/保存imgはありません。

score 14 · Accepted Answer

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

[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作成日が追加されています。コミットハッシュなどにデフォルトの色を使用するように Git に指示する構文は、Git >= 1.8.3でサポートされていることに注意してください。.mailmap%C(auto)

score 12 · Accepted Answer

ギットグラフ

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

score 6 · Accepted Answer

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

デモは静的ですが、コードを取得して、静的データをライブデータセットに交換するのは簡単なはずです。JSON 形式の Git コミットデータに過ぎないと思います。

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

score 5 · Accepted Answer

OS X ユーザーのために、私は @gospes の例を取り上げ、それを gsed ( Homebrewgnu-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

OS X の鍵は、最初に GNU sed (-r オプション付き) をインストールすることです。これは、システムにインストールされた sed を上書きせず、代わりに GNU sed を「gsed」としてインストールする Homebrew で最も簡単に実行できます。これが、OS X が機能しないことについて上でコメントした @SlippD.Thompson に役立つことを願っています。

score 4 · Accepted Answer

直接的なツールについてはわかりませんが、スクリプトをハックしてデータをドット形式にエクスポートし、Graphvizでレンダリングできるかもしれません。

score 2 · Accepted Answer

コミュニティのエイリアスは次のとおりgit lsです。git lsグラフを表示すると、各コミットは 1 行だけをカバーします。すべてが色付きで、役立つ情報が含まれています。他のブランチのコミット履歴を確認することもできます:

git config --global alias.ls '!f() { git log $1 --pretty=format:"%C(yellow)%h%Cred%d\\ %Creset%s%Cgreen\\ [%ae,%ar]" --decorate --graph; }; f'

使用法：

# shows commits graph on the current branch
git ls

# shows commits graph on the develop branch
git ls develop

グラフビューは次のとおりです。

git - Pretty Git ブランチ グラフ

36 に答える 36

Related

Reference

git - Pretty Git ブランチグラフ