ひとりマーメイド16日目
gitグラフ2

概要

マーメイドエンジニアのひろきです。こんにちは。
最近流行り（流行らせたい）のマーメイドについて理解を深めていこうと思います。

この記事ではgitグラフの記述について紹介します！

↓↓前回の記事はこちら

まーめいど！ぎっと！

前回の記事ではマーメイドにおけるgitグラフの基本的な記法を紹介しました。gitグラフはコマンド入力のように直感的に記述することができます。

今日は主にgitグラフの装飾について紹介します。

オプション

ブランチ名の非表示

showBranchesでブランチ名の表示を制御することができます。デフォルトではtrueが指定されています。

showBranches	ブランチ名
true	表示
false	非表示

表示
%%{init: {'gitGraph': {'showBranches': true}} }%%

mermaid

%%{init:{
    'gitGraph':{
        'showBranches': true
}}}%%

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    branch feature_1
    checkout feature_1
    commit
    checkout develop
    checkout feature_1
    commit
    checkout develop
    merge feature_1
    commit
    commit
    checkout main
    commit
    commit

非表示
%%{init: {'gitGraph': {'showBranches': false}} }%%

mermaid

%%{init:{
    'gitGraph':{
        'showBranches': false
}}}%%

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    branch feature_1
    checkout feature_1
    commit
    checkout develop
    checkout feature_1
    commit
    checkout develop
    merge feature_1
    commit
    commit
    checkout main
    commit
    commit

コミットラベルの非表示

showCommitLabelでコミットラベルの表示を制御することができます。デフォルトではtrueが指定されています。

showCommitLabel	コミットラベル
true	表示
false	非表示

表示
%%{init: {'gitGraph': {'showCommitLabel': true}} }%%

mermaid

%%{init:{
    'gitGraph':{
        'showCommitLabel': true
}}}%%

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    branch feature_1
    checkout feature_1
    commit
    checkout develop
    checkout feature_1
    commit
    checkout develop
    merge feature_1
    commit
    commit
    checkout main
    commit
    commit

非表示
%%{init: {'gitGraph': {'showCommitLabel': false}} }%%

mermaid

%%{init:{
    'gitGraph':{
        'showCommitLabel': false
}}}%%

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    branch feature_1
    checkout feature_1
    commit
    checkout develop
    checkout feature_1
    commit
    checkout develop
    merge feature_1
    commit
    commit
    checkout main
    commit
    commit

デフォルトブランチの名前

mainBranchNameデフォルトブランチの名前を宣言することができます。デフォルトではmainで初期化されます。

%%{init: {'gitGraph': {'mainBranchName': 'BRANCH_NAME'}} }%%

mermaid

%%{init:{
    'gitGraph':{
        'mainBranchName':'my_branch'
}}}%%

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    branch feature_1
    checkout feature_1
    commit
    checkout develop
    checkout feature_1
    commit
    checkout develop
    merge feature_1
    commit
    commit
    checkout my_branch
    commit
    commit

コミットラベルの水平表示

rotateCommitLabelでコミットラベルを水平に表示することができます。デフォルトではtrueが指定され、斜め45°で表示されます。

rotateCommitLabel	コミットラベル
true	斜め
false	水平

斜め
%%{init: {'gitGraph': {'rotateCommitLabel': true}} }%%

mermaid

%%{init:{
    'gitGraph':{
        'rotateCommitLabel':true
}}}%%

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    branch feature_1
    checkout feature_1
    commit
    checkout develop
    checkout feature_1
    commit
    checkout develop
    merge feature_1
    commit
    commit
    checkout main
    commit
    commit

水平
%%{init: {'gitGraph': {'rotateCommitLabel': false}} }%%

mermaid

%%{init:{
    'gitGraph':{
        'rotateCommitLabel':false
}}}%%

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    branch feature_1
    checkout feature_1
    commit
    checkout develop
    checkout feature_1
    commit
    checkout develop
    merge feature_1
    commit
    commit
    checkout main
    commit
    commit

ブランチの表示順

mainBranchOrdermainブランチの表示順位を指定することができます。デフォルトでは0が指定されます。
%%{init: {'gitGraph': {'mainBranchOrder': NUMBER}} }%%
そのほかのブランチの順番はorderで定義します。
branch BRANCH_NAME order:NUMBER

