概要
コードで作図できるでおなじみのmermaidを使ってGitのブランチ図の記載方法をまとめる。
今回は作図時の設定に絞って説明する。
内容
デフォルト状態はこちら
---
title: デフォルト状態
---
gitGraph
commit id: 'First commit'
commit id: 'A commit'
branch 'feature'
switch 'main'
commit id: 'Hoge commit'
switch 'feature'
commit id: 'B commit'
cherry-pick id: 'Hoge commit'
switch 'main'
commit id: 'C commit'
merge 'feature'
↓作図結果
ブランチラベルの非表示
ブランチラベルの表示非表示を設定する方法を記載する。
%%{init: {'gitGraph': {'showBranches': false}} }%%のように記載するとブランチラベルを非表示にできる。
ちなみに何も指定しないと%%{init: {'gitGraph': {'showBranches': true}} }%%が指定されている。
---
title: ブランチラベルの非表示
---
%%{init: {'gitGraph': {'showBranches': false}} }%%
gitGraph
commit id: 'First commit'
commit id: 'A commit'
branch 'feature'
switch 'main'
commit id: 'Hoge commit'
switch 'feature'
commit id: 'B commit'
cherry-pick id: 'Hoge commit'
switch 'main'
commit id: 'C commit'
merge 'feature'
↓作図結果
↓設定前の作図結果
コミットラベルの非表示
コミットラベルの表示非表示を設定する方法を記載する。
%%{init: {'gitGraph': {'showCommitLabel': false}} }%%のように記載するとコミットラベルを非表示にできる。
ちなみに何も指定しないと%%{init: {'gitGraph': {'showCommitLabel': true}} }%%が指定されている。
---
title: コミットラベルの非表示
---
%%{init: {'gitGraph': {'showCommitLabel': false}} }%%
gitGraph
commit id: 'First commit'
commit id: 'A commit'
branch 'feature'
switch 'main'
commit id: 'Hoge commit'
switch 'feature'
commit id: 'B commit'
cherry-pick id: 'Hoge commit'
switch 'main'
commit id: 'C commit'
merge 'feature'
↓作図結果
↓設定前の作図結果
デフォルトブランチ名の変更
デフォルトブランチ名をmainから変更する方法をまとめる。
%%{init: {'gitGraph': {'mainBranchName': '任意のデフォルトブランチ名'}} }%%のように記載するとデフォルトブランチ名を任意のブランチ名に変更する事ができる。
デフォルトブランチ名をデフォルト設定の「main」から「ほげほげ」に変更する場合は下記のようになる。デフォルトブランチ設定だけではなくswitch mainなどのデフォルトブランチを指定した記載の修正も行う必要がある。
---
title: デフォルトブランチ名の変更
---
%%{init: {'gitGraph': {'mainBranchName': 'ほげほげ'}} }%%
gitGraph
commit id: 'First commit'
commit id: 'A commit'
branch 'feature'
switch 'ほげほげ'
commit id: 'Hoge commit'
switch 'feature'
commit id: 'B commit'
cherry-pick id: 'Hoge commit'
switch 'ほげほげ'
commit id: 'C commit'
merge 'feature'
↓作図結果
↓設定前の作図結果
ブランチ表示優先度の設定
デフォルトブランチ（mainやmasterなど）以外を最も上部に表示したい場合の設定項目である。
%%{init: {'gitGraph': {'mainBranchOrder': 1}} }%%などのように設定する
何も指定していない状態だと%%{init: {'gitGraph': {'mainBranchOrder': 0}} }%%がデフォルトで設定されている。
細かいことは筆者もわかっておらず、現状引数で「0以外を指定すると2番目に指定したブランチが最も上部に表示される」くらいしか分かっていない。
下記のように指定してfeature 1ブランチを最も上部に表示してみる。
---
title: ブランチ表示優先度の設定
---
%%{init: {'gitGraph': {'mainBranchOrder': 1}} }%%
gitGraph
commit id: 'First commit'
commit id: 'A commit'
branch 'feature 1'
branch 'feature 2'
switch 'main'
commit id: 'Hoge commit'
switch 'feature 1'
commit id: 'B commit'
switch 'feature 2'
commit id: 'X commit'
switch 'feature 1'
cherry-pick id: 'Hoge commit'
switch 'main'
commit id: 'C commit'
merge 'feature 1'
↓作図結果
↓設定前の作図結果
コミット作図位置の整列
mermaidのGitブランチ図は指定時系列に従って作図が行われる。
今回でいうと「Hoge commit」の後に「B commit」が入っているように作図されている。
本設定は「Hoge commit」のコミットポイントの作図箇所と「B commit」のコミットポイントの作図箇所を揃える事ができる。
%%{init: {'gitGraph': {'parallelCommits': true}} }%%のように設定すると問答無用ですべてのコミットポイントを揃える。
特に設定しないと%%{init: {'gitGraph': {'parallelCommits': false}} }%%がデフォルトで設定されている。
---
title: コミット作図位置の整列
---
%%{init: {'gitGraph': {'parallelCommits': true}} }%%
gitGraph
commit id: 'First commit'
commit id: 'A commit'
branch 'feature'
switch 'main'
commit id: 'Hoge commit'
switch 'feature'
commit id: 'B commit'
cherry-pick id: 'Hoge commit'
switch 'main'
commit id: 'C commit'
merge 'feature'
↓作図結果
↓設定前の作図結果
図の向きの設定
図の向きを設定で変更する事ができる。
図の向きは
- 左から右（LR）
- 上から下（TB）
- 下から上（BT）
のいずれかから設定でき、デフォルトで左から右が設定されている。
下記のようにgitGraphの宣言の後にグラフの向きの指定を行う。
左から右
---
title: 左から右に表示
---
gitGraph LR:
commit id: 'First commit'
commit id: 'A commit'
branch 'feature'
switch 'main'
commit id: 'Hoge commit'
switch 'feature'
commit id: 'B commit'
cherry-pick id: 'Hoge commit'
switch 'main'
commit id: 'C commit'
merge 'feature'
↓作図結果
上から下
---
title: 上から下に表示
---
gitGraph TB:
commit id: 'First commit'
commit id: 'A commit'
branch 'feature'
switch 'main'
commit id: 'Hoge commit'
switch 'feature'
commit id: 'B commit'
cherry-pick id: 'Hoge commit'
switch 'main'
commit id: 'C commit'
merge 'feature'
↓作図結果
下から上
---
title: 下から上に表示
---
gitGraph BT:
commit id: 'First commit'
commit id: 'A commit'
branch 'feature'
switch 'main'
commit id: 'Hoge commit'
switch 'feature'
commit id: 'B commit'
cherry-pick id: 'Hoge commit'
switch 'main'
commit id: 'C commit'
merge 'feature'
↓作図結果
参考文献