Gitgraph 图

¥Gitgraph Diagrams

Git 图表是各个分支上 git 提交和 git 操作（命令）的图形表示。

¥A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches.

此类图表对于开发者和 DevOps 团队分享他们的 Git 分支策略特别有帮助。例如，它可以更轻松地可视化 git flow 的工作原理。

¥These kind of diagram are particularly helpful to developers and devops teams to share their Git branching strategies. For example, it makes it easier to visualize how git flow works.

Mermaid 可以渲染 Git 图表

¥Mermaid can render Git diagrams

在 Mermaid 中，我们支持基本的 git 操作，例如：

¥In Mermaid, we support the basic git operations like:

• commit ：代表当前分支上的新提交。

  ¥commit : Representing a new commit on the current branch.

• 分支 ：创建并切换到新分支，将其设置为当前分支。

  ¥branch : To create & switch to a new branch, setting it as the current branch.

• checkout ：签出现有分支并将其设置为当前分支。

  ¥checkout : To checking out an existing branch and setting it as the current branch.

• merge ：将现有分支合并到当前分支。

  ¥merge : To merge an existing branch onto the current branch.

借助这些关键的 git 命令，你将能够非常轻松快速地在 Mermaid 中绘制 gitgraph。实体名称通常是大写的，尽管对此没有公认的标准，并且在 Mermaid 中也没有要求。

¥With the help of these key git commands, you will be able to draw a gitgraph in Mermaid very easily and quickly. Entity names are often capitalized, although there is no accepted standard on this, and it is not required in Mermaid.

注意：checkout 和 switch 可以互换使用。

¥NOTE: checkout and switch can be used interchangeably.

语法

¥Syntax

gitgraph 的 Mermaid 语法非常直接和简单。它遵循声明性方法，其中每个提交都按照其在代码中出现/存在的顺序绘制在图中的时间轴上。基本上，它遵循每个命令的插入顺序。

¥Mermaid syntax for a gitgraph is very straight-forward and simple. It follows a declarative-approach, where each commit is drawn on the timeline in the diagram, in order of its occurrences/presence in code. Basically, it follows the insertion order for each command.

你要做的第一件事是使用 gitgraph 关键字声明你的图表类型。这个 gitgraph 关键字告诉 Mermaid 你希望绘制 gitgraph，并相应地解析图表代码。

¥First thing you do is to declare your diagram type using the gitgraph keyword. This gitgraph keyword, tells Mermaid that you wish to draw a gitgraph, and parse the diagram code accordingly.

每个 gitgraph 都是用主分支初始化的。因此，除非你创建不同的分支，否则默认情况下提交将转到主分支。这是由 git 的工作方式驱动的，一开始你总是从主分支（以前称为 master 分支）开始。默认情况下，main 分支被设置为当前分支。

¥Each gitgraph, is initialized with main branch. So unless you create a different branch, by-default the commits will go to the main branch. This is driven with how git works, where in the beginning you always start with the main branch (formerly called as master branch). And by-default, main branch is set as your current branch.

你可以使用 commit 关键字在当前分支上注册提交。让我们看看这是如何工作的：

¥You make use of commit keyword to register a commit on the current branch. Let see how this works:

一个简单的 gitgraph 显示默认（主）分支上的三个提交：

¥A simple gitgraph showing three commits on the default (main) branch:

如果仔细观察前面的示例，你可以看到默认分支 main 以及三个提交。另请注意，默认情况下每个提交都会被赋予一个唯一且随机的 ID。如果你想为提交提供自己的自定义 ID 怎么办？是的，Mermaid 可以做到这一点。

¥If you look closely at the previous example, you can see the default branch main along with three commits. Also, notice that by default each commit has been given a unique & random ID. What if you wanted to give your own custom ID to a commit? Yes, it is possible to do that with Mermaid.

添加自定义提交 ID

¥Adding custom commit id

对于给定的提交，你可以在使用 id 属性声明它时指定自定义 ID，后跟 : 以及 "" 引用中的自定义值。例如：commit id: "your_custom_id"