mermaid

%%{init:{
    'gitGraph':{
        'mainBranchOrder': 1
}}}%%

gitGraph
    commit
    commit
    branch develop order:0
    checkout develop
    commit
    branch feature_1 order:2
    checkout feature_1
    commit
    checkout develop
    checkout feature_1
    commit
    checkout develop
    merge feature_1
    commit
    commit
    checkout main
    commit
    commit

スタイリング

ディレクティブ内でthemeVariablesにより細かいスタイルを定義することができます。

ブランチカラー

git0~git7の最大8つのブランチに対して色を指定することができます。ブランチが8つを超えた場合、8色が循環してレンダリングされます。

オブジェクト形式でカラーコードを記述します。

mermaid

%%{init:{
    'themeVariables':{
        'git0': '#ff0000',
        'git1': '#00ff00',
        'git2': '#0000ff',
        'git3': '#ff00ff',
        'git4': '#00ffff',
        'git5': '#ffff00',
        'git6': '#ff00ff',
        'git7': '#00ffff'
}}}%%

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    branch feature_1
    checkout feature_1
    commit
    branch feature_2
    checkout feature_2
    commit
    branch feature_3
    checkout feature_3
    commit
    branch feature_4
    checkout feature_4
    commit

ブランチラベルカラー

ブランチラベルの文字の色を指定することができます。
gitBranchLabel0~gitBranchLabel7の最大8つのブランチラベルに対して文字の色を指定することができます。ブランチが8つを超えた場合、8色が循環してレンダリングされます。

ブランチカラーと同様にオブジェクト形式でカラーコードを記述します。

mermaid

%%{init:{
    'themeVariables':{
        'gitBranchLabel0': '#ff0000',
        'gitBranchLabel1': '#00ff00',
        'gitBranchLabel2': '#0000ff',
        'gitBranchLabel3': '#ff00ff',
        'gitBranchLabel4': '#00ffff',
        'gitBranchLabel5': '#ffff00',
        'gitBranchLabel6': '#ff00ff',
        'gitBranchLabel7': '#00ffff'
}}}%%

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    branch feature_1
    checkout feature_1
    commit
    branch feature_2
    checkout feature_2
    commit
    branch feature_3
    checkout feature_3
    commit
    branch feature_4
    checkout feature_4
    commit

コミットラベル

コミットラベルの文字の色と背景色を指定することができます。またフォントサイズの変更が可能です。

commitLabelColor:文字の色
commitLabelBackground:背景色
commitLabelFontSize:フォントサイズ

こちらも同様にオブジェクト形式でカラーコードを記述します。

mermaid

%%{init:{
    'themeVariables':{
        'commitLabelColor': '#FFFFFF',
        'commitLabelBackground': '#FF0000',
        'commitLabelFontSize': '20px'
}}}%%

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    branch feature_1
    checkout feature_1
    commit
    checkout develop
    checkout feature_1
    commit
    checkout develop
    merge feature_1
    commit
    commit
    checkout main
    commit
    commit

タグ

コミットラベルの文字の色と背景色を指定することができます。またフォントサイズの変更が可能です。

tagLabelColor:文字の色
tagLabelBorder:境界の色
tagLabelBackground:背景色
tagLabelFontSize:フォントサイズ

mermaid

%%{init:{
    'themeVariables':{
        'tagLabelColor': '#FFFFFF',
        'tagLabelBorder': '#FFFFFF',
        'tagLabelBackground': '#FF0000',
        'tagLabelFontSize': '15px'
}}}%%

gitGraph
    commit tag: "first"
    commit tag: "v.1.0.0"
    branch develop
    checkout develop
    commit tag: "branch"
    branch feature_1
    checkout feature_1
    commit tag: "add"
    checkout develop
    checkout feature_1
    commit tag: "rebased"
    checkout develop
    merge feature_1
    commit tag: "add"
    commit tag: "delete"
    checkout main
    commit tag:"v.2.0.0"
    commit tag:"v.3.0.0"

まとめ

gitグラフの記法について紹介しました。かなり細かくスタイルをカスタムできるんですね。

↓↓次回の記事はこちら！！

参考