Gitグラフ
Git グラフは、異なるブランチ上の git コミットと git 操作を可視化した表現です。
Git グラフは開発者や運用チームに特に役立ち、彼らの Git ブランチ戦略を共有するために使用できます。
Mermaid は Git グラフをレンダリングできます
コピー
埋め込み
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
Mermaid は基本的な git 操作をサポートします。例えば:
- commit ：現在のブランチ上の新しいコミットを表します。
- branch ：新しいブランチを作成して切り替え、同時にそれを現在のブランチに設定します。
- checkout ：既存のブランチに切り替え、それを現在のブランチに設定します。
- merge ：既存のブランチを現在のブランチにマージします。
これらの Git 操作を利用すると、Mermaid で Git グラフを非常に簡単かつ迅速に描画できます。エンティティ名は通常大文字で始まりますが、これについて広く認められた標準はなく、Mermaid でも必須ではありません。
注意：checkout と switch は互換的に使用できます。
構文
Git グラフの Mermaid 構文は非常に直接的で簡単です。宣言的なアプローチを採用し、各コミットはコード内での出現順に Git グラフのタイムラインに描画されます。基本的に、各コマンドの挿入順に従います。
まず、gitGraph 構文を使用して図のタイプを宣言します。gitGraph 構文は、Git グラフを描画したいことを Mermaid に伝え、それに応じて図のコードを解析します。
各 Git グラフは main ブランチで初期化されます。異なるブランチを作成しない限り、デフォルトでコミットはメインブランチに入ります。これは git の仕組みによるもので、開始時には常にメインブランチから始まります。デフォルトでは、main ブランチが現在のブランチに設定されます。
commit 構文を使用して現在のブランチにコミットを 1 つ登録できます。これがどのように機能するか見てみましょう:
デフォルトブランチ main の 3 つのコミットを示すシンプルな git グラフ:
コピー
埋め込み
gitGraph
commit
commit
commit
前の例をよく見ると、デフォルトブランチ main と 3 つのコミットがあることがわかります。また、デフォルトでは、各コミットに一意でランダムな ID が付与されることに注意してください。
カスタムコミット ID を追加
あるコミットについて、宣言時に id 属性でカスタム ID を指定し、次にコロン：を付け、二重引用符内にカスタム値を記述できます。
以下の図で、これがどのように機能するか見てみましょう:
コピー
埋め込み
gitGraph
commit id: "Alpha"
commit id: "Beta"
commit id: "Gamma"
在此示例中，我们给提交分配了自定义 ID。
コミットタイプを変更
Mermaid では、コミットには 3 つのタイプがあり、図でのレンダリング方法が少し異なります。これらのタイプは:
- NORMAL ：デフォルトのコミットタイプで、実心円で表されます
- REVERSE ：コミットが逆方向のコミットであることを強調し、交差した実心円で表されます。
- HIGHLIGHT ：特定のコミットをハイライトし、実心長方形で表されます。
特定のコミットについて、宣言時に type 属性を使用してそのタイプを指定し、その後にコロン : と上記で説明した必要なタイプオプションを続けます。例：commit type:
注意：コミットタイプを指定しない場合、デフォルトで NORMAL が選択されます
以下の図で、これらの異なるタイプのコミットがどのように行われるか見てみましょう:
コピー
埋め込み
gitGraph
commit id: "Normal"
commit
commit id: "Reverse" type: REVERSE
commit
commit id: "Highlight" type: HIGHLIGHT
commit
この例では、各コミットに異なるタイプを指定しました。また、コミットを宣言する際に id と type を同時に含めている方法を見てください。
タグを追加
特定のコミットについて、tag でそれを装飾できます。git world のタグやリリースバージョンの概念に似ています。コミットを宣言する際に tag 属性でカスタムタグを付加し、その後にコロン：を続け、二重引用符内にカスタム値を記述できます。
コピー
埋め込み
gitGraph
commit
commit id: "Normal" tag: "v1.0.0"
commit
commit id: "Reverse" type: REVERSE tag: "RC_1"
commit
commit id: "Highlight" type: HIGHLIGHT tag: "8.8.4"
commit
この例では、コミットにカスタムタグを設定しました。
新しいブランチを作成
Mermaid で新しいブランチを作成するには、branch 構文を使用できます。また、新しいブランチの名前を指定する必要があります。名前は一意である必要があり、既存のブランチの名前にはできません。
Mermaid が branch 構文を読み取ると、新しいブランチが作成され、現在のブランチに設定されます。Git グラフで新しいブランチを作成してそのブランチに切り替えるのと同じです。
コピー
埋め込み
gitGraph
commit
commit
branch develop
commit
commit
commit
この例では、デフォルトの main ブランチから始めて、その上に 2 つのコミットをプッシュしたことがわかります。次に develop ブランチを作成し、その後すべてのコミットは develop ブランチに配置されます。それが現在のブランチになったためです。
既存のブランチをチェックアウト
Mermaid で既存のブランチに切り替えるには、checkout 構文を使用でき、同時に既存のブランチの名前を指定する必要があります。指定した名前のブランチが見つからない場合、コンソールエラーになります。使用例：checkout develop
Mermaid が checkout 構文を読み取ると、指定した名前のブランチが見つけられ、現在のブランチに設定されます。これは Git でブランチをチェックアウトするのと同じです。
コピー
埋め込み
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
この例では、まずデフォルトの main ブランチから始めて、その上に 2 回コミットをプッシュしました。次に develop ブランチを作成し、その後 3 つのコミットすべてが develop ブランチに配置されます。それが現在のブランチになったためです。その後、checkout 構文を使用して現在のブランチを main に設定し、その後のすべてのコミットは main ブランチに記録されます。
2 つのブランチをマージ
Mermaid で既存のブランチをマージまたは接続するには、merge 構文を使用する必要があります。同時に、マージする既存のブランチの名前を指定する必要があります。指定した名前のブランチが見つからない場合、コンソールにエラーが表示されます。さらに、2 つの独立したブランチのみをマージでき、1 つのブランチを自身とマージすることはできません。
構文例：merge develop
Mermaid が merge 構文を読み取ると、指定したブランチとその最後のコミットを見つけ、それを現在のブランチの最後のコミットとマージします。実心の二重円で表されます。
以下は 2 つのブランチをマージする例です:
コピー
埋め込み
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
merge develop
commit
commit
この例では、まず main ブランチから始めて、その上に 2 回コミットをプッシュしました。次に develop ブランチを作成し、develop ブランチに 3 つのコミットをプッシュしました。その後、checkout 構文を使用して現在のブランチを main に設定し、その後のすべてのコミットは main ブランチに対して行われます。最後に、develop ブランチを main ブランチにマージし、マージコミットを生成しました。この時点で現在のブランチは依然として main であるため、最後の 2 つのコミットはそのブランチに記録されます。
マージに同様の属性を追加することもできます:
- id はカスタム ID でデフォルト ID を上書きします
- tag はカスタムタグをマージコミットに追加します
- type はマージコミットのデフォルトタイプを上書きします。前述の他のコミットタイプを使用できます。
コピー
埋め込み
gitGraph
commit id: "1"
commit id: "2"
branch nice_feature
checkout nice_feature
commit id: "3"
checkout main
commit id: "4"
checkout nice_feature
branch very_nice_feature
checkout very_nice_feature
commit id: "5"
checkout main
commit id: "6"
checkout nice_feature
commit id: "7"
checkout main
merge nice_feature id: "customID" tag: "customTag" type: REVERSE
checkout very_nice_feature
commit id: "8"
checkout main
commit id: "9"
別のブランチから選択的にコミットをマージ
Mermaid は 1 つのコミットを別のブランチから現在のブランチにチェリーピックすることをサポートしています。cherry-pick 構文を使用して別のブランチからコミットをチェリーピックすることもできます。
cherry-pick 構文を使用するには、id 属性で id を指定し、次にコロン : の後に目的のコミット id を記述し、二重引用符で囲む必要があります。例：
ここに注意すべきいくつかの重要なルールがあります:
- 既存のコミットを選択するには id を指定する必要があります。指定されたコミット ID が存在しない場合、エラーになります。そのためには、commit id:$value の形式を使用してコミットを宣言してください。
- 指定されたコミットは現在のブランチ上に存在してはならず、チェリーピックされるコミットは常に現在のブランチとは異なるブランチからのものでなければなりません。
- 現在のブランチには少なくとも 1 つのコミットが必要で、その後でなければ cherry-pick できません。そうでない場合はエラーになります。
- マージコミットをチェリーピックする場合、親コミット ID を指定する必要があります。parent 属性を省略するか、無効な親コミット ID を指定すると、エラーが発生します。
- 指定された親コミットは、チェリーピックしているマージコミットの直接の親コミットでなければなりません。
コピー
埋め込み
gitGraph
commit id: "ZERO"
branch develop
branch release
commit id:"A"
checkout main
commit id:"ONE"
checkout develop
commit id:"B"
checkout main
merge develop id:"MERGE"
commit id:"TWO"
checkout release
cherry-pick id:"MERGE" parent:"B"
commit id:"THREE"
checkout develop
commit id:"C"
特定の構成オプション
Mermaid Git グラフでは以下のオプションを設定できます:
- showBranches ：ブール値、デフォルトは true。false に設定した場合、ブランチは表示されません。
- showCommitLabel ：ブール値、デフォルトは true。false に設定した場合、コミットラベルは表示されません。
- mainBranchName ：文字列、デフォルトは main。デフォルトブランチの名前。
- mainBranchOrder ：ブランチリスト内のメインブランチの位置。デフォルトは 0 で、これはデフォルトで main ブランチが 1 番目に配置されることを意味します。
- parallelCommits ：ブール値、デフォルトは false。true に設定した場合、親から離れたコミットが同じ階層に表示されます。
ブランチ名と接続線を非表示
時には、ブランチ名と接続線を非表示にしたい場合があります。showBranches 構文を使用してこれを行うことができます。デフォルトではその値は true で、指示を使用して false に設定できます。
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: false
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
コミットラベルのレイアウト：回転または水平
Mermaid は 2 つのタイプのコミットラベルレイアウトをサポートしています。デフォルトのレイアウトは回転で、ラベルがコミットの円の下に配置され、可読性を高めるために 45 度回転されることを意味します。これは長いラベルを持つコミットに特に役立ちます。
もう 1 つのタイプは水平で、ラベルがコミットの円の下に配置され、水平方向に中央揃えで表示され、回転しないことを意味します。これは短いラベルを持つコミットに特に役立ちます。
指示で rotateCommitLabel 構文を使用してコミットラベルのレイアウトを変更できます。デフォルトは true で、これはコミットラベルが回転することを意味します。
使用例：コミットラベルを回転
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
rotateCommitLabel: true
---
gitGraph
commit id: "feat(api): ..."
commit id: "a"
commit id: "b"
commit id: "fix(client): .extra long label.."
branch c2
commit id: "feat(modules): ..."
commit id: "test(client): ..."
checkout main
commit id: "fix(api): ..."
commit id: "ci: ..."
branch b1
commit
branch b2
commit
使用例：コミットラベルを水平に
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
rotateCommitLabel: false
---
gitGraph
commit id: "feat(api): ..."
commit id: "a"
commit id: "b"
commit id: "fix(client): .extra long label.."
branch c2
commit id: "feat(modules): ..."
commit id: "test(client): ..."
checkout main
commit id: "fix(api): ..."
commit id: "ci: ..."
branch b1
commit
branch b2
commit
コミットラベルを非表示
時には、コミットラベルを非表示にしたい場合があります。showCommitLabel 構文を使用してこれを行うことができます。デフォルトではその値は true で、指示を使用して false に設定できます。
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: false
showCommitLabel: false
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
メインブランチ名をカスタマイズ
時には、メインブランチの名前をカスタマイズしたい場合があります。mainBranchName 構文を使用してこれを行うことができます。デフォルトではその値は main で、指示を使用して任意の文字列に設定できます。
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
mainBranchName: 'MetroLine1'
---
gitGraph
commit id:"NewYork"
commit id:"Dallas"
branch MetroLine2
commit id:"LosAngeles"
commit id:"Chicago"
commit id:"Houston"
branch MetroLine3
commit id:"Phoenix"
commit type: HIGHLIGHT id:"Denver"
commit id:"Boston"
checkout MetroLine1
commit id:"Atlanta"
merge MetroLine3
commit id:"Miami"
commit id:"Washington"
merge MetroLine2 tag:"MY JUNCTION"
commit id:"Boston"
commit id:"Detroit"
commit type:REVERSE id:"SanFrancisco"
Mermaid を使用して作成された架空の地下鉄路線図を見てください。ここでは、デフォルトのメインブランチ名を MetroLine1 に変更します。
ブランチの順序をカスタマイズ
Mermaid では、デフォルトで、ブランチは図のコードで定義または出現する順序で表示されます。
時には、ブランチの順序をカスタマイズしたい場合があります。ブランチ定義の横に order 構文を使用して実現でき、正の数に設定できます。
Mermaid は order 構文で指定された優先順序に従います。
- メインブランチはデフォルトの順序値が 0 であるため、常に最初に表示されます。（構成の mainBranchOrder 構文でその順序が変更され、0 から変わった場合を除きます）
- 次に、order のないすべてのブランチは、図のコードに出現する順序で表示されます。
- 次に、order を持つすべてのブランチは、その order 値の順序で表示されます。
すべてのブランチの順序を完全に制御するには、すべてのブランチに order を定義する必要があります。
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
---
gitGraph
commit
branch test1 order: 3
branch test2 order: 2
branch test3 order: 1
上の図では、すべてのブランチが定義された順序に従っています。
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
mainBranchOrder: 2
---
gitGraph
commit
branch test1 order: 3
branch test2
branch test3
branch test4 order: 1
上の図では、順序が指定されていないすべてのブランチが定義された順序で描画されます。その後、test4 ブランチが描画されます。その順序が 1 であるためです。次に、main ブランチが描画されます。その順序が 2 であるためです。最後に、test1 ブランチが描画されます。その順序が 3 であるためです。
注意：mainBranchOrder を 2 に上書きしたため、main ブランチは開始時に描画されず、順序に従って表示されます。
ここでは、デフォルトのメインブランチ名を MetroLine1 に変更します。
方向
Mermaid は 3 つの方向をサポートしています：左から右（デフォルト）、上から下、下から上です。
左から右（デフォルト、LR:）
Mermaid では、デフォルトの方向は左から右に実行され、ブランチは互いに重なって積み重なります。
ただし、gitGraph 構文の後に LR: を使用してこの値を明示的に設定できます。
コピー
埋め込み
gitGraph LR:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
上から下 (TB:)
上から下の方向では、コミットは図の上部から下部へと実行され、ブランチは並んで配置されます。
このように図を方向付けるには、gitGraph 構文の後に TB: を追加する必要があります。
コピー
埋め込み
gitGraph TB:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
下から上 (BT:)
下から上の方向では、コミットは図の下部から上部へと実行され、ブランチは並んで配置されます。
このように図を方向付けるには、gitGraph 構文の後に BT: を追加する必要があります。
コピー
埋め込み
gitGraph BT:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
一時的なコミット（parallelCommits: false）
コピー
埋め込み
---
config:
gitGraph:
parallelCommits: false
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
並列コミット (parallelCommits: true)
コピー
埋め込み
---
config:
gitGraph:
parallelCommits: true
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
テーマ
Mermaid は一連のカスタムテーマをサポートしており、それらを使用して自分に合ったテーマを見つけることができます。備考：既存のテーマの変数を上書きして、独自のカスタムテーマを作成できます。
以下はさまざまなカスタムテーマオプションです:
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
テーマを変更するには、initialize 構文を使用できます。
ベーステーマ
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'base'
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
フォレストテーマ
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'forest'
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
デフォルトテーマ
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'default'
---
gitGraph
commit type:HIGHLIGHT
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
ダークテーマ
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'dark'
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
ニュートラルテーマ
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'neutral'
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
テーマ変数を使用してカスタマイズする
Mermaid では、テーマ変数を使用して図をカスタマイズできます。これらの変数は図のさまざまな要素の外観とスタイルを制御します。
理解を深めるために、テーマ default を例に挙げます。テーマ変数のデフォルト値はテーマから自動的に取得されます。
default テーマを使用してブランチの色を設定します:
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'default'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
Mermaid はデフォルト値を上書きするためのテーマ変数をサポートしており、最大 8 個のブランチを上書きできます。つまり、テーマ変数を使用して最大 8 個のブランチの色を設定できます。8 個を超えるブランチでは、テーマ変数が循環的に繰り返し使用されます。つまり、9 番目のブランチは 1 番目のブランチのスタイルを使用します。
ブランチの色をカスタマイズ
git0 から git7 のテーマ変数を使用してブランチの色をカスタマイズできます。Mermaid では、最大 8 個のブランチの色を設定できます。git0 変数が最初のブランチの色を制御し、git1 が 2 番目のブランチの色を制御し、以下同様です。
注意：これらのテーマ変数のデフォルト値は、選択されたテーマから取得されます。デフォルト値を上書きしたい場合は、initialize 構文を使用してカスタムテーマ変数値を追加できます。
例：
それでは、git0 から git3 の変数のデフォルト値を上書きしましょう:
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
'git0': '#ff0000'
'git1': '#00ff00'
'git2': '#0000ff'
'git3': '#ff00ff'
'git4': '#00ffff'
'git5': '#ffff00'
'git6': '#ff00ff'
'git7': '#00ffff'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
ブランチラベルの色をカスタマイズ
gitBranchLabel0 から gitBranchLabel7 のテーマ変数を使用してブランチラベルの色をカスタマイズできます。Mermaid では、最大 8 個のブランチの色を設定できます。gitBranchLabel0 変数が最初のブランチラベルの色を制御し、gitBranchLabel1 変数が 2 番目のブランチラベルの色を制御し、以下同様です。
default テーマを使用してブランチラベルの色を設定する方法を見てみましょう:
それでは、gitBranchLabel0 から gitBranchLabel2 の変数のデフォルト値を上書きしましょう:
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
'gitBranchLabel0': '#ffffff'
'gitBranchLabel1': '#ffffff'
'gitBranchLabel2': '#ffffff'
'gitBranchLabel3': '#ffffff'
'gitBranchLabel4': '#ffffff'
'gitBranchLabel5': '#ffffff'
'gitBranchLabel6': '#ffffff'
'gitBranchLabel7': '#ffffff'
'gitBranchLabel8': '#ffffff'
'gitBranchLabel9': '#ffffff'
---
gitGraph
checkout main
branch branch1
branch branch2
branch branch3
branch branch4
branch branch5
branch branch6
branch branch7
branch branch8
branch branch9
checkout branch1
commit
ここでは、branch8 と branch9 の色とスタイルが、それぞれインデックス位置 0（main）と 1（branch1）のブランチから選択されていることがわかります。
コミットの色をカスタマイズ
commitLabelColor と commitLabelBackground のテーマ変数を使用して、コミットラベルの色と背景色をそれぞれカスタマイズできます。
例：それでは、commitLabelColor から commitLabelBackground の変数のデフォルト値を上書きしましょう:
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
commitLabelColor: '#ff0000'
commitLabelBackground: '#00ff00'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
mermaid.grammar_mermaid_commit_label_define_label_font_big_small
commitLabelFontSize テーマ変数を使用してコミットラベルのフォントサイズをカスタマイズできます。
例：それでは、commitLabelFontSize 変数のデフォルト値を上書きしましょう:
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
commitLabelColor: '#ff0000'
commitLabelBackground: '#00ff00'
commitLabelFontSize: '16px'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
ラベルのフォントサイズをカスタマイズ
tagLabelFontSize テーマ変数を使用してラベルのフォントサイズをカスタマイズできます。
例：それでは、tagLabelFontSize 変数のデフォルト値を上書きしましょう:
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
commitLabelColor: '#ff0000'
commitLabelBackground: '#00ff00'
tagLabelFontSize: '16px'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
ラベルの色をカスタマイズ
tagLabelColor、tagLabelBackground、tagLabelBorder のテーマ変数を使用してラベルをカスタマイズし、それぞれラベルの文字色、ラベルの背景色、ラベルの枠線を変更できます。
例：それでは、tagLabelColor、tagLabelBackground、tagLabelBorder の変数のデフォルト値を上書きしましょう:
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
tagLabelColor: '#ff0000'
tagLabelBackground: '#00ff00'
tagLabelBorder: '#0000ff'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
ハイライトコミットの色をカスタマイズ
gitInv0 から gitInv7 のテーマ変数を使用して、所属するブランチに応じてハイライトコミットの色をカスタマイズできます。Mermaid では、最大 8 個のブランチに特定のハイライトコミットの色を設定できます。gitInv0 変数が最初のブランチのハイライトコミットの色を制御し、gitInv1 変数が 2 番目のブランチのハイライトコミットの色を制御し、以下同様です。
それでは、git0 から git3 の変数のデフォルト値を上書きしましょう:
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
'gitInv0': '#ff0000'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
