Go to Qiita Advent Calendar Top
LoginSignup
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Day 16

ひとりマーメイド Advent Calendar 2022

@hirokiwa(ひろき)

マーメイド#16 gitグラフ2

Last updated at Posted at 2022-12-21

ひとりマーメイド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グラフの記法について紹介しました。かなり細かくスタイルをカスタムできるんですね。

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

参考

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?