Gitグラフ図

Gitグラフとは、さまざまなブランチでのGitコミットとGitアクション（コマンド）を図で表現したものです。

この種の図は、開発者やDevOpsチームがGitブランチ戦略を共有するのに特に役立ちます。たとえば、Gitフローの仕組みを視覚化するのが容易になります。

MermaidはGit図をレンダリングできます

Mermaidでは、次のような基本的なGit操作をサポートしています。

• commit: 現在のブランチでの新しいコミットを表します。
• branch: 新しいブランチを作成して切り替え、現在のブランチとして設定します。
• checkout: 既存のブランチをチェックアウトし、現在のブランチとして設定します。
• merge: 既存のブランチを現在のブランチにマージします。

これらの主要なGitコマンドを使用すると、MermaidでGitグラフを非常に簡単かつ迅速に描画できます。エンティティ名は多くの場合大文字で記述されますが、これに関する標準は受け入れられておらず、Mermaidでは必須ではありません。

注: checkoutとswitchは同じ意味で使用できます。

構文

GitグラフのMermaid構文は非常に単純で簡単です。宣言的なアプローチに従い、各コミットはコード内での発生/存在順に図のタイムラインに描画されます。基本的に、各コマンドの挿入順に従います。

まず、gitgraphキーワードを使用して図の種類を宣言します。このgitgraphキーワードは、Gitグラフを描画したいことをMermaidに伝え、それに応じて図のコードを解析します。

各Gitグラフは、main ブランチで初期化されます。したがって、別のブランチを作成しない限り、デフォルトではコミットはメインブランチに移動します。これは、常にメインブランチ（以前はmasterブランチと呼ばれていました）から開始するGitの仕組みによって推進されます。また、デフォルトでは、mainブランチが現在のブランチとして設定されます。

commitキーワードを使用して、現在のブランチにコミットを登録します。これがどのように機能するかを見てみましょう。

デフォルトの（main）ブランチに3つのコミットを表示する単純なGitグラフ

前の例をよく見ると、デフォルトブランチのmainと3つのコミットが表示されていることがわかります。また、デフォルトでは、各コミットに一意のランダムなIDが与えられていることに注意してください。コミットに独自のカスタムIDを付けたい場合はどうすればよいでしょうか？はい、Mermaidでそれを行うことができます。

カスタムコミットIDの追加

特定のコミットに対して、id属性を使用して宣言時にカスタムIDを指定できます。次に:と、""引用符内のカスタム値を続けます。例：commit id: "your_custom_id"

次の図を使用して、これがどのように機能するかを見てみましょう。

この例では、コミットにカスタムIDを付けました。

コミットタイプの変更

Mermaidでは、コミットには3つのタイプがあり、図で少し異なるレンダリングを行います。これらのタイプは次のとおりです。

• NORMAL: デフォルトのコミットタイプ。図では実線で塗りつぶされた円で表されます。
• REVERSE: コミットをリバースコミットとして強調表示します。図では、十字で塗りつぶされた円で表されます。
• HIGHLIGHT: 図の特定のコミットを強調表示します。図では塗りつぶされた長方形で表されます。

特定のコミットに対して、type属性を使用して宣言時にタイプを指定できます。次に:と、上記で説明した必要なタイプオプションを続けます。例：commit type: HIGHLIGHT

注: コミットタイプが指定されていない場合、デフォルトとしてNORMALが選択されます。

次の図を使用して、これらの異なるコミットタイプがどのように見えるかを見てみましょう。

この例では、各コミットに異なるタイプを指定しました。また、コミットを宣言する際にidとtypeの両方をどのように含めたかをご覧ください。

タグの追加

特定のコミットの場合、Gitの世界のタグまたはリリースバージョンの概念と同様に、タグとして装飾できます。tag属性を使用して、コミットを宣言するときにカスタムタグを付加できます。次に:と、""引用符内のカスタム値を続けます。例：commit tag: "your_custom_tag"

次の図を使用して、これがどのように機能するかを見てみましょう。

