Mermaid学习教程,Mermaid画流程图,Mermaid语法讲解,Mermaid使用方法介绍,Mermaid中文参考文档,Mermaid绘图步骤

Gitgraph 图

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

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

Code Chart 可以渲染 Git 图

    gitGraph
       commit
       commit
       branch develop
       checkout develop
       commit
       commit
       checkout main
       merge develop
       commit
       commit
maindevelop0-35759121-560f25e2-e1159943-391f73f5-6754abe6-7e8b261

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

  • commit：表示当前分支上的新提交。
  • 分支：创建并切换到新分支，将其设置为当前分支。
  • checkout：签出现有分支并将其设置为当前分支。
  • merge：将现有分支合并到当前分支。

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

句法

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

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

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

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

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

    gitGraph
       commit
       commit
       commit
main0-e044d5e1-b99b1612-cfaa9bc

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

添加自定义提交 ID

对于给定的提交，您可以在使用id属性声明它时指定一个自定义 ID，然后在引号中:加上您的自定义值。""例如：commit id: "your_custom_id"

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

    gitGraph
       commit id: "Alpha"
       commit id: "Beta"
       commit id: "Gamma"
mainAlphaBetaGamma

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

修改提交类型

在代码图中，提交可以是三种类型，它们在图中呈现出一些不同。这些类型是：

  • 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
mainNormal1-e7542deReverse3-84652c7Highlight5-ee980f6

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

添加标签

对于给定的提交，您可以将其装饰为标签，类似于 git 世界中标签或发布版本的概念。tag您可以在使用该属性声明提交时附加自定义标签，然后在引号中添加:您的自定义值。""例如：commit tag: "your_custom_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
main0-0e58967Normalv1.0.02-9b40b5eReverseRC_14-131d917Highlight8.8.46-289b7bc

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

创建一个新分支

在代码图中，为了创建一个新分支，您需要使用branch关键字。您还需要提供新分支的名称。该名称必须是唯一的，并且不能是现有分支的名称。使用示例：branch develop

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

让我们看一个例子：

    gitGraph
       commit
       commit
       branch develop
       commit
       commit
       commit
maindevelop0-2e459021-d4d499f2-53649123-615c4444-0543ac9

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

检出现有分支

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

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

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

    gitGraph
       commit
       commit
       branch develop
       commit
       commit
       commit
       checkout main
       commit
       commit
maindevelop0-4444a101-dc3d95c2-88f09fc3-a5bd9634-118c8415-8e979fa6-3cc3b0f

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

合并两个分支

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

使用示例：merge develop

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

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

    gitGraph
       commit
       commit
       branch develop
       commit
       commit
       commit
       checkout main
       commit
       commit
       merge develop
       commit
       commit
maindevelop0-2413de81-86f114c2-7e71e863-4b0259f4-d5b67515-c4780a46-95121818-16630999-930dca3

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

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

  • id--> 用自定义 ID 覆盖默认 ID
  • tag--> 将自定义标签添加到您的合并提交
  • type--> 覆盖合并提交的默认形状。在这里，您可以使用前面提到的其他提交类型。

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

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

    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"
mainnice_featurevery_nice_feature1234567customIDcustomTag89

Cherry Pick 来自另一个分支的提交

与“git”允许您从另一个分支中挑选提交到当前分支的方式类似，代码图表也支持此功能。cherry-pick您还可以使用关键字从另一个分支中挑选提交。

要使用cherry-pick关键字，您必须使用id属性指定 id，然后在引号中:加上您想要的提交 id 。""例如：

cherry-pick id: "your_custom_id"

在这里，在当前分支上创建了一个代表cherry-pick 的新提交，并在图表中以一个cherry和一个标签突出显示，该标签描述了从中挑选它的commit id。

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

  1. 您需要为id现有的提交提供精心挑选的。如果给定的提交 ID 不存在，则会导致错误。为此，请使用commit id:$value声明提交的格式。请参阅上面的示例。
  2. 给定的提交不能存在于当前分支上。精心挑选的提交必须始终是与当前分支不同的分支。
  3. 当前分支必须至少有一次提交，然后才能进行cherry-pick，否则会导致错误被抛出。

