Mermaid Git 圖語法 - Mermaid 程式碼產生 Git 圖教學

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 語法告訴 Mermaid，你希望繪製 Git 圖，並相應地解析圖表程式碼。

每個 Git 圖都是以 main 分支初始化的。除非你建立不同的分支，否則預設情況下提交會進入主分支。這是由 git 的工作方式所驅動，在開始時你總是從主分支開始。預設情況下，main 分支被設定為目前分支。

你可以使用 commit 語法在目前分支上註冊一次提交，讓我們看看這是如何工作的：

一個簡單的 git 圖，顯示預設分支 main 的三個提交：

代碼

如果仔細觀察前面的範例，你可以看到預設分支 main 以及三個提交。另請注意，預設情況下，每個提交都會被賦予一個唯一且隨機的 ID。

新增自訂提交 ID

對於某個提交，你可以在宣告時用 id 屬性指定自訂 ID，然後加上冒號：，並在雙引號內標註自訂值。

讓我們藉助下圖看看它是如何工作的：

代碼

                            
                                
                                    
                                    複製
                                
                                
                                    
                                    嵌入
                                
                            
                            
                                gitGraph
    commit id: "Alpha"
    commit id: "Beta"
    commit id: "Gamma"

在此示例中，我们给提交分配了自定义 ID。

修改提交類型

在 Mermaid 中，提交有三種類型，它們在圖表中渲染方式略有不同。這些類型是：

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 分支開始，並在其上推送了兩個提交。然後我們建立了 develop 分支，此後的所有提交都放在 develop 分支上，因為它成為了目前分支。

簽出已有分支

在 Mermaid 中，為了切換到已有分支，可以使用 checkout 語法，同時你還需要提供已有分支的名稱。如果沒有找到指定名稱的分支，則會導致主控台錯誤。使用範例：checkout develop

當 Mermaid 讀取 checkout 語法時，它會找到指定名稱的分支並將其設定為目前分支。這相當於在 Git 中簽出一個分支。

代碼

                            
                                
                                    
                                    複製
                                
                                
                                    
                                    嵌入
                                
                            
                            
                                gitGraph
    commit
    commit
    branch develop
    commit
    commit
    commit
    checkout main
    commit
    commit

在此範例中，我們首先從預設的 main 分支開始，並在其上推送了兩次提交。然後我們建立了 develop 分支，隨後所有三個提交都被放在 develop 分支上，因為它成為了目前分支。之後，我們使用 checkout 語法將目前分支設定為 main，隨後的所有提交都會記錄在 main 分支上。

合併兩個分支

在 Mermaid 中，為了合併或連接到現有分支，你需要使用 merge 語法。同時，你還需要提供一個要合併的現有分支的名稱。如果沒有找到指定名稱的分支，將會在主控台顯示錯誤。此外，你只能合併兩個獨立的分支，不能將一個分支與自身合併。

語法範例：merge develop

當 Mermaid 讀取 merge 語法時，它會找到指定分支及其末次提交，並將其與目前分支的末次提交合併。用實心雙圓圈表示。

以下是合併兩個分支範例：

代碼

                            
                                
                                    
                                    複製
                                
                                
                                    
                                    嵌入
                                
                            
                            
                                gitGraph
    commit
    commit
    branch develop
    commit
    commit
    commit
    checkout main
    commit
    commit
    merge develop
    commit
    commit

在此範例中，首先從 main 分支開始，並在其上推送了兩次提交。然後我們建立了 develop 分支，並在 develop 分支上推送了三個提交。之後，我們使用 checkout 語法將目前分支設定為 main，隨後的所有提交都針對 main 分支進行。最後，我們將 develop 分支合併到 main 分支上，從而產生合併提交。由於此時目前分支仍然是 main，最後兩次提交都會記錄在該分支上。

你還可以為你的合併新增類似的屬性：

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 支援將一個提交從另一個分支挑選到目前分支。你還可以使用 cherry-pick 語法從另一個分支中挑選提交。

要使用 cherry-pick 語法，你必須使用 id 屬性指定 id，然後在冒號 : 後面寫上你想要的提交 id，並且用雙引號括起來。例如：

這裡有需要注意的一些重要規則：

你需要提供 id 以便選擇現有的提交。如果給定的提交 ID 不存在，則會導致錯誤。為此，請使用 commit id:$value 的格式來宣告提交。
給定的提交不得存在於目前分支上，被挑選的提交必須始終來自與目前分支不同的分支。
目前分支必須至少有一次提交，然後才能進行 cherry-pick，否則會導致錯誤。
當挑選合併提交時，必須提供父提交 ID。如果省略父屬性或提供無效的父提交 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 支援兩種提交標籤版面配置。預設版面配置是旋轉的，這意味著標籤放置在提交圓圈下方，旋轉 45 度以獲得更好的可讀性。這對於具有長標籤的提交特別有用。

另一個類型是水平，這意味著標籤放置於提交圓圈下方並且水平置中顯示，不會旋轉。這對於帶有短標籤的提交特別有用。

你可以透過在指令中使用 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 支援三種方向：從左到右（預設）、從上到下和從下到上。

從左到右（預設，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 控制第二個分支的顏色，依此類推。

注意：這些主題變數的預設值是從選定的主題中選取的。如果你想覆寫預設值，可以使用 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 變數控制第二個分支標籤的顏色，依此類推。

讓我們看看如何使用 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

設定提交標籤字體大小

你可以使用 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 變數控制第二個分支的醒目提示提交顏色，依此類推。