この例では、コミットにカスタムタグを付けました。また、これらのすべての属性を1回のコミット宣言にどのように組み合わせたかをご覧ください。これらの属性は、必要に応じて組み合わせて使用できます。

新しいブランチの作成

Mermaidでは、新しいブランチを作成するために、branchキーワードを使用します。新しいブランチの名前も指定する必要があります。名前は一意である必要があり、既存のブランチの名前と同じにすることはできません。キーワードと混同される可能性のあるブランチ名は、""で囲む必要があります。使用例：branch develop、branch "cherry-pick"

Mermaidがbranchキーワードを読み取ると、新しいブランチが作成され、それが現在のブランチとして設定されます。Gitの世界で新しいブランチを作成してチェックアウトするのと同等です。

例を見てみましょう

この例では、デフォルトのmainブランチから開始し、そこに2つのコミットをプッシュする方法をご覧ください。次に、developブランチを作成し、その後すべてのコミットはdevelopブランチが現在のブランチになったため、developブランチにプッシュされます。

既存のブランチのチェックアウト

Mermaidでは、既存のブランチに切り替えるために、checkoutキーワードを使用します。既存のブランチの名前も指定する必要があります。指定された名前のブランチが見つからない場合、コンソールエラーが発生します。使用例：checkout develop

Mermaidがcheckoutキーワードを読み取ると、指定されたブランチを見つけて現在のブランチとして設定します。Gitの世界でブランチをチェックアウトするのと同等です。

前の例を変更してみましょう

この例では、デフォルトのmainブランチから開始し、そこに2つのコミットをプッシュする方法をご覧ください。次に、developブランチを作成し、その後すべての3つのコミットは、現在のブランチになったため、developブランチにプッシュされます。その後、checkoutキーワードを使用して現在のブランチをmainに設定し、後に続くすべてのコミットは現在のブランチ、つまりmainに対して登録されます。

2つのブランチのマージ

Mermaidでは、既存のブランチにマージまたは結合するには、mergeキーワードを使用します。また、マージ元の既存のブランチの名前も指定する必要があります。指定された名前のブランチが見つからない場合は、コンソールエラーが発生します。また、マージできるのは2つの別々のブランチのみで、ブランチ自体とマージすることはできません。その場合、エラーがスローされます。

使用例: merge develop

Mermaidがmergeキーワードを読み取ると、指定されたブランチとそのヘッドコミット（そのブランチの最後のコミット）を見つけ、それを現在のブランチのヘッドコミットと結合します。各マージは、マージコミットとなり、図では塗りつぶされた二重丸で表されます。

前の例を修正して、2つのブランチをマージしてみましょう。

この例では、まずデフォルトのmainブランチで開始し、そこに2つのコミットをプッシュしました。次に、developブランチを作成し、その後の3つのコミットはすべて、developブランチが現在のブランチになったため、developブランチに配置されました。その後、checkoutキーワードを使用して、現在のブランチをmainに設定し、それ以降のすべてのコミットは現在のブランチ、つまりmainに登録されます。この後、developブランチを現在のブランチmainにマージし、マージコミットが作成されます。この時点での現在のブランチはまだmainであるため、最後の2つのコミットはそのブランチに登録されます。

また、コミットの場合と同様に、マージを属性で装飾することもできます。

• id--> デフォルトのIDをカスタムIDで上書きします
• tag--> マージコミットにカスタムタグを追加します
• type--> マージコミットのデフォルトの形状を上書きします。ここでは、以前に説明した他のコミットタイプを使用できます。

これらの属性は、一部またはすべてを組み合わせて使用できます。例: merge develop id: "my_custom_id" tag: "my_custom_tag" type: REVERSE

次の図を使用して、これがどのように機能するかを見てみましょう。

別のブランチからコミットをチェリーピックする

「git」が別のブランチから現在のブランチにコミットをチェリーピックできるように、Mermaidもこの機能をサポートしています。cherry-pickキーワードを使用して、別のブランチからコミットをチェリーピックすることもできます。

cherry-pickキーワードを使用するには、id属性を使用してIDを指定し、その後に:と、目的のコミットIDを""引用符で囲んで指定する必要があります。例:

cherry-pick id: "your_custom_id"

ここでは、チェリーピックを表す新しいコミットが現在のブランチに作成され、図ではチェリーと、チェリーピック元のコミットIDを示すタグで視覚的に強調表示されます。

ここで注意すべきいくつかの重要なルールは次のとおりです。

1. チェリーピックする既存のコミットのidを指定する必要があります。指定されたコミットIDが存在しない場合は、エラーが発生します。これには、コミットを宣言するcommit id:$value形式を使用します。上記の例を参照してください。
2. 指定されたコミットは、現在のブランチに存在してはなりません。チェリーピックされたコミットは、常に現在のブランチとは異なるブランチである必要があります。
3. チェリーピックを行う前に、現在のブランチに少なくとも1つのコミットが必要です。そうしないと、エラーがスローされます。
4. マージコミットをチェリーピックする場合は、親コミットIDの指定が必須です。親属性が省略されている場合、または無効な親コミットIDが指定されている場合は、エラーがスローされます。
5. 指定された親コミットは、チェリーピックされるマージコミットの直接の親である必要があります。

例を見てみましょう

Gitgraph固有の構成オプション

Mermaidでは、gitgraph図を構成するオプションがあります。次のオプションを構成できます。

• showBranches：ブール値、デフォルトはtrueです。falseに設定すると、ブランチは図に表示されません。
• showCommitLabel：ブール値、デフォルトはtrueです。falseに設定すると、コミットラベルは図に表示されません。
• mainBranchName：文字列、デフォルトはmainです。デフォルト/ルートブランチの名前。
• mainBranchOrder：ブランチリスト内のメインブランチの位置。デフォルトは0です。つまり、デフォルトでは、mainブランチが順序の最初になります。
• parallelCommits：ブール値、デフォルトはfalseです。trueに設定すると、親からx距離離れたコミットは、図の同じレベルに表示されます。

一つずつ見ていきましょう。

ブランチ名と線を非表示にする

場合によっては、図からブランチ名と線を非表示にしたい場合があります。これは、showBranchesキーワードを使用して行うことができます。デフォルトでは値はtrueです。ディレクティブを使用してfalseに設定できます。

使用例

コミットラベルのレイアウト: 回転または水平

Mermaidは、2種類のコミットラベルレイアウトをサポートしています。デフォルトのレイアウトは回転で、ラベルはコミット円の下に配置され、読みやすくするために45度回転します。これは、長いラベルを持つコミットに特に役立ちます。

もう1つのオプションは水平で、ラベルはコミット円の下に水平方向の中央に配置され、回転しません。これは、短いラベルを持つコミットに特に役立ちます。

ディレクティブでrotateCommitLabelキーワードを使用することにより、コミットラベルのレイアウトを変更できます。デフォルトはtrueで、コミットラベルが回転することを意味します。

使用例: 回転されたコミットラベル

使用例: 水平なコミットラベル

コミットラベルを非表示にする

場合によっては、図からコミットラベルを非表示にしたい場合があります。これは、showCommitLabelキーワードを使用して行うことができます。デフォルトでは値はtrueです。ディレクティブを使用してfalseに設定できます。

使用例

メインブランチ名をカスタマイズする

場合によっては、メイン/デフォルトブランチの名前をカスタマイズしたい場合があります。これは、mainBranchNameキーワードを使用して行うことができます。デフォルトでは値はmainです。ディレクティブを使用して任意の文字列に設定できます。

使用例

Mermaidを使用して作成された架空の鉄道地図を見てください。ここでは、デフォルトのメインブランチ名をMetroLine1に変更しました。

ブランチの順序をカスタマイズする

Mermaidでは、デフォルトでブランチは図コードでの定義または出現順に表示されます。

場合によっては、ブランチの順序をカスタマイズしたい場合があります。これは、ブランチ定義の次のorderキーワードを使用して行うことができます。正の数に設定できます。

Mermaidは、orderキーワードの指定された優先順位に従います。

• メインブランチは、デフォルトの順序値が0であるため、常に最初に表示されます。（構成でmainBranchOrderキーワードを使用して0から変更しない限り）
• 次に、orderのないすべてのブランチは、図コードでの出現順に表示されます。
• 次に、orderを持つすべてのブランチは、order値の順に表示されます。

すべてのブランチの順序を完全に制御するには、すべてのブランチに対してorderを定義する必要があります。

使用例

図を見ると、すべてのブランチが定義された順序に従っていることがわかります。

使用例

図を見ると、ここでは、指定された順序のないすべてのブランチが、定義された順序で描画されています。次に、test4ブランチが1の順序であるため描画されます。次に、mainブランチが2の順序であるため描画されます。そして最後に、test1が3の順序であるため描画されます。

注: mainBranchOrderを2に上書きしたため、mainブランチは最初に描画されず、代わりに順序に従います。

ここでは、デフォルトのメインブランチ名をMetroLine1に変更しました。

向き (v10.3.0+)

Mermaidは、左から右（デフォルト）、上から下、下から上の3つのグラフの向きをサポートしています。

これは、gitGraphの後にLR:（左から右の場合）、TB:（上から下の場合）、またはBT:（下から上の場合）のいずれかを使用して設定できます。

左から右（デフォルト、LR:）

Mermaidでは、デフォルトの向きは、コミットが左から右に実行され、ブランチが互いに積み重ねられることです。

ただし、これはgitGraphの後にLR:を使用して明示的に設定できます。

使用例

上から下 (TB:)

TB（上から下）の向きでは、コミットはグラフの上から下に実行され、ブランチは並べて配置されます。

この方法でグラフを配置するには、gitGraphの後にTB:を追加する必要があります。

使用例

下から上 (BT:) (v11.0.0+)

BT（下から上）の向きでは、コミットはグラフの下から上に実行され、ブランチは並べて配置されます。

この方法でグラフを配置するには、gitGraphの後にBT:を追加する必要があります。

使用例

並列コミット (v10.8.0+)

Mermaidのコミットは、デフォルトでgitgraphに時間的情報を表示します。たとえば、2つのコミットが親から1つコミット離れている場合、先に作成されたコミットが親の近くにレンダリングされます。parallelCommitsフラグを有効にすることで、これをオフにすることができます。

時間的コミット (デフォルト, parallelCommits: false)

並列コミット (parallelCommits: true)

テーマ

Mermaidは、あなたの用途に合ったテーマを見つけるために使用できる、いくつかの定義済みのテーマをサポートしています。追伸：既存のテーマの変数を上書きして、独自のカスタムテーマを作成することもできます。ダイアグラムのテーマ設定の詳細については、こちらをご覧ください。

以下は、さまざまな定義済みのテーマオプションです。

• base
• forest
• dark
• default
• neutral

注意：テーマを変更するには、initialize呼び出しまたはディレクティブを使用できます。 ディレクティブの詳細については、こちらをご覧ください。実際に使用して、さまざまなテーマでサンプルダイアグラムがどのように表示されるかを確認してみましょう。

ベーステーマ

フォレストテーマ

デフォルトテーマ

ダークテーマ

ニュートラルテーマ

テーマ変数を使用したカスタマイズ

Mermaidでは、ダイアグラムのさまざまな要素の外観を制御するテーマ変数を使用して、ダイアグラムをカスタマイズできます。

理解を深めるために、テーマdefaultのサンプルダイアグラムを見てみましょう。テーマ変数のデフォルト値は、テーマから自動的に選択されます。後で、テーマ変数のデフォルト値を上書きする方法を見ていきます。

デフォルトテーマがブランチの色を設定するためにどのように使用されるかをご覧ください。

重要：