让我们看一个例子：

    gitGraph
       commit id: "ZERO"
       branch develop
       commit id:"A"
       checkout main
       commit id:"ONE"
       checkout develop
       commit id:"B"
       checkout main
       commit id:"TWO"
       cherry-pick id:"A"
       commit id:"THREE"
       checkout develop
       commit id:"C"
maindevelopZEROAONEBTWOcherry-pick:ATHREEC

Gitgraph 特定的配置选项

在 Code Chart 中，您可以选择配置 gitgraph 图。您可以配置以下选项：

  • showBranches: 布尔值，默认为true. 如果设置为false，则图中不显示分支。
  • showCommitLabel: 布尔值，默认为true. 如果设置为false，则提交标签不会显示在图表中。
  • mainBranchName: 字符串，默认为main. 默认/根分支的名称。
  • mainBranchOrder：主分支在分支列表中的位置。默认是0，意思是，默认main分支是顺序中的第一个。

让我们一一看看。

隐藏分支名称和行

有时您可能希望隐藏图表中的分支名称和线条。您可以使用showBranches关键字来执行此操作。默认情况下，它的值为true. 您可以将其设置为false使用指令。

使用示例：

%%{init: { '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
0-50309071-805354fashabc3-1b744094-0e1c1ce5-b28a8e66-0133dec8-7af84f69-7988b2d11-5e8db9812-b2b5c3914-37ad98315-16070a0

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

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

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

rotateCommitLabel您可以使用指令中的关键字更改提交标签的布局。它默认为true，这意味着提交标签是旋转的。

使用示例：旋转提交标签

%%{init: { '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
mainc2b1b2feat(api): ...abfix(client): .extra long label..feat(modules): ...test(client): ...fix(api): ...ci: ...8-c2001899-8cfe90d

使用示例：水平提交标签

%%{init: { '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
mainc2b1b2feat(api): ...abfix(client): .extra long label..feat(modules): ...test(client): ...fix(api): ...ci: ...8-969966c9-572c915

隐藏提交标签

有时您可能希望从图表中隐藏提交标签。您可以使用showCommitLabel关键字来执行此操作。默认情况下，它的值为true. 您可以将其设置为false使用指令。

使用示例：

%%{init: { '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. 您可以使用指令将其设置为任何字符串。

使用示例：

%%{init: { '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"
MetroLine1MetroLine2MetroLine3NewYorkDallasLosAngelesChicagoHoustonPhoenixDenverAtlantaMiamiWashingtonMY JUNCTIONBostonDetroitSanFrancisco

查看使用 Code Chart 创建的假想铁路图。在这里，我们将默认的主分支名称更改为MetroLine1.

自定义分支排序

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

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

代码图表遵循order关键字的给定优先顺序。

  • 主分支总是首先显示，因为它的默认顺序值为0. （除非它的顺序被修改和改变0使用mainBranchOrder配置中的关键字）
  • 接下来，所有没有 的分支order都按照它们在图表代码中出现的顺序显示。
  • 接下来，所有带有 的分支都按其值order的顺序显示。order

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

使用示例：

%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true}} }%%
      gitGraph
      commit
      branch test1 order: 3
      branch test2 order: 2
      branch test3 order: 1

maintest3test2test10-3e6a51b

看图，所有的分支都按照定义的顺序。

使用示例：

%%{init: { '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

test2test3test4maintest10-d9331df

看图，这里，所有没有指定顺序的分支都是按照它们定义的顺序绘制的。然后，test4分支被绘制，因为 的顺序1。然后，main分支被绘制，因为 的顺序2。并且，最后test1被绘制是因为 的顺序3。

注意：因为我们已经覆盖了mainBranchOrderto 2，所以main分支不是在开始时绘制的，而是按照顺序进行的。

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

主题

Code Chart 支持一堆预定义的主题，您可以使用它们来找到适合您的主题。PS：您实际上可以覆盖现有主题的变量以获取您自己的自定义主题。在此处了解有关主题化图表的更多信息。

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

  • base
  • forest
  • dark
  • default
  • neutral

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

基本主题

%%{init: { '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
mainhotfixdevelopfeatureBfeatureArelease0-28b1f731-42f2801ashabc3-60c7f594-d7e0b7c5-8265d036-db65eb78-bce8f829-e426ed111-f8af70312-180079a14-0f7596115-f62ab0a

森林主题

%%{init: { '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
mainhotfixdevelopfeatureBfeatureArelease0-682c08c1-8031866ashabc3-3cf7e734-842ddb95-fb8f16c6-93a83a78-0e84af69-416b04411-40ce45112-58b7c5314-1adc44615-3d15175

默认主题

%%{init: { '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
mainhotfixdevelopfeatureBfeatureArelease0-287f8491-919ec83ashabc3-5ca5dd94-21c7cf55-fc207916-77bc00d8-1963cc49-65efd6b11-4aa5bc812-317dede14-fbca9ed15-950626f

黑暗主题

%%{init: { '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
mainhotfixdevelopfeatureBfeatureArelease0-a2742561-bfb0804ashabc3-5796dbc4-eaf2f0e5-b86add86-129b3708-b3e08209-1a37c6011-7f1542912-f22f2d614-8f3547715-6740ba1

中性主题

%%{init: { '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
mainhotfixdevelopfeatureBfeatureArelease0-f2e9eb31-6373128ashabc3-e7ce0954-82bed1d5-5d6d6e76-50ccedb8-70a33ac9-62208cc11-3a3773712-2cac9e714-2a8895915-3774427

使用主题变量进行自定义

代码图表允许您使用主题变量自定义图表，这些变量控制图表各种元素的外观。

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

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

%%{init: { '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
maindevelopfeatureA0-92563781-c63abd0v1.0.02-959952e3-f00b5b64-c1e52f46-00891a07-196ad0f

重要的：

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

自定义分支颜色

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

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

例子：

现在让我们覆盖git0togit3变量的默认值：

    %%{init: { '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

maindevelopfeatureA0-c7e69331-f640e44v1.0.02-ba042183-4f1441c4-f92a5826-b7038847-1c1919e

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

自定义分支标签颜色

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

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

现在让我们覆盖gitBranchLabel0togitBranchLabel2变量的默认值：

    %%{init: { '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
mainbranch1branch2branch3branch4branch5branch6branch7branch8branch90-987e390

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

自定义提交颜色

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

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

    %%{init: { '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

maindevelopfeatureA0-39e82d11-f1f7200v1.0.02-a9e71683-9a4a1a84-d7d84486-e3f6aa67-86c22a2

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

自定义提交标签字体大小

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

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

    %%{init: { '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

maindevelopfeatureA0-b2fc7da1-6943ad8v1.0.02-79cddbf3-a85c2b54-3b058126-4997b6c7-39ff9f8

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

自定义标签标签字体大小

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

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

    %%{init: { '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

maindevelopfeatureA0-18de61b1-4b790ebv1.0.02-3a94cde3-b57d5d34-9d10c826-73a2a3c7-13bf203

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

自定义标签颜色

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

    %%{init: { '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

maindevelopfeatureA0-8b798e71-d6265b9v1.0.02-02ff94f3-19cb8724-3e5e6096-6e2c8a77-9e5ef7d

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

自定义突出显示提交颜色

您可以使用主题变量自定义与其所在分支相关的突出显示提交gitInv0颜色gitInv7。Code Chart 允许您为最多 8 个分支特定的高亮提交设置颜色，其中gitInv0变量将驱动第一个分支的高亮提交gitInv1的值，将驱动第二个分支的高亮提交标签的值等等。

例子：

现在让我们覆盖git0togit3变量的默认值：

    %%{init: { '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

maindevelopfeatureA0-8926a681-5e665a9v1.0.02-b790f183-494c4cb4-0ef150e6-5e4eeae7-469e4de

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