概要

コードで作図できるでおなじみのmermaidを使ってGitのブランチ図の記載方法をまとめる。 今回は作図される図のテーマの設定方法について簡単にまとめる。

スタイルについて

ブランチのテーマをプリセットから設定

図のテーマは下記のいずれかから選択する事ができる。

• base
• forest
• dark
• default
• neutral

下記の様に'theme': 'テーマ名'のように指定することでテーマを指定する。 ※2024/11/11現在 テーマ名と表示テーマが一致していない気がする。darkを指定するとダーク系ではないテーマがあたっている気がする。 プリセットのブランチテーマの指定は他の設定と抱き合わせで設定する事ができるはず。

---
title: ブランチのテーマ
---
%%{init: { 'theme': 'forest' } }%%
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' tag: 'release-YYYYMMDD-XX'

↓作図結果

独自のブランチカラーを使ってテーマを変更

下記のように「どのブランチをどの色にするか」をカラーコードを使って設定する事ができる。 ブランチの色はブランチの定義順番に依存するので先にbranch 'ブランチ名'でブランチを一通り定義してからswitchしてそれぞれの作図を開始するようにしたほうが色の指定がしやすいかもしれない。 独自のブランチカラーの設定は他の設定と抱き合わせで設定する事ができる。

Mermaid allows you to set the colors for up-to 8 branches specific highlight commit

と書かれているので指定は8ブランチ（git7）までが限界っぽい。

https://mermaid.js.org/syntax/gitgraph.html#customizing-highlight-commit-colors

---
title: ブランチのテーマ
---
%%{init: { 'theme': 'default' , 'themeVariables': {
   'git0': '#ff0000',
   'git1': '#00ffff'
}}}%%
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' tag: 'release-YYYYMMDD-XX'

↓作図結果

コミットのテーマ変更

下記のように「コミットラベルをどの色にするか」をカラーコードを使って設定する事ができる。 コミットラベルの色は他の設定と抱き合わせで設定する事ができる。

---
title: コミットのテーマ
---
%%{init: { 'themeVariables': {
   'commitLabelColor': '#ff0000',
   'commitLabelBackground': '#00ff00'
}}}%%
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' tag: 'release-YYYYMMDD-XX'

↓作図結果

タグのラベルの文字サイズ変更

下記のように「タグの文字サイズ」をpxを使って設定する事ができる タグの文字サイズは他の設定と抱き合わせで設定する事ができる。 タグのラベルの文字サイズは他の設定と抱き合わせで設定する事ができる。

---
title: タグのポイント数
---
%%{init: { 'themeVariables': {
   'tagLabelFontSize': '16px'
}}}%%
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' tag: 'release-YYYYMMDD-XX'

↓作図結果

タグのラベルのテーマ変更

下記のように「タグのラベルのテーマ」をカラーコードを使って設定する事ができる タグのテーマ変更は他の設定と抱き合わせで設定する事ができる。

---
title: タグのテーマ設定
---
%%{init: { 'themeVariables': {
   'tagLabelColor': '#ff0000',
   'tagLabelBackground': '#00ff00',
   'tagLabelBorder': '#0000ff'
}}}%%
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' tag: 'release-YYYYMMDD-XX'

↓作図結果

その他の設定について

デフォルト状態はこちら

---
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}} }%%がデフォルトで設定されている。

↓作図結果

図の向きの設定

図の向きを設定で変更する事ができる。 図の向きは

• 左から右（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'

↓作図結果

参考文献

https://mermaid.js.org/syntax/gitgraph.html#gitgraph-specific-configuration-options

https://mermaid.js.org/syntax/gitgraph.html#themes