Mermaidは、最大8つのブランチのデフォルト値を上書きするためのテーマ変数をサポートしています。つまり、テーマ変数を使用して最大8つのブランチの色/スタイルを設定できます。この8つのブランチのしきい値を超えると、テーマ変数は循環的に再利用されます。つまり、9番目のブランチは1番目のブランチの色/スタイルを使用し、インデックス位置「8」のブランチはインデックス位置「0」のブランチの色/スタイルを使用します。詳細については、次のセクションで説明します。以下のブランチラベルの色のカスタマイズの例をご覧ください。

ブランチの色のカスタマイズ

git0からgit7までのテーマ変数を使用して、ブランチの色をカスタマイズできます。 Mermaidでは、最大8つのブランチの色を設定できます。git0変数は最初のブランチの値を駆動し、git1は2番目のブランチの値を駆動します。

注：これらのテーマ変数のデフォルト値は、選択したテーマから選択されます。デフォルト値を上書きする場合は、initialize呼び出しを使用してカスタムのテーマ変数値を追加できます。

例

それでは、git0からgit3までの変数のデフォルト値を上書きしてみましょう。

ブランチの色が、テーマ変数で指定された値に変更されたことを確認してください。

ブランチラベルの色のカスタマイズ

gitBranchLabel0からgitBranchLabel7までのテーマ変数を使用して、ブランチラベルの色をカスタマイズできます。 Mermaidでは、最大8つのブランチの色を設定できます。gitBranchLabel0変数は最初のブランチラベルの値を駆動し、gitBranchLabel1は2番目のブランチラベルの値を駆動します。

デフォルトテーマがブランチラベルの色を設定するためにどのように使用されるかを見てみましょう。

それでは、gitBranchLabel0からgitBranchLabel2までの変数のデフォルト値を上書きしてみましょう。

ここでは、branch8とbranch9の色とスタイルが、それぞれインデックス位置0 (main) と1(branch1) のブランチから選択されていることがわかります。つまり、ブランチのテーマ変数は循環的に繰り返されます。

コミットの色のカスタマイズ

コミットラベルの色と背景色を変更するには、commitLabelColorとcommitLabelBackgroundテーマ変数を使用してコミットをカスタマイズできます。

例：それでは、commitLabelColorからcommitLabelBackgroundまでの変数のデフォルト値を上書きしてみましょう。

コミットラベルの色と背景色が、テーマ変数で指定された値に変更されたことを確認してください。

コミットラベルのフォントサイズのカスタマイズ

コミットラベルのフォントサイズを変更するには、commitLabelFontSizeテーマ変数を使用してコミットをカスタマイズできます。

例：それでは、commitLabelFontSize変数のデフォルト値を上書きしてみましょう。

コミットラベルのフォントサイズが変更されたことを確認してください。

タグラベルのフォントサイズのカスタマイズ

タグラベルのフォントサイズを変更するには、tagLabelFontSizeテーマ変数を使用してコミットをカスタマイズできます。

例：それでは、tagLabelFontSize変数のデフォルト値を上書きしてみましょう。

タグラベルのフォントサイズが変更されたことを確認してください。

タグの色のカスタマイズ

タグラベルの色、タグラベルの背景色、タグラベルの境界線を変更するには、tagLabelColor、tagLabelBackground、tagLabelBorderテーマ変数を使用してタグをカスタマイズできます。例：それでは、tagLabelColor、tagLabelBackground、tagLabelBorder変数のデフォルト値を上書きしてみましょう。

タグの色が、テーマ変数で指定された値に変更されたことを確認してください。

ハイライトコミットの色のカスタマイズ

gitInv0からgitInv7までのテーマ変数を使用して、ブランチに関連するハイライトコミットの色をカスタマイズできます。 Mermaidでは、最大8つのブランチ固有のハイライトコミットの色を設定できます。gitInv0変数は最初のブランチのハイライトコミットの値を駆動し、gitInv1は2番目のブランチのハイライトコミットラベルの値を駆動します。

例

それでは、git0からgit3までの変数のデフォルト値を上書きしてみましょう。

最初のブランチのハイライトコミットの色が、テーマ変数gitInv0で指定された値に変更されたことを確認してください。