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 的三个提交:
复制
嵌入
gitGraph
commit
commit
commit
如果仔细观察前面的示例,你可以看到默认分支 main 以及三个提交。另请注意,默认情况下,每个提交都会被赋予一个唯一且随机的 ID。
添加自定义提交 ID
对于某个提交,你可以在声明时用 id 属性指定自定义 ID,然后加上冒号:,并在双引号内标注自定义值。
让我们借助下图看看它是如何工作的:
复制
嵌入
gitGraph
commit id: "Alpha"
commit id: "Beta"
commit id: "Gamma"
在此示例中,我们给提交分配了自定义 ID。
修改提交类型
在 Mermaid 中,提交有三种类型,它们在图表中渲染方式略有不同。这些类型是:
- NORMAL :默认提交类型,用实心圆表示
- REVERSE :强调提交是反向提交,用交叉实心圆表示。
- HIGHLIGHT :高亮特定提交,用实心矩形表示。
对于给定的提交,你可以在声明时使用 type 属性指定其类型,然后跟上冒号 : 和上面讨论的所需类型选项。例如:commit type: HIGHLIGHT
注意:如果未指定提交类型,则默认选择 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 变量控制第二个分支的高亮提交颜色,以此类推。
现在让我们覆盖 git0 到 git3 变量的默认值:
复制
嵌入
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
'gitInv0': '#ff0000'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit