主题
GitGraph 图
🌐 GitGraph Diagrams
Git 图是对不同分支上的 git 提交和 git 操作(命令)的图示表示。
这类图表对开发者和运维团队特别有帮助,可以用来分享他们的 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:表示当前分支上的一个新提交。
- branch:创建并切换到新分支,同时将其设置为当前分支。
- checkout:切换到一个已存在的分支并将其设为当前分支。
- merge:将现有分支合并到当前分支。
借助这些关键的 git 命令,你将能够非常轻松快速地在 Mermaid 中绘制 git 图。实体名称通常以大写字母开头,尽管对此没有公认的标准,而且在 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 可以互换使用。
语法
🌐 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 都是以 main 分支初始化的。所以除非你创建一个不同的分支,否则提交默认会进入主分支。这是由 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:
一个简单的 git 图,显示默认 (main) 分支上的三个提交:
🌐 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,然后加上“:”,并在引号内标注自定义值。例如:“提交 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:默认提交类型。在图表中用实心圆表示REVERSE:用于强调某次提交是一次反向提交。在图表中以一个带叉的实心圆表示。HIGHLIGHT:在图表中高亮特定提交。在图表中用实心矩形表示。
对于给定的提交,你可以在声明它时使用 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
对于某个提交,你可以用tag来装饰它,类似于 git world 里标签或发布版本的概念。 你可以在声明提交时用“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 中,要创建新分支,你需要使用“分支”关键词。你还需要提供新分行的名称。名称必须是唯一的,不能是现有分支的名称。可能被误认为关键词的分支名称必须在“”“中引用。用法示例:“分支发展”、“分支”樱桃选择”
🌐 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 覆盖默认 IDtag--> 为你的合并提交添加自定义标签type--> 用于覆盖合并提交的默认类型。在这里你可以使用前面提到的其他提交类型。
你可以选择不使用、使用部分或全部这些属性。例如: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 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 的新提交,并在图表中用 樱桃 和表示其 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:
- 你需要提供一个已存在的提交的
id以进行挑选。如果给定的提交 id 不存在,将会导致错误。为此,请使用commit id:$value的格式来声明提交。请参阅上面的示例。 - 所给的提交在当前分支上必须不存在。被挑选的提交必须始终来自与当前分支不同的分支。
- 当前分支必须至少有一次提交,才能进行 cherry-pick,否则会导致错误。
- 在挑选合并提交时,必须提供父提交 ID。如果省略父属性或提供无效的父提交 ID,将会抛出错误。
- 指定的父提交必须是正在进行挑拣操作的合并提交的直接父提交。
来看一个例子:
🌐 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,则图表中不会显示分支。showCommitLabel: 布尔值,默认是true。如果设置为false,图表中将不显示提交标签。mainBranchName:字符串,默认值为main。默认/根分支的名称。mainBranchOrder:主分支在分支列表中的位置。默认值是0,意味着默认情况下,main分支排在第一位。parallelCommits:布尔值,默认值为false。如果设置为true,则距离父节点 x 的提交将在图表中显示在同一级别。
我们一个一个地来看。
🌐 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改变) - 接下来,所有没有
order的分支将按它们在图代码中出现的顺序显示。 - 接下来,所有带有
order的分支将按其order值的顺序显示。
要完全控制所有分支的顺序,你必须为所有分支定义 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:
看看这个图,这里,所有没有指定顺序的分支都按它们定义的顺序绘制。然后,test4 分支被绘制,因为它的顺序是 1。接着,main 分支被绘制,因为它的顺序是 2。最后,test1 被绘制,因为它的顺序是 3。
🌐 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.
以下是不同的预定义主题选项:
🌐 The following are the different pre-defined theme options:
baseforestdarkdefaultneutral
注意:要更改主题,你可以使用 initialize 调用或 _ 指令 _。了解更多关于 指令 的信息
让我们来使用它们,看看我们的示例图在不同主题下的效果:
基础主题
🌐 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:
重要提示:
Mermaid 支持主题变量,用于覆盖默认值,最多可覆盖 8 个分支,即你可以使用主题变量设置最多 8 个分支的颜色/样式。超过 8 个分支后,主题变量将以循环的方式重复使用,即第 9 个分支将使用第 1 个分支的颜色/样式,索引位置为 '8' 的分支将使用索引位置为 '0' 的分支的颜色/样式。 _ 更多内容见下一节。请参见下面关于 自定义分支标签颜色 的示例 _
自定义分支颜色
🌐 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)的分支,也就是说,分支的 themeVariables 是循环重复的。
🌐 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 主题变量来自定义提交标签的字体大小。
🌐 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.