¥For a given commit you may specify a custom ID at the time of declaring it using the id attribute, followed by : and your custom value within a "" quote. For example: commit id: "your_custom_id"

让我们借助下图看看它是如何工作的：

¥Let us see how this works with the help of the following diagram:

在此示例中，我们为提交提供了自定义 ID。

¥In this example, we have given our custom IDs to the commits.

修改提交类型

¥Modifying commit type

在 Mermaid 中，提交可以分为三种类型，它们在图中的渲染方式略有不同。这些类型是：

¥In Mermaid, a commit can be of three type, which render a bit different in the diagram. These types are:

• NORMAL ：默认提交类型。图中用实心圆表示

  ¥NORMAL : Default commit type. Represented by a solid circle in the diagram

• REVERSE ：强调提交是反向提交。在图中用交叉实心圆表示。

  ¥REVERSE : To emphasize a commit as a reverse commit. Represented by a crossed solid circle in the diagram.

• HIGHLIGHT：高亮图中的特定提交。在图中用实心矩形表示。

  ¥HIGHLIGHT : To highlight a particular commit in the diagram. Represented by a filled rectangle in the diagram.

对于给定的提交，你可以在声明时使用 type 属性指定其类型，后跟 : 和上面讨论的所需类型选项。例如：commit type: HIGHLIGHT

¥For a given commit you may specify its type at the time of declaring it using the type attribute, followed by : and the required type option discussed above. For example: commit type: HIGHLIGHT

注意：如果未指定提交类型，则默认选择 NORMAL。

¥NOTE: If no commit type is specified, NORMAL is picked as default.

让我们借助下图看看这些不同的提交类型如何：

¥Let us see how these different commit type look with the help of the following diagram:

在此示例中，我们为每个提交指定了不同的类型。另外，看看我们在声明提交时如何将 id 和 type 包含在一起。

¥In this example, we have specified different types to each commit. Also, see how we have included both id and type together at the time of declaring our commits.

添加标签

¥Adding Tags

对于给定的提交，你可以将其装饰为标签，类似于 git 世界中标签或发布版本的概念。你可以在使用 tag 属性声明提交时附加自定义标签，后跟 : 以及 "" 引用中的自定义值。例如：commit tag: "your_custom_tag"

¥For a given commit you may decorate it as a tag, similar to the concept of tags or release version in git world. You can attach a custom tag at the time of declaring a commit using the tag attribute, followed by : and your custom value within "" quote. For example: commit tag: "your_custom_tag"

让我们借助下图看看它是如何工作的：

¥Let us see how this works with the help of the following diagram:

在此示例中，我们为提交提供了自定义标签。另外，看看我们如何将所有这些属性组合到一个提交声明中。你可以根据需要混合匹配这些属性。

¥In this example, we have given custom tags to the commits. Also, see how we have combined all these attributes in a single commit declaration. You can mix-match these attributes as you like.

创建一个新分支

¥Create a new branch

在 Mermaid 中，为了创建新分支，你可以使用 branch 关键字。你还需要提供新分支的名称。该名称必须是唯一的，并且不能是现有分支的名称。可能与关键字混淆的分支名称必须在 "" 内加引号。用法示例：branch develop、branch "cherry-pick"

¥In Mermaid, in-order to create a new branch, you make use of the branch keyword. You also need to provide a name of the new branch. The name has to be unique and cannot be that of an existing branch. A branch name that could be confused for a keyword must be quoted within "". Usage examples: branch develop, branch "cherry-pick"

当 Mermaid 读取 branch 关键字时，它会创建一个新分支并将其设置为当前分支。相当于你创建一个新分支并在 Git 世界中签出它。

¥When Mermaid, reads the branch keyword, it creates a new branch and sets it as the current branch. Equivalent to you creating a new branch and checking it out in Git world.

让我们看一个例子：

¥Let see this in an example:

在此示例中，了解我们如何从默认的 main 分支开始，并在其上推送了两次提交。然后我们创建了 develop 分支，之后的所有提交都放在 develop 分支上，因为它成为当前分支。

¥In this example, see how we started with default main branch, and pushed two commits on that. Then we created the develop branch, and all commits afterwards are put on the develop branch as it became the current branch.

检查现有分支

¥Checking out an existing branch

在 Mermaid 中，为了切换到现有分支，你可以使用 checkout 关键字。你还需要提供现有分支的名称。如果没有找到具有给定名称的分支，则会导致控制台错误。使用示例：checkout develop

¥In Mermaid, in order to switch to an existing branch, you make use of the checkout keyword. You also need to provide a name of an existing branch. If no branch is found with the given name, it will result in console error. Usage example: checkout develop

当 Mermaid 读取 checkout 关键字时，它会找到给定的分支并将其设置为当前分支。相当于签出 Git 世界中的一个分支。

¥When Mermaid, reads the checkout keyword, it finds the given branch and sets it as the current branch. Equivalent to checking out a branch in the Git world.

让我们看看修改我们之前的例子：

¥Let see modify our previous example:

在此示例中，了解我们如何从默认的 main 分支开始，并在其上推送了两次提交。然后我们创建了 develop 分支，之后的所有三个提交都放在 develop 分支上，因为它成为当前分支。之后，我们使用 checkout 关键字将当前分支设置为 main，并且随后的所有提交都针对当前分支（即 main）进行注册。

¥In this example, see how we started with default main branch, and pushed two commits on that. Then we created the develop branch, and all three commits afterwards are put on the develop branch as it became the current branch. After this we made use of the checkout keyword to set the current branch as main, and all commit that follow are registered against the current branch, i.e. main.

合并两个分支

¥Merging two branches

在 Mermaid 中，为了合并或加入现有分支，你可以使用 merge 关键字。你还需要提供要从中合并的现有分支的名称。如果没有找到具有给定名称的分支，则会导致控制台错误。另外，你只能合并两个单独的分支，而不能合并一个分支与其自身。在这种情况下会抛出错误。

¥In Mermaid, in order to merge or join to an existing branch, you make use of the merge keyword. You also need to provide the name of an existing branch to merge from. If no branch is found with the given name, it will result in console error. Also, you can only merge two separate branches, and cannot merge a branch with itself. In such case an error is throw.

使用示例：merge develop

¥Usage example: merge develop

当 Mermaid 读取 merge 关键字时，它会找到给定分支及其头提交（该分支上的最后一次提交），并将其与当前分支上的头提交连接起来。每次合并都会产生一次合并提交，在图中用实心双圆圈表示。

¥When Mermaid, reads the merge keyword, it finds the given branch and its head commit (the last commit on that branch), and joins it with the head commit on the current branch. Each merge results in a merge commit, represented in the diagram with filled double circle.

让我们修改之前的示例来合并两个分支：

¥Let us modify our previous example to merge our two branches:

在此示例中，了解我们如何从默认的 main 分支开始，并在其上推送了两次提交。然后我们创建了 develop 分支，之后的所有三个提交都放在 develop 分支上，因为它成为当前分支。之后，我们使用 checkout 关键字将当前分支设置为 main，并且随后的所有提交都针对当前分支（即 main）进行注册。之后，我们将 develop 分支合并到当前分支 main 上，从而产生合并提交。由于此时当前分支仍然是 main，因此最后两次提交都会针对该分支进行注册。

¥In this example, see how we started with default main branch, and pushed two commits on that. Then we created the develop branch, and all three commits afterwards are put on the develop branch as it became the current branch. After this we made use of the checkout keyword to set the current branch as main, and all commits that follow are registered against the current branch, i.e. main. After this we merge the develop branch onto the current branch main, resulting in a merge commit. Since the current branch at this point is still main, the last two commits are registered against that.

你还可以使用与提交类似的属性来装饰合并：

¥You can also decorate your merge with similar attributes as you did for the commit using:

• id--> 用自定义 ID 覆盖默认 ID

  ¥id--> To override the default ID with custom ID

• tag--> 将自定义标签添加到合并提交

  ¥tag--> To add a custom tag to your merge commit

• type--> 覆盖合并提交的默认形状。这里你可以使用前面提到的其他提交类型。

  ¥type--> To override the default shape of merge commit. Here you can use other commit type mentioned earlier.

你可以选择不使用、部分或全部这些属性。例如：merge develop id: "my_custom_id" tag: "my_custom_tag" type: REVERSE

¥And you can choose to use none, some or all of these attributes together. For example: merge develop id: "my_custom_id" tag: "my_custom_tag" type: REVERSE

让我们借助下图看看它是如何工作的：

¥Let us see how this works with the help of the following diagram:

从另一个分支进行 Cherry Pick 提交

¥Cherry Pick commit from another branch

与 'git' 允许你从另一个分支挑选提交到当前分支类似，Mermaid 也支持此功能。你还可以使用 cherry-pick 关键字从另一个分支中挑选提交。

¥Similar to how 'git' allows you to cherry-pick a commit from another branch onto the current branch, Mermaid also supports this functionality. You can also cherry-pick a commit from another branch using the cherry-pick keyword.

要使用 cherry-pick 关键字，你必须使用 id 属性指定 id，后跟 : 以及 "" 引号内所需的提交 id。例如：

¥To use the cherry-pick keyword, you must specify the id using the id attribute, followed by : and your desired commit id within a "" quote. For example:

cherry-pick id: "your_custom_id"

在这里，在当前分支上创建了代表 cherry-pick 的新提交，并在图中以樱桃和描述从中挑选它的提交 ID 的标签在视觉上高亮。

¥Here, a new commit representing the cherry-pick is created on the current branch, and is visually highlighted in the diagram with a cherry and a tag depicting the commit id from which it is cherry-picked from.

这里需要注意的一些重要规则是：

¥A few important rules to note here are:

1. 你需要提供 id 以便选择现有的提交。如果给定的提交 ID 不存在，则会导致错误。为此，请使用声明提交的 commit id:$value 格式。请参阅上面的示例。

   ¥You need to provide the id for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the commit id:$value format of declaring commits. See the examples from above.

2. 给定的提交不得存在于当前分支上。精心挑选的提交必须始终是与当前分支不同的分支。

   ¥The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch.

3. 当前分支必须至少有一次提交，然后才能进行 cherry-pick，否则会导致抛出错误。

   ¥Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.

4. 当挑选合并提交时，必须提供父提交 ID。如果省略父属性或提供无效的父提交 ID，将引发错误。

   ¥When cherry-picking a merge commit, providing a parent commit ID is mandatory. If the parent attribute is omitted or an invalid parent commit ID is provided, an error will be thrown.

5. 指定的父提交必须是正在挑选的合并提交的直接父提交。

   ¥The specified parent commit must be an immediate parent of the merge commit being cherry-picked.

让我们看一个例子：

¥Let see an example:

Gitgraph 特定配置选项

¥Gitgraph specific configuration options

在 Mermaid 中，你可以选择配置 gitgraph 图。你可以配置以下选项：

¥In Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options:

• showBranches ：布尔值，默认为 true。如果设置为 false，则图中不会显示分支。

  ¥showBranches : Boolean, default is true. If set to false, the branches are not shown in the diagram.

• showCommitLabel ：布尔值，默认为 true。如果设置为 false，则提交标签不会显示在图中。

  ¥showCommitLabel : Boolean, default is true. If set to false, the commit labels are not shown in the diagram.

• mainBranchName ：字符串，默认为 main。默认/根分支的名称。

  ¥mainBranchName : String, default is main. The name of the default/root branch.

• mainBranchOrder：主分支在分支列表中的位置。默认为 0，这意味着默认情况下 main 分支是顺序中的第一个分支。

  ¥mainBranchOrder : Position of the main branch in the list of branches. default is 0, meaning, by default main branch is the first in the order.

• parallelCommits：布尔值，默认为 false。如果设置为 true，则距父级 x 距离的提交将显示在图中的同一级别。

  ¥parallelCommits: Boolean, default is false. If set to true, commits x distance away from the parent are shown at the same level in the diagram.

让我们一一看看。

¥Let's look at them one by one.

隐藏分支名称和线路

¥Hiding Branch names and lines

有时你可能想隐藏图表中的分支名称和线条。你可以使用 showBranches 关键字来完成此操作。默认情况下其值为 true。你可以使用指令将其设置为 false。

¥Sometimes you may want to hide the branch names and lines from the diagram. You can do this by using the showBranches keyword. By default its value is true. You can set it to false using directives.

使用示例：

¥Usage example:

提交标签布局：旋转或水平

¥Commit labels Layout: Rotated or Horizontal

Mermaid 支持两种类型的提交标签布局。默认布局是旋转的，这意味着标签放置在提交圆下方，旋转 45 度以获得更好的可读性。这对于具有长标签的提交特别有用。

¥Mermaid supports two types of commit labels layout. The default layout is rotated, which means the labels are placed below the commit circle, rotated at 45 degrees for better readability. This is particularly useful for commits with long labels.

另一个选项是水平的，这意味着标签放置在水平居中的提交圆下方，并且不旋转。这对于带有短标签的提交特别有用。

¥The other option is horizontal, which means the labels are placed below the commit circle centred horizontally, and are not rotated. This is particularly useful for commits with short labels.

你可以通过在指令中使用 rotateCommitLabel 关键字来更改提交标签的布局。它默认为 true，这意味着提交标签会轮换。

¥You can change the layout of the commit labels by using the rotateCommitLabel keyword in the directive. It defaults to true, which means the commit labels are rotated.

使用示例：旋转提交标签

¥Usage example: Rotated commit labels

使用示例：水平提交标签

¥Usage example: Horizontal commit labels

隐藏提交标签

¥Hiding commit labels

有时你可能想从图表中隐藏提交标签。你可以使用 showCommitLabel 关键字来完成此操作。默认情况下其值为 true。你可以使用指令将其设置为 false。

¥Sometimes you may want to hide the commit labels from the diagram. You can do this by using the showCommitLabel keyword. By default its value is true. You can set it to false using directives.

使用示例：

¥Usage example:

自定义主分支名称

¥Customizing main branch name

有时你可能想自定义主/默认分支的名称。你可以使用 mainBranchName 关键字来完成此操作。默认情况下其值为 main。你可以使用指令将其设置为任何字符串。

¥Sometimes you may want to customize the name of the main/default branch. You can do this by using the mainBranchName keyword. By default its value is main. You can set it to any string using directives.

使用示例：

¥Usage example:

看看使用 Mermaid 创建的想象中的铁路图。在这里，我们将默认的主分支名称更改为 MetroLine1。

¥Look at the imaginary railroad map created using Mermaid. Here, we have changed the default main branch name to MetroLine1.

自定义分支排序

¥Customizing branch ordering

在 Mermaid 中，默认情况下，分支按照其定义或在图表代码中出现的顺序显示。

¥In Mermaid, by default the branches are shown in the order of their definition or appearance in the diagram code.

有时你可能想要自定义分支的顺序。你可以通过在分支定义旁边使用 order 关键字来完成此操作。你可以将其设置为正数。

¥Sometimes you may want to customize the order of the branches. You can do this by using the order keyword next the branch definition. You can set it to a positive number.

Mermaid 遵循 order 关键字的给定优先顺序。

¥Mermaid follows the given precedence order of the order keyword.

• 主分支始终首先显示，因为它的默认顺序值为 0。（除非使用配置中的 mainBranchOrder 关键字修改其顺序并从 0 更改）

  ¥Main branch is always shown first as it has default order value of 0. (unless its order is modified and changed from 0 using the mainBranchOrder keyword in the config)

• 接下来，所有没有 order 的分支按照它们在图表代码中出现的顺序显示。

  ¥Next, All branches without an order are shown in the order of their appearance in the diagram code.

• 接下来，所有具有 order 的分支都按照其 order 值的顺序显示。

  ¥Next, All branches with an order are shown in the order of their order value.

要完全控制所有分支的顺序，必须为所有分支定义 order。

¥To fully control the order of all the branches, you must define order for all the branches.

使用示例：

¥Usage example:

看图，所有的分支都遵循定义的顺序。

¥Look at the diagram, all the branches are following the order defined.

使用示例：

¥Usage example:

看图，这里所有没有指定顺序的分支都是按照定义的顺序绘制的。然后，由于 1 的顺序，绘制 test4 分支。然后，由于 2 的顺序，绘制 main 分支。最后，由于 3 的顺序，所以绘制了 test1。

¥Look at the diagram, here, all the branches without a specified order are drawn in their order of definition. Then, test4 branch is drawn because the order of 1. Then, main branch is drawn because the order of 2. And, lastly test1is drawn because the order of 3.

注意：因为我们已经覆盖了 mainBranchOrder 到 2，所以一开始并没有绘制 main 分支，而是遵循顺序。

¥NOTE: Because we have overridden the mainBranchOrder to 2, the main branch is not drawn in the beginning, instead follows the ordering.

在这里，我们将默认的主分支名称更改为 MetroLine1。

¥Here, we have changed the default main branch name to MetroLine1.

方向 (v10.3.0+)

¥Orientation (v10.3.0+)

Mermaid 支持三种图形方向：从左到右（默认）、从上到下和从下到上。

¥Mermaid supports three graph orientations: Left-to-Right (default), Top-to-Bottom, and Bottom-to-Top.

你可以在 gitGraph 之后使用 LR:（对于 左到右）、TB:（对于 从上到下）或 BT:（对于 自下而上）进行设置。

¥You can set this with either LR: (for Left-to-Right), TB: (for Top-to-Bottom) or BT: (for Bottom-to-Top) after gitGraph.

从左到右（默认，LR:）

¥Left to Right (default, LR:)

在 Mermaid 中，默认方向是提交从左到右运行，分支堆叠在一起。

¥In Mermaid, the default orientation is for commits to run from left to right and for branches to be stacked on top of one another.

但是，你可以在 gitGraph 之后使用 LR: 显式设置此值。

¥However, you can set this explicitly with LR: after gitGraph.

使用示例：

¥Usage example:

从上到下 (TB:)

¥Top to Bottom (TB:)

在 TB（从上到下）方向中，提交从图表的上到下运行，并且分支并排排列。

¥In TB (Top-to-Bottom) orientation, the commits run from top to bottom of the graph and branches are arranged side-by-side.

要以这种方式定向图形，你需要在 gitGraph 之后添加 TB:。

¥To orient the graph this way, you need to add TB: after gitGraph.

使用示例：

¥Usage example:

从下到上 (BT:) (v11.0.0+)

¥Bottom to Top (BT:) (v11.0.0+)

在 BT（从下到上）方向中，提交从图表的底部到顶部运行，并且分支并排排列。

¥In BT (Bottom-to-Top) orientation, the commits run from bottom to top of the graph and branches are arranged side-by-side.

要以这种方式定向图形，你需要在 gitGraph 之后添加 BT:。

¥To orient the graph this way, you need to add BT: after gitGraph.

使用示例：

¥Usage example:

并行提交 (v10.8.0+)

¥Parallel commits (v10.8.0+)

Mermaid 中的提交默认在 gitgraph 中显示时间信息。例如，如果两个提交距离其父级只有一个提交，则较早进行的提交将渲染为更接近其父级。你可以通过启用 parallelCommits 标志来关闭此功能。

¥Commits in Mermaid display temporal information in gitgraph by default. For example if two commits are one commit away from its parent, the commit that was made earlier is rendered closer to its parent. You can turn this off by enabling the parallelCommits flag.

临时提交（默认，parallelCommits: false）

¥Temporal Commits (default, parallelCommits: false)

并行提交 (parallelCommits: true)

¥Parallel commits (parallelCommits: true)

主题

¥Themes

Mermaid 支持一系列预定义的主题，你可以使用它们来找到适合你的主题。附：你实际上可以覆盖现有主题的变量来运行你自己的自定义主题。了解有关图表主题化的更多信息 此处。

¥Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram here.

以下是不同的预定义主题选项：

¥The following are the different pre-defined theme options:

• base

• forest

• dark

• default

• neutral

注意：要更改主题，你可以使用 initialize 调用或指令。了解有关 directives 的更多信息让我们使用它们，并看看我们的示例图在不同主题中的外观：

¥NOTE: To change theme you can either use the initialize call or directives. Learn more about directives Let's put them to use, and see how our sample diagram looks in different themes:

基础主题

¥Base Theme

森林主题

¥Forest Theme

默认主题

¥Default Theme

黑暗主题

¥Dark Theme

中性主题

¥Neutral Theme

使用主题变量进行自定义

¥Customize using Theme Variables

Mermaid 允许你使用主题变量自定义图表，这些变量控制图表各个元素的外观和感觉。

¥Mermaid allows you to customize your diagram using theme variables which govern the look and feel of various elements of the diagram.

为了便于理解，我们以主题 default 为例，主题变量的默认值是从主题中自动选取的。稍后我们将看到如何覆盖主题变量的默认值。

¥For understanding let us take a sample diagram with theme default, the default values of the theme variables is picked automatically from the theme. Later on we will see how to override the default values of the theme variables.

查看如何使用默认主题设置分支的颜色：

¥See how the default theme is used to set the colors for the branches:

重要：

¥IMPORTANT:

Mermaid 支持主题变量覆盖最多 8 个分支的默认值，即你可以使用主题变量设置最多 8 个分支的颜色/样式。在 8 个分支的阈值之后，主题变量以循环方式重用，即第 9 个分支将使用第 1 个分支的颜色/样式，或者索引位置 '8' 处的分支将使用索引处分支的颜色/样式 位置 '0'。下一节将详细介绍这一点。请参阅下面有关自定义分支标签颜色的示例

¥Mermaid supports the theme variables to override the default values for up to 8 branches, i.e., you can set the color/styling of up to 8 branches using theme variables. After this threshold of 8 branches, the theme variables are reused in the cyclic manner, i.e. the 9th branch will use the color/styling of the 1st branch, or the branch at index position '8' will use the color/styling of the branch at index position '0'. More on this in the next section. See examples on Customizing branch label colors below

自定义分支颜色

¥Customizing branch colors

你可以使用 git0 到 git7 主题变量自定义分支颜色。Mermaid 允许你设置最多 8 个分支的颜色，其中 git0 变量将驱动第一个分支的值，git1 将驱动第二个分支的值，依此类推。

¥You can customize the branch colors using the git0 to git7 theme variables. Mermaid allows you to set the colors for up-to 8 branches, where git0 variable will drive the value of the first branch, git1 will drive the value of the second branch and so on.

注意：这些主题变量的默认值是从选定的主题中选取的。如果你想覆盖默认值，可以使用 initialize 调用来添加自定义主题变量值。

¥NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the initialize call to add your custom theme variable values.

示例：

¥Example:

现在让我们覆盖 git0 到 git3 变量的默认值：

¥Now let's override the default values for the git0 to git3 variables:

查看分支颜色如何更改为主题变量中指定的值。

¥See how the branch colors are changed to the values specified in the theme variables.

自定义分支标签颜色

¥Customizing branch label colors

你可以使用 gitBranchLabel0 到 gitBranchLabel7 主题变量自定义分支标签颜色。Mermaid 允许你设置最多 8 个分支的颜色，其中 gitBranchLabel0 变量将驱动第一个分支标签的值，gitBranchLabel1 将驱动第二个分支标签的值，依此类推。

¥You can customize the branch label colors using the gitBranchLabel0 to gitBranchLabel7 theme variables. Mermaid allows you to set the colors for up-to 8 branches, where gitBranchLabel0 variable will drive the value of the first branch label, gitBranchLabel1 will drive the value of the second branch label and so on.

让我们看看如何使用默认主题来设置分支标签的颜色：

¥Lets see how the default theme is used to set the colors for the branch labels:

现在让我们覆盖 gitBranchLabel0 到 gitBranchLabel2 变量的默认值：

¥Now let's override the default values for the gitBranchLabel0 to gitBranchLabel2 variables:

在这里，你可以看到 branch8 和 branch9 颜色和样式分别从索引位置 0 (main) 和 1(branch1) 的分支中选取，即分支主题变量循环重复。

¥Here, you can see that branch8 and branch9 colors and the styles are being picked from branch at index position 0 (main) and 1(branch1) respectively, i.e., branch themeVariables are repeated cyclically.

自定义提交颜色

¥Customizing Commit colors

你可以使用 commitLabelColor 和 commitLabelBackground 主题变量来自定义提交，分别更改提交标签颜色和背景颜色。

¥You can customize commit using the commitLabelColor and commitLabelBackground theme variables for changes in the commit label color and background color respectively.

示例：现在让我们覆盖 commitLabelColor 到 commitLabelBackground 变量的默认值：

¥Example: Now let's override the default values for the commitLabelColor to commitLabelBackground variables:

查看提交标签颜色和背景颜色如何更改为主题变量中指定的值。

¥See how the commit label color and background color are changed to the values specified in the theme variables.

自定义提交标签字体大小

¥Customizing Commit Label Font Size

你可以使用 commitLabelFontSize 主题变量来自定义提交，以更改提交标签的字体大小。

¥You can customize commit using the commitLabelFontSize theme variables for changing in the font size of the commit label .

示例：现在让我们覆盖 commitLabelFontSize 变量的默认值：

¥Example: Now let's override the default values for the commitLabelFontSize variable:

查看提交标签字体大小如何变化。

¥See how the commit label font size changed.

自定义标签标签字体大小

¥Customizing Tag Label Font Size

你可以使用 tagLabelFontSize 主题变量来自定义提交，以更改标签 label 的字体大小。

¥You can customize commit using the tagLabelFontSize theme variables for changing in the font size of the tag label .

示例：现在让我们覆盖 tagLabelFontSize 变量的默认值：

¥Example: Now let's override the default values for the tagLabelFontSize variable:

查看标签标签字体大小如何变化。

¥See how the tag label font size changed.

自定义标签颜色

¥Customizing Tag colors

你可以使用 tagLabelColor、tagLabelBackground 和 tagLabelBorder 主题变量来自定义标签，分别更改标签标签颜色、标签标签背景颜色和标签标签边框。示例：现在让我们覆盖 tagLabelColor、tagLabelBackground 和 tagLabelBorder 变量的默认值：

¥You can customize tag using the tagLabelColor,tagLabelBackground and tagLabelBorder theme variables for changes in the tag label color,tag label background color and tag label border respectively. Example: Now let's override the default values for the tagLabelColor, tagLabelBackground and to tagLabelBorder variables:

查看标签颜色如何更改为主题变量中指定的值。

¥See how the tag colors are changed to the values specified in the theme variables.

自定义高亮提交颜色

¥Customizing Highlight commit colors

你可以使用 gitInv0 到 gitInv7 主题变量自定义与其所在分支相关的高亮提交颜色。Mermaid 允许你为最多 8 个分支特定高亮提交设置颜色，其中 gitInv0 变量将驱动第一个分支的高亮提交的值，gitInv1 将驱动第二个分支的高亮提交标签的值，依此类推。

¥You can customize the highlight commit colors in relation to the branch it is on using the gitInv0 to gitInv7 theme variables. Mermaid allows you to set the colors for up-to 8 branches specific highlight commit, where gitInv0 variable will drive the value of the first branch's highlight commits, gitInv1 will drive the value of the second branch's highlight commit label and so on.

示例：

¥Example:

现在让我们覆盖 git0 到 git3 变量的默认值：

¥Now let's override the default values for the git0 to git3 variables:

查看第一个分支上高亮的提交颜色如何更改为主题变量 gitInv0 中指定的值。

¥See how the highlighted commit color on the first branch is changed to the value specified in the theme variable gitInv0.