| 1 | > **Warning** |
| 2 | > |
| 3 | > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. |
| 4 | > |
| 5 | > ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/gitgraph.md](../../packages/mermaid/src/docs/syntax/gitgraph.md). |
| 6 | |
| 7 | # GitGraph Diagrams |
| 8 | |
| 9 | > A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches. |
| 10 | |
| 11 | 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. |
| 12 | |
| 13 | Mermaid can render Git diagrams |
| 14 | |
| 15 | ```mermaid-example |
| 16 | --- |
| 17 | title: Example Git diagram |
| 18 | --- |
| 19 | gitGraph |
| 20 | commit |
| 21 | commit |
| 22 | branch develop |
| 23 | checkout develop |
| 24 | commit |
| 25 | commit |
| 26 | checkout main |
| 27 | merge develop |
| 28 | commit |
| 29 | commit |
| 30 | ``` |
| 31 | |
| 32 | ```mermaid |
| 33 | --- |
| 34 | title: Example Git diagram |
| 35 | --- |
| 36 | gitGraph |
| 37 | commit |
| 38 | commit |
| 39 | branch develop |
| 40 | checkout develop |
| 41 | commit |
| 42 | commit |
| 43 | checkout main |
| 44 | merge develop |
| 45 | commit |
| 46 | commit |
| 47 | ``` |
| 48 | |
| 49 | In Mermaid, we support the basic git operations like: |
| 50 | |
| 51 | - _commit_ : Representing a new commit on the current branch. |
| 52 | - _branch_ : To create & switch to a new branch, setting it as the current branch. |
| 53 | - _checkout_ : To checking out an existing branch and setting it as the current branch. |
| 54 | - _merge_ : To merge an existing branch onto the current branch. |
| 55 | |
| 56 | With the help of these key git commands, you will be able to draw a gitgraph in Mermaid very easily and quickly. |
| 57 | Entity names are often capitalized, although there is no accepted standard on this, and it is not required in Mermaid. |
| 58 | |
| 59 | **NOTE**: `checkout` and `switch` can be used interchangeably. |
| 60 | |
| 61 | ## Syntax |
| 62 | |
| 63 | 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. |
| 64 | |
| 65 | 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. |
| 66 | |
| 67 | 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_**. |
| 68 | |
| 69 | You make use of **_commit_** keyword to register a commit on the current branch. Let see how this works: |
| 70 | |
| 71 | A simple gitgraph showing three commits on the default (**_main_**) branch: |
| 72 | |
| 73 | ```mermaid-example |
| 74 | gitGraph |
| 75 | commit |
| 76 | commit |
| 77 | commit |
| 78 | ``` |
| 79 | |
| 80 | ```mermaid |
| 81 | gitGraph |
| 82 | commit |
| 83 | commit |
| 84 | commit |
| 85 | ``` |
| 86 | |
| 87 | 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. |
| 88 | |
| 89 | ### Adding custom commit id |
| 90 | |
| 91 | 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"` |
| 92 | |
| 93 | Let us see how this works with the help of the following diagram: |
| 94 | |
| 95 | ```mermaid-example |
| 96 | gitGraph |
| 97 | commit id: "Alpha" |
| 98 | commit id: "Beta" |
| 99 | commit id: "Gamma" |
| 100 | ``` |
| 101 | |
| 102 | ```mermaid |
| 103 | gitGraph |
| 104 | commit id: "Alpha" |
| 105 | commit id: "Beta" |
| 106 | commit id: "Gamma" |
| 107 | ``` |
| 108 | |
| 109 | In this example, we have given our custom IDs to the commits. |
| 110 | |
| 111 | ### Modifying commit type |
| 112 | |
| 113 | In Mermaid, a commit can be of three type, which render a bit different in the diagram. These types are: |
| 114 | |
| 115 | - `NORMAL` : Default commit type. Represented by a solid circle in the diagram |
| 116 | - `REVERSE` : To emphasize a commit as a reverse commit. Represented by a crossed solid circle in the diagram. |
| 117 | - `HIGHLIGHT` : To highlight a particular commit in the diagram. Represented by a filled rectangle in the diagram. |
| 118 | |
| 119 | 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` |
| 120 | |
| 121 | NOTE: If no commit type is specified, `NORMAL` is picked as default. |
| 122 | |
| 123 | Let us see how these different commit type look with the help of the following diagram: |
| 124 | |
| 125 | ```mermaid-example |
| 126 | gitGraph |
| 127 | commit id: "Normal" |
| 128 | commit |
| 129 | commit id: "Reverse" type: REVERSE |
| 130 | commit |
| 131 | commit id: "Highlight" type: HIGHLIGHT |
| 132 | commit |
| 133 | ``` |
| 134 | |
| 135 | ```mermaid |
| 136 | gitGraph |
| 137 | commit id: "Normal" |
| 138 | commit |
| 139 | commit id: "Reverse" type: REVERSE |
| 140 | commit |
| 141 | commit id: "Highlight" type: HIGHLIGHT |
| 142 | commit |
| 143 | ``` |
| 144 | |
| 145 | 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. |
| 146 | |
| 147 | ### Adding Tags |
| 148 | |
| 149 | For a given commit you may decorate it as a **tag**, similar to the concept of tags or release version in git world. |
| 150 | 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"` |
| 151 | |
| 152 | Let us see how this works with the help of the following diagram: |
| 153 | |
| 154 | ```mermaid-example |
| 155 | gitGraph |
| 156 | commit |
| 157 | commit id: "Normal" tag: "v1.0.0" |
| 158 | commit |
| 159 | commit id: "Reverse" type: REVERSE tag: "RC_1" |
| 160 | commit |
| 161 | commit id: "Highlight" type: HIGHLIGHT tag: "8.8.4" |
| 162 | commit |
| 163 | ``` |
| 164 | |
| 165 | ```mermaid |
| 166 | gitGraph |
| 167 | commit |
| 168 | commit id: "Normal" tag: "v1.0.0" |
| 169 | commit |
| 170 | commit id: "Reverse" type: REVERSE tag: "RC_1" |
| 171 | commit |
| 172 | commit id: "Highlight" type: HIGHLIGHT tag: "8.8.4" |
| 173 | commit |
| 174 | ``` |
| 175 | |
| 176 | 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. |
| 177 | |
| 178 | ### Create a new branch |
| 179 | |
| 180 | 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"` |
| 181 | |
| 182 | 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. |
| 183 | |
| 184 | Let see this in an example: |
| 185 | |
| 186 | ```mermaid-example |
| 187 | gitGraph |
| 188 | commit |
| 189 | commit |
| 190 | branch develop |
| 191 | commit |
| 192 | commit |
| 193 | commit |
| 194 | ``` |
| 195 | |
| 196 | ```mermaid |
| 197 | gitGraph |
| 198 | commit |
| 199 | commit |
| 200 | branch develop |
| 201 | commit |
| 202 | commit |
| 203 | commit |
| 204 | ``` |
| 205 | |
| 206 | In this example, see how we started with default `main` branch, and pushed two commits on that. |
| 207 | Then we created the `develop` branch, and all commits afterwards are put on the `develop` branch as it became the current branch. |
| 208 | |
| 209 | ### Checking out an existing branch |
| 210 | |
| 211 | 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` |
| 212 | |
| 213 | 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. |
| 214 | |
| 215 | Let see modify our previous example: |
| 216 | |
| 217 | ```mermaid-example |
| 218 | gitGraph |
| 219 | commit |
| 220 | commit |
| 221 | branch develop |
| 222 | commit |
| 223 | commit |
| 224 | commit |
| 225 | checkout main |
| 226 | commit |
| 227 | commit |
| 228 | ``` |
| 229 | |
| 230 | ```mermaid |
| 231 | gitGraph |
| 232 | commit |
| 233 | commit |
| 234 | branch develop |
| 235 | commit |
| 236 | commit |
| 237 | commit |
| 238 | checkout main |
| 239 | commit |
| 240 | commit |
| 241 | ``` |
| 242 | |
| 243 | In this example, see how we started with default `main` branch, and pushed two commits on that. |
| 244 | Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch. |
| 245 | 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`. |
| 246 | |
| 247 | ### Merging two branches |
| 248 | |
| 249 | 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. |
| 250 | |
| 251 | Usage example: `merge develop` |
| 252 | |
| 253 | 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**. |
| 254 | |
| 255 | Let us modify our previous example to merge our two branches: |
| 256 | |
| 257 | ```mermaid-example |
| 258 | gitGraph |
| 259 | commit |
| 260 | commit |
| 261 | branch develop |
| 262 | commit |
| 263 | commit |
| 264 | commit |
| 265 | checkout main |
| 266 | commit |
| 267 | commit |
| 268 | merge develop |
| 269 | commit |
| 270 | commit |
| 271 | ``` |
| 272 | |
| 273 | ```mermaid |
| 274 | gitGraph |
| 275 | commit |
| 276 | commit |
| 277 | branch develop |
| 278 | commit |
| 279 | commit |
| 280 | commit |
| 281 | checkout main |
| 282 | commit |
| 283 | commit |
| 284 | merge develop |
| 285 | commit |
| 286 | commit |
| 287 | ``` |
| 288 | |
| 289 | In this example, see how we started with default `main` branch, and pushed two commits on that. |
| 290 | Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch. |
| 291 | 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`. |
| 292 | After this we merge the `develop` branch onto the current branch `main`, resulting in a merge commit. |
| 293 | Since the current branch at this point is still `main`, the last two commits are registered against that. |
| 294 | |
| 295 | You can also decorate your merge with similar attributes as you did for the commit using: |
| 296 | |
| 297 | - `id`--> To override the default ID with custom ID |
| 298 | - `tag`--> To add a custom tag to your merge commit |
| 299 | - `type`--> To override the default shape of merge commit. Here you can use other commit type mentioned earlier. |
| 300 | |
| 301 | And you can choose to use none, some or all of these attributes together. |
| 302 | For example: `merge develop id: "my_custom_id" tag: "my_custom_tag" type: REVERSE` |
| 303 | |
| 304 | Let us see how this works with the help of the following diagram: |
| 305 | |
| 306 | ```mermaid-example |
| 307 | gitGraph |
| 308 | commit id: "1" |
| 309 | commit id: "2" |
| 310 | branch nice_feature |
| 311 | checkout nice_feature |
| 312 | commit id: "3" |
| 313 | checkout main |
| 314 | commit id: "4" |
| 315 | checkout nice_feature |
| 316 | branch very_nice_feature |
| 317 | checkout very_nice_feature |
| 318 | commit id: "5" |
| 319 | checkout main |
| 320 | commit id: "6" |
| 321 | checkout nice_feature |
| 322 | commit id: "7" |
| 323 | checkout main |
| 324 | merge nice_feature id: "customID" tag: "customTag" type: REVERSE |
| 325 | checkout very_nice_feature |
| 326 | commit id: "8" |
| 327 | checkout main |
| 328 | commit id: "9" |
| 329 | ``` |
| 330 | |
| 331 | ```mermaid |
| 332 | gitGraph |
| 333 | commit id: "1" |
| 334 | commit id: "2" |
| 335 | branch nice_feature |
| 336 | checkout nice_feature |
| 337 | commit id: "3" |
| 338 | checkout main |
| 339 | commit id: "4" |
| 340 | checkout nice_feature |
| 341 | branch very_nice_feature |
| 342 | checkout very_nice_feature |
| 343 | commit id: "5" |
| 344 | checkout main |
| 345 | commit id: "6" |
| 346 | checkout nice_feature |
| 347 | commit id: "7" |
| 348 | checkout main |
| 349 | merge nice_feature id: "customID" tag: "customTag" type: REVERSE |
| 350 | checkout very_nice_feature |
| 351 | commit id: "8" |
| 352 | checkout main |
| 353 | commit id: "9" |
| 354 | ``` |
| 355 | |
| 356 | ### Cherry Pick commit from another branch |
| 357 | |
| 358 | 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. |
| 359 | |
| 360 | 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: |
| 361 | |
| 362 | `cherry-pick id: "your_custom_id"` |
| 363 | |
| 364 | 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. |
| 365 | |
| 366 | A few important rules to note here are: |
| 367 | |
| 368 | 1. 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. |
| 369 | 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. |
| 370 | 3. Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw. |
| 371 | 4. 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. |
| 372 | 5. The specified parent commit must be an immediate parent of the merge commit being cherry-picked. |
| 373 | |
| 374 | Let see an example: |
| 375 | |
| 376 | ```mermaid-example |
| 377 | gitGraph |
| 378 | commit id: "ZERO" |
| 379 | branch develop |
| 380 | branch release |
| 381 | commit id:"A" |
| 382 | checkout main |
| 383 | commit id:"ONE" |
| 384 | checkout develop |
| 385 | commit id:"B" |
| 386 | checkout main |
| 387 | merge develop id:"MERGE" |
| 388 | commit id:"TWO" |
| 389 | checkout release |
| 390 | cherry-pick id:"MERGE" parent:"B" |
| 391 | commit id:"THREE" |
| 392 | checkout develop |
| 393 | commit id:"C" |
| 394 | ``` |
| 395 | |
| 396 | ```mermaid |
| 397 | gitGraph |
| 398 | commit id: "ZERO" |
| 399 | branch develop |
| 400 | branch release |
| 401 | commit id:"A" |
| 402 | checkout main |
| 403 | commit id:"ONE" |
| 404 | checkout develop |
| 405 | commit id:"B" |
| 406 | checkout main |
| 407 | merge develop id:"MERGE" |
| 408 | commit id:"TWO" |
| 409 | checkout release |
| 410 | cherry-pick id:"MERGE" parent:"B" |
| 411 | commit id:"THREE" |
| 412 | checkout develop |
| 413 | commit id:"C" |
| 414 | ``` |
| 415 | |
| 416 | ## GitGraph specific configuration options |
| 417 | |
| 418 | In Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options: |
| 419 | |
| 420 | - `showBranches` : Boolean, default is `true`. If set to `false`, the branches are not shown in the diagram. |
| 421 | - `showCommitLabel` : Boolean, default is `true`. If set to `false`, the commit labels are not shown in the diagram. |
| 422 | - `mainBranchName` : String, default is `main`. The name of the default/root branch. |
| 423 | - `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. |
| 424 | - `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. |
| 425 | |
| 426 | Let's look at them one by one. |
| 427 | |
| 428 | ## Hiding Branch names and lines |
| 429 | |
| 430 | 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. |
| 431 | |
| 432 | Usage example: |
| 433 | |
| 434 | ```mermaid-example |
| 435 | --- |
| 436 | config: |
| 437 | logLevel: 'debug' |
| 438 | theme: 'base' |
| 439 | gitGraph: |
| 440 | showBranches: false |
| 441 | --- |
| 442 | gitGraph |
| 443 | commit |
| 444 | branch hotfix |
| 445 | checkout hotfix |
| 446 | commit |
| 447 | branch develop |
| 448 | checkout develop |
| 449 | commit id:"ash" tag:"abc" |
| 450 | branch featureB |
| 451 | checkout featureB |
| 452 | commit type:HIGHLIGHT |
| 453 | checkout main |
| 454 | checkout hotfix |
| 455 | commit type:NORMAL |
| 456 | checkout develop |
| 457 | commit type:REVERSE |
| 458 | checkout featureB |
| 459 | commit |
| 460 | checkout main |
| 461 | merge hotfix |
| 462 | checkout featureB |
| 463 | commit |
| 464 | checkout develop |
| 465 | branch featureA |
| 466 | commit |
| 467 | checkout develop |
| 468 | merge hotfix |
| 469 | checkout featureA |
| 470 | commit |
| 471 | checkout featureB |
| 472 | commit |
| 473 | checkout develop |
| 474 | merge featureA |
| 475 | branch release |
| 476 | checkout release |
| 477 | commit |
| 478 | checkout main |
| 479 | commit |
| 480 | checkout release |
| 481 | merge main |
| 482 | checkout develop |
| 483 | merge release |
| 484 | ``` |
| 485 | |
| 486 | ```mermaid |
| 487 | --- |
| 488 | config: |
| 489 | logLevel: 'debug' |
| 490 | theme: 'base' |
| 491 | gitGraph: |
| 492 | showBranches: false |
| 493 | --- |
| 494 | gitGraph |
| 495 | commit |
| 496 | branch hotfix |
| 497 | checkout hotfix |
| 498 | commit |
| 499 | branch develop |
| 500 | checkout develop |
| 501 | commit id:"ash" tag:"abc" |
| 502 | branch featureB |
| 503 | checkout featureB |
| 504 | commit type:HIGHLIGHT |
| 505 | checkout main |
| 506 | checkout hotfix |
| 507 | commit type:NORMAL |
| 508 | checkout develop |
| 509 | commit type:REVERSE |
| 510 | checkout featureB |
| 511 | commit |
| 512 | checkout main |
| 513 | merge hotfix |
| 514 | checkout featureB |
| 515 | commit |
| 516 | checkout develop |
| 517 | branch featureA |
| 518 | commit |
| 519 | checkout develop |
| 520 | merge hotfix |
| 521 | checkout featureA |
| 522 | commit |
| 523 | checkout featureB |
| 524 | commit |
| 525 | checkout develop |
| 526 | merge featureA |
| 527 | branch release |
| 528 | checkout release |
| 529 | commit |
| 530 | checkout main |
| 531 | commit |
| 532 | checkout release |
| 533 | merge main |
| 534 | checkout develop |
| 535 | merge release |
| 536 | ``` |
| 537 | |
| 538 | ## Commit labels Layout: Rotated or Horizontal |
| 539 | |
| 540 | 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. |
| 541 | |
| 542 | 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. |
| 543 | |
| 544 | 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. |
| 545 | |
| 546 | Usage example: Rotated commit labels |
| 547 | |
| 548 | ```mermaid-example |
| 549 | --- |
| 550 | config: |
| 551 | logLevel: 'debug' |
| 552 | theme: 'base' |
| 553 | gitGraph: |
| 554 | rotateCommitLabel: true |
| 555 | --- |
| 556 | gitGraph |
| 557 | commit id: "feat(api): ..." |
| 558 | commit id: "a" |
| 559 | commit id: "b" |
| 560 | commit id: "fix(client): .extra long label.." |
| 561 | branch c2 |
| 562 | commit id: "feat(modules): ..." |
| 563 | commit id: "test(client): ..." |
| 564 | checkout main |
| 565 | commit id: "fix(api): ..." |
| 566 | commit id: "ci: ..." |
| 567 | branch b1 |
| 568 | commit |
| 569 | branch b2 |
| 570 | commit |
| 571 | ``` |
| 572 | |
| 573 | ```mermaid |
| 574 | --- |
| 575 | config: |
| 576 | logLevel: 'debug' |
| 577 | theme: 'base' |
| 578 | gitGraph: |
| 579 | rotateCommitLabel: true |
| 580 | --- |
| 581 | gitGraph |
| 582 | commit id: "feat(api): ..." |
| 583 | commit id: "a" |
| 584 | commit id: "b" |
| 585 | commit id: "fix(client): .extra long label.." |
| 586 | branch c2 |
| 587 | commit id: "feat(modules): ..." |
| 588 | commit id: "test(client): ..." |
| 589 | checkout main |
| 590 | commit id: "fix(api): ..." |
| 591 | commit id: "ci: ..." |
| 592 | branch b1 |
| 593 | commit |
| 594 | branch b2 |
| 595 | commit |
| 596 | ``` |
| 597 | |
| 598 | Usage example: Horizontal commit labels |
| 599 | |
| 600 | ```mermaid-example |
| 601 | --- |
| 602 | config: |
| 603 | logLevel: 'debug' |
| 604 | theme: 'base' |
| 605 | gitGraph: |
| 606 | rotateCommitLabel: false |
| 607 | --- |
| 608 | gitGraph |
| 609 | commit id: "feat(api): ..." |
| 610 | commit id: "a" |
| 611 | commit id: "b" |
| 612 | commit id: "fix(client): .extra long label.." |
| 613 | branch c2 |
| 614 | commit id: "feat(modules): ..." |
| 615 | commit id: "test(client): ..." |
| 616 | checkout main |
| 617 | commit id: "fix(api): ..." |
| 618 | commit id: "ci: ..." |
| 619 | branch b1 |
| 620 | commit |
| 621 | branch b2 |
| 622 | commit |
| 623 | ``` |
| 624 | |
| 625 | ```mermaid |
| 626 | --- |
| 627 | config: |
| 628 | logLevel: 'debug' |
| 629 | theme: 'base' |
| 630 | gitGraph: |
| 631 | rotateCommitLabel: false |
| 632 | --- |
| 633 | gitGraph |
| 634 | commit id: "feat(api): ..." |
| 635 | commit id: "a" |
| 636 | commit id: "b" |
| 637 | commit id: "fix(client): .extra long label.." |
| 638 | branch c2 |
| 639 | commit id: "feat(modules): ..." |
| 640 | commit id: "test(client): ..." |
| 641 | checkout main |
| 642 | commit id: "fix(api): ..." |
| 643 | commit id: "ci: ..." |
| 644 | branch b1 |
| 645 | commit |
| 646 | branch b2 |
| 647 | commit |
| 648 | ``` |
| 649 | |
| 650 | ## Hiding commit labels |
| 651 | |
| 652 | 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. |
| 653 | |
| 654 | Usage example: |
| 655 | |
| 656 | ```mermaid-example |
| 657 | --- |
| 658 | config: |
| 659 | logLevel: 'debug' |
| 660 | theme: 'base' |
| 661 | gitGraph: |
| 662 | showBranches: false |
| 663 | showCommitLabel: false |
| 664 | --- |
| 665 | gitGraph |
| 666 | commit |
| 667 | branch hotfix |
| 668 | checkout hotfix |
| 669 | commit |
| 670 | branch develop |
| 671 | checkout develop |
| 672 | commit id:"ash" |
| 673 | branch featureB |
| 674 | checkout featureB |
| 675 | commit type:HIGHLIGHT |
| 676 | checkout main |
| 677 | checkout hotfix |
| 678 | commit type:NORMAL |
| 679 | checkout develop |
| 680 | commit type:REVERSE |
| 681 | checkout featureB |
| 682 | commit |
| 683 | checkout main |
| 684 | merge hotfix |
| 685 | checkout featureB |
| 686 | commit |
| 687 | checkout develop |
| 688 | branch featureA |
| 689 | commit |
| 690 | checkout develop |
| 691 | merge hotfix |
| 692 | checkout featureA |
| 693 | commit |
| 694 | checkout featureB |
| 695 | commit |
| 696 | checkout develop |
| 697 | merge featureA |
| 698 | branch release |
| 699 | checkout release |
| 700 | commit |
| 701 | checkout main |
| 702 | commit |
| 703 | checkout release |
| 704 | merge main |
| 705 | checkout develop |
| 706 | merge release |
| 707 | ``` |
| 708 | |
| 709 | ```mermaid |
| 710 | --- |
| 711 | config: |
| 712 | logLevel: 'debug' |
| 713 | theme: 'base' |
| 714 | gitGraph: |
| 715 | showBranches: false |
| 716 | showCommitLabel: false |
| 717 | --- |
| 718 | gitGraph |
| 719 | commit |
| 720 | branch hotfix |
| 721 | checkout hotfix |
| 722 | commit |
| 723 | branch develop |
| 724 | checkout develop |
| 725 | commit id:"ash" |
| 726 | branch featureB |
| 727 | checkout featureB |
| 728 | commit type:HIGHLIGHT |
| 729 | checkout main |
| 730 | checkout hotfix |
| 731 | commit type:NORMAL |
| 732 | checkout develop |
| 733 | commit type:REVERSE |
| 734 | checkout featureB |
| 735 | commit |
| 736 | checkout main |
| 737 | merge hotfix |
| 738 | checkout featureB |
| 739 | commit |
| 740 | checkout develop |
| 741 | branch featureA |
| 742 | commit |
| 743 | checkout develop |
| 744 | merge hotfix |
| 745 | checkout featureA |
| 746 | commit |
| 747 | checkout featureB |
| 748 | commit |
| 749 | checkout develop |
| 750 | merge featureA |
| 751 | branch release |
| 752 | checkout release |
| 753 | commit |
| 754 | checkout main |
| 755 | commit |
| 756 | checkout release |
| 757 | merge main |
| 758 | checkout develop |
| 759 | merge release |
| 760 | ``` |
| 761 | |
| 762 | ## Customizing main branch name |
| 763 | |
| 764 | 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. |
| 765 | |
| 766 | Usage example: |
| 767 | |
| 768 | ```mermaid-example |
| 769 | --- |
| 770 | config: |
| 771 | logLevel: 'debug' |
| 772 | theme: 'base' |
| 773 | gitGraph: |
| 774 | showBranches: true |
| 775 | showCommitLabel: true |
| 776 | mainBranchName: 'MetroLine1' |
| 777 | --- |
| 778 | gitGraph |
| 779 | commit id:"NewYork" |
| 780 | commit id:"Dallas" |
| 781 | branch MetroLine2 |
| 782 | commit id:"LosAngeles" |
| 783 | commit id:"Chicago" |
| 784 | commit id:"Houston" |
| 785 | branch MetroLine3 |
| 786 | commit id:"Phoenix" |
| 787 | commit type: HIGHLIGHT id:"Denver" |
| 788 | commit id:"Boston" |
| 789 | checkout MetroLine1 |
| 790 | commit id:"Atlanta" |
| 791 | merge MetroLine3 |
| 792 | commit id:"Miami" |
| 793 | commit id:"Washington" |
| 794 | merge MetroLine2 tag:"MY JUNCTION" |
| 795 | commit id:"Boston" |
| 796 | commit id:"Detroit" |
| 797 | commit type:REVERSE id:"SanFrancisco" |
| 798 | ``` |
| 799 | |
| 800 | ```mermaid |
| 801 | --- |
| 802 | config: |
| 803 | logLevel: 'debug' |
| 804 | theme: 'base' |
| 805 | gitGraph: |
| 806 | showBranches: true |
| 807 | showCommitLabel: true |
| 808 | mainBranchName: 'MetroLine1' |
| 809 | --- |
| 810 | gitGraph |
| 811 | commit id:"NewYork" |
| 812 | commit id:"Dallas" |
| 813 | branch MetroLine2 |
| 814 | commit id:"LosAngeles" |
| 815 | commit id:"Chicago" |
| 816 | commit id:"Houston" |
| 817 | branch MetroLine3 |
| 818 | commit id:"Phoenix" |
| 819 | commit type: HIGHLIGHT id:"Denver" |
| 820 | commit id:"Boston" |
| 821 | checkout MetroLine1 |
| 822 | commit id:"Atlanta" |
| 823 | merge MetroLine3 |
| 824 | commit id:"Miami" |
| 825 | commit id:"Washington" |
| 826 | merge MetroLine2 tag:"MY JUNCTION" |
| 827 | commit id:"Boston" |
| 828 | commit id:"Detroit" |
| 829 | commit type:REVERSE id:"SanFrancisco" |
| 830 | ``` |
| 831 | |
| 832 | Look at the imaginary railroad map created using Mermaid. Here, we have changed the default main branch name to `MetroLine1`. |
| 833 | |
| 834 | ## Customizing branch ordering |
| 835 | |
| 836 | In Mermaid, by default the branches are shown in the order of their definition or appearance in the diagram code. |
| 837 | |
| 838 | 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. |
| 839 | |
| 840 | Mermaid follows the given precedence order of the `order` keyword. |
| 841 | |
| 842 | - 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) |
| 843 | - Next, All branches without an `order` are shown in the order of their appearance in the diagram code. |
| 844 | - Next, All branches with an `order` are shown in the order of their `order` value. |
| 845 | |
| 846 | To fully control the order of all the branches, you must define `order` for all the branches. |
| 847 | |
| 848 | Usage example: |
| 849 | |
| 850 | ```mermaid-example |
| 851 | --- |
| 852 | config: |
| 853 | logLevel: 'debug' |
| 854 | theme: 'base' |
| 855 | gitGraph: |
| 856 | showBranches: true |
| 857 | showCommitLabel: true |
| 858 | --- |
| 859 | gitGraph |
| 860 | commit |
| 861 | branch test1 order: 3 |
| 862 | branch test2 order: 2 |
| 863 | branch test3 order: 1 |
| 864 | |
| 865 | ``` |
| 866 | |
| 867 | ```mermaid |
| 868 | --- |
| 869 | config: |
| 870 | logLevel: 'debug' |
| 871 | theme: 'base' |
| 872 | gitGraph: |
| 873 | showBranches: true |
| 874 | showCommitLabel: true |
| 875 | --- |
| 876 | gitGraph |
| 877 | commit |
| 878 | branch test1 order: 3 |
| 879 | branch test2 order: 2 |
| 880 | branch test3 order: 1 |
| 881 | |
| 882 | ``` |
| 883 | |
| 884 | Look at the diagram, all the branches are following the order defined. |
| 885 | |
| 886 | Usage example: |
| 887 | |
| 888 | ```mermaid-example |
| 889 | --- |
| 890 | config: |
| 891 | logLevel: 'debug' |
| 892 | theme: 'base' |
| 893 | gitGraph: |
| 894 | showBranches: true |
| 895 | showCommitLabel: true |
| 896 | mainBranchOrder: 2 |
| 897 | --- |
| 898 | gitGraph |
| 899 | commit |
| 900 | branch test1 order: 3 |
| 901 | branch test2 |
| 902 | branch test3 |
| 903 | branch test4 order: 1 |
| 904 | |
| 905 | ``` |
| 906 | |
| 907 | ```mermaid |
| 908 | --- |
| 909 | config: |
| 910 | logLevel: 'debug' |
| 911 | theme: 'base' |
| 912 | gitGraph: |
| 913 | showBranches: true |
| 914 | showCommitLabel: true |
| 915 | mainBranchOrder: 2 |
| 916 | --- |
| 917 | gitGraph |
| 918 | commit |
| 919 | branch test1 order: 3 |
| 920 | branch test2 |
| 921 | branch test3 |
| 922 | branch test4 order: 1 |
| 923 | |
| 924 | ``` |
| 925 | |
| 926 | Look at the diagram, here, all the branches without a specified order are drawn in their order of definition. |
| 927 | Then, `test4` branch is drawn because the order of `1`. |
| 928 | Then, `main` branch is drawn because the order of `2`. |
| 929 | And, lastly `test1`is drawn because the order of `3`. |
| 930 | |
| 931 | NOTE: Because we have overridden the `mainBranchOrder` to `2`, the `main` branch is not drawn in the beginning, instead follows the ordering. |
| 932 | |
| 933 | Here, we have changed the default main branch name to `MetroLine1`. |
| 934 | |
| 935 | ## Orientation (v10.3.0+) |
| 936 | |
| 937 | Mermaid supports three graph orientations: **Left-to-Right** (default), **Top-to-Bottom**, and **Bottom-to-Top**. |
| 938 | |
| 939 | You can set this with either `LR:` (for [**Left-to-Right**](#left-to-right-default-lr)), `TB:` (for [**Top-to-Bottom**](#top-to-bottom-tb)) or `BT:` (for [**Bottom-to-Top**](#bottom-to-top-bt)) after `gitGraph`. |
| 940 | |
| 941 | ### Left to Right (default, `LR:`) |
| 942 | |
| 943 | 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. |
| 944 | |
| 945 | However, you can set this explicitly with `LR:` after `gitGraph`. |
| 946 | |
| 947 | Usage example: |
| 948 | |
| 949 | ```mermaid-example |
| 950 | gitGraph LR: |
| 951 | commit |
| 952 | commit |
| 953 | branch develop |
| 954 | commit |
| 955 | commit |
| 956 | checkout main |
| 957 | commit |
| 958 | commit |
| 959 | merge develop |
| 960 | commit |
| 961 | commit |
| 962 | ``` |
| 963 | |
| 964 | ```mermaid |
| 965 | gitGraph LR: |
| 966 | commit |
| 967 | commit |
| 968 | branch develop |
| 969 | commit |
| 970 | commit |
| 971 | checkout main |
| 972 | commit |
| 973 | commit |
| 974 | merge develop |
| 975 | commit |
| 976 | commit |
| 977 | ``` |
| 978 | |
| 979 | ### Top to Bottom (`TB:`) |
| 980 | |
| 981 | In `TB` (**Top-to-Bottom**) orientation, the commits run from top to bottom of the graph and branches are arranged side-by-side. |
| 982 | |
| 983 | To orient the graph this way, you need to add `TB:` after gitGraph. |
| 984 | |
| 985 | Usage example: |
| 986 | |
| 987 | ```mermaid-example |
| 988 | gitGraph TB: |
| 989 | commit |
| 990 | commit |
| 991 | branch develop |
| 992 | commit |
| 993 | commit |
| 994 | checkout main |
| 995 | commit |
| 996 | commit |
| 997 | merge develop |
| 998 | commit |
| 999 | commit |
| 1000 | ``` |
| 1001 | |
| 1002 | ```mermaid |
| 1003 | gitGraph TB: |
| 1004 | commit |
| 1005 | commit |
| 1006 | branch develop |
| 1007 | commit |
| 1008 | commit |
| 1009 | checkout main |
| 1010 | commit |
| 1011 | commit |
| 1012 | merge develop |
| 1013 | commit |
| 1014 | commit |
| 1015 | ``` |
| 1016 | |
| 1017 | ### Bottom to Top (`BT:`) (v11.0.0+) |
| 1018 | |
| 1019 | In `BT` (**Bottom-to-Top**) orientation, the commits run from bottom to top of the graph and branches are arranged side-by-side. |
| 1020 | |
| 1021 | To orient the graph this way, you need to add `BT:` after gitGraph. |
| 1022 | |
| 1023 | Usage example: |
| 1024 | |
| 1025 | ```mermaid-example |
| 1026 | gitGraph BT: |
| 1027 | commit |
| 1028 | commit |
| 1029 | branch develop |
| 1030 | commit |
| 1031 | commit |
| 1032 | checkout main |
| 1033 | commit |
| 1034 | commit |
| 1035 | merge develop |
| 1036 | commit |
| 1037 | commit |
| 1038 | ``` |
| 1039 | |
| 1040 | ```mermaid |
| 1041 | gitGraph BT: |
| 1042 | commit |
| 1043 | commit |
| 1044 | branch develop |
| 1045 | commit |
| 1046 | commit |
| 1047 | checkout main |
| 1048 | commit |
| 1049 | commit |
| 1050 | merge develop |
| 1051 | commit |
| 1052 | commit |
| 1053 | ``` |
| 1054 | |
| 1055 | ## Parallel commits (v10.8.0+) |
| 1056 | |
| 1057 | 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. |
| 1058 | |
| 1059 | ### Temporal Commits (default, `parallelCommits: false`) |
| 1060 | |
| 1061 | ```mermaid-example |
| 1062 | --- |
| 1063 | config: |
| 1064 | gitGraph: |
| 1065 | parallelCommits: false |
| 1066 | --- |
| 1067 | gitGraph: |
| 1068 | commit |
| 1069 | branch develop |
| 1070 | commit |
| 1071 | commit |
| 1072 | checkout main |
| 1073 | commit |
| 1074 | commit |
| 1075 | ``` |
| 1076 | |
| 1077 | ```mermaid |
| 1078 | --- |
| 1079 | config: |
| 1080 | gitGraph: |
| 1081 | parallelCommits: false |
| 1082 | --- |
| 1083 | gitGraph: |
| 1084 | commit |
| 1085 | branch develop |
| 1086 | commit |
| 1087 | commit |
| 1088 | checkout main |
| 1089 | commit |
| 1090 | commit |
| 1091 | ``` |
| 1092 | |
| 1093 | ### Parallel commits (`parallelCommits: true`) |
| 1094 | |
| 1095 | ```mermaid-example |
| 1096 | --- |
| 1097 | config: |
| 1098 | gitGraph: |
| 1099 | parallelCommits: true |
| 1100 | --- |
| 1101 | gitGraph: |
| 1102 | commit |
| 1103 | branch develop |
| 1104 | commit |
| 1105 | commit |
| 1106 | checkout main |
| 1107 | commit |
| 1108 | commit |
| 1109 | ``` |
| 1110 | |
| 1111 | ```mermaid |
| 1112 | --- |
| 1113 | config: |
| 1114 | gitGraph: |
| 1115 | parallelCommits: true |
| 1116 | --- |
| 1117 | gitGraph: |
| 1118 | commit |
| 1119 | branch develop |
| 1120 | commit |
| 1121 | commit |
| 1122 | checkout main |
| 1123 | commit |
| 1124 | commit |
| 1125 | ``` |
| 1126 | |
| 1127 | ## Themes |
| 1128 | |
| 1129 | 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](../config/theming.md). |
| 1130 | |
| 1131 | The following are the different pre-defined theme options: |
| 1132 | |
| 1133 | - `base` |
| 1134 | - `forest` |
| 1135 | - `dark` |
| 1136 | - `default` |
| 1137 | - `neutral` |
| 1138 | |
| 1139 | **NOTE**: To change theme you can either use the `initialize` call or _directives_. Learn more about [directives](../config/directives.md) |
| 1140 | Let's put them to use, and see how our sample diagram looks in different themes: |
| 1141 | |
| 1142 | ### Base Theme |
| 1143 | |
| 1144 | ```mermaid-example |
| 1145 | --- |
| 1146 | config: |
| 1147 | logLevel: 'debug' |
| 1148 | theme: 'base' |
| 1149 | --- |
| 1150 | gitGraph |
| 1151 | commit |
| 1152 | branch hotfix |
| 1153 | checkout hotfix |
| 1154 | commit |
| 1155 | branch develop |
| 1156 | checkout develop |
| 1157 | commit id:"ash" tag:"abc" |
| 1158 | branch featureB |
| 1159 | checkout featureB |
| 1160 | commit type:HIGHLIGHT |
| 1161 | checkout main |
| 1162 | checkout hotfix |
| 1163 | commit type:NORMAL |
| 1164 | checkout develop |
| 1165 | commit type:REVERSE |
| 1166 | checkout featureB |
| 1167 | commit |
| 1168 | checkout main |
| 1169 | merge hotfix |
| 1170 | checkout featureB |
| 1171 | commit |
| 1172 | checkout develop |
| 1173 | branch featureA |
| 1174 | commit |
| 1175 | checkout develop |
| 1176 | merge hotfix |
| 1177 | checkout featureA |
| 1178 | commit |
| 1179 | checkout featureB |
| 1180 | commit |
| 1181 | checkout develop |
| 1182 | merge featureA |
| 1183 | branch release |
| 1184 | checkout release |
| 1185 | commit |
| 1186 | checkout main |
| 1187 | commit |
| 1188 | checkout release |
| 1189 | merge main |
| 1190 | checkout develop |
| 1191 | merge release |
| 1192 | ``` |
| 1193 | |
| 1194 | ```mermaid |
| 1195 | --- |
| 1196 | config: |
| 1197 | logLevel: 'debug' |
| 1198 | theme: 'base' |
| 1199 | --- |
| 1200 | gitGraph |
| 1201 | commit |
| 1202 | branch hotfix |
| 1203 | checkout hotfix |
| 1204 | commit |
| 1205 | branch develop |
| 1206 | checkout develop |
| 1207 | commit id:"ash" tag:"abc" |
| 1208 | branch featureB |
| 1209 | checkout featureB |
| 1210 | commit type:HIGHLIGHT |
| 1211 | checkout main |
| 1212 | checkout hotfix |
| 1213 | commit type:NORMAL |
| 1214 | checkout develop |
| 1215 | commit type:REVERSE |
| 1216 | checkout featureB |
| 1217 | commit |
| 1218 | checkout main |
| 1219 | merge hotfix |
| 1220 | checkout featureB |
| 1221 | commit |
| 1222 | checkout develop |
| 1223 | branch featureA |
| 1224 | commit |
| 1225 | checkout develop |
| 1226 | merge hotfix |
| 1227 | checkout featureA |
| 1228 | commit |
| 1229 | checkout featureB |
| 1230 | commit |
| 1231 | checkout develop |
| 1232 | merge featureA |
| 1233 | branch release |
| 1234 | checkout release |
| 1235 | commit |
| 1236 | checkout main |
| 1237 | commit |
| 1238 | checkout release |
| 1239 | merge main |
| 1240 | checkout develop |
| 1241 | merge release |
| 1242 | ``` |
| 1243 | |
| 1244 | ### Forest Theme |
| 1245 | |
| 1246 | ```mermaid-example |
| 1247 | --- |
| 1248 | config: |
| 1249 | logLevel: 'debug' |
| 1250 | theme: 'forest' |
| 1251 | --- |
| 1252 | gitGraph |
| 1253 | commit |
| 1254 | branch hotfix |
| 1255 | checkout hotfix |
| 1256 | commit |
| 1257 | branch develop |
| 1258 | checkout develop |
| 1259 | commit id:"ash" tag:"abc" |
| 1260 | branch featureB |
| 1261 | checkout featureB |
| 1262 | commit type:HIGHLIGHT |
| 1263 | checkout main |
| 1264 | checkout hotfix |
| 1265 | commit type:NORMAL |
| 1266 | checkout develop |
| 1267 | commit type:REVERSE |
| 1268 | checkout featureB |
| 1269 | commit |
| 1270 | checkout main |
| 1271 | merge hotfix |
| 1272 | checkout featureB |
| 1273 | commit |
| 1274 | checkout develop |
| 1275 | branch featureA |
| 1276 | commit |
| 1277 | checkout develop |
| 1278 | merge hotfix |
| 1279 | checkout featureA |
| 1280 | commit |
| 1281 | checkout featureB |
| 1282 | commit |
| 1283 | checkout develop |
| 1284 | merge featureA |
| 1285 | branch release |
| 1286 | checkout release |
| 1287 | commit |
| 1288 | checkout main |
| 1289 | commit |
| 1290 | checkout release |
| 1291 | merge main |
| 1292 | checkout develop |
| 1293 | merge release |
| 1294 | ``` |
| 1295 | |
| 1296 | ```mermaid |
| 1297 | --- |
| 1298 | config: |
| 1299 | logLevel: 'debug' |
| 1300 | theme: 'forest' |
| 1301 | --- |
| 1302 | gitGraph |
| 1303 | commit |
| 1304 | branch hotfix |
| 1305 | checkout hotfix |
| 1306 | commit |
| 1307 | branch develop |
| 1308 | checkout develop |
| 1309 | commit id:"ash" tag:"abc" |
| 1310 | branch featureB |
| 1311 | checkout featureB |
| 1312 | commit type:HIGHLIGHT |
| 1313 | checkout main |
| 1314 | checkout hotfix |
| 1315 | commit type:NORMAL |
| 1316 | checkout develop |
| 1317 | commit type:REVERSE |
| 1318 | checkout featureB |
| 1319 | commit |
| 1320 | checkout main |
| 1321 | merge hotfix |
| 1322 | checkout featureB |
| 1323 | commit |
| 1324 | checkout develop |
| 1325 | branch featureA |
| 1326 | commit |
| 1327 | checkout develop |
| 1328 | merge hotfix |
| 1329 | checkout featureA |
| 1330 | commit |
| 1331 | checkout featureB |
| 1332 | commit |
| 1333 | checkout develop |
| 1334 | merge featureA |
| 1335 | branch release |
| 1336 | checkout release |
| 1337 | commit |
| 1338 | checkout main |
| 1339 | commit |
| 1340 | checkout release |
| 1341 | merge main |
| 1342 | checkout develop |
| 1343 | merge release |
| 1344 | ``` |
| 1345 | |
| 1346 | ### Default Theme |
| 1347 | |
| 1348 | ```mermaid-example |
| 1349 | --- |
| 1350 | config: |
| 1351 | logLevel: 'debug' |
| 1352 | theme: 'default' |
| 1353 | --- |
| 1354 | gitGraph |
| 1355 | commit type:HIGHLIGHT |
| 1356 | branch hotfix |
| 1357 | checkout hotfix |
| 1358 | commit |
| 1359 | branch develop |
| 1360 | checkout develop |
| 1361 | commit id:"ash" tag:"abc" |
| 1362 | branch featureB |
| 1363 | checkout featureB |
| 1364 | commit type:HIGHLIGHT |
| 1365 | checkout main |
| 1366 | checkout hotfix |
| 1367 | commit type:NORMAL |
| 1368 | checkout develop |
| 1369 | commit type:REVERSE |
| 1370 | checkout featureB |
| 1371 | commit |
| 1372 | checkout main |
| 1373 | merge hotfix |
| 1374 | checkout featureB |
| 1375 | commit |
| 1376 | checkout develop |
| 1377 | branch featureA |
| 1378 | commit |
| 1379 | checkout develop |
| 1380 | merge hotfix |
| 1381 | checkout featureA |
| 1382 | commit |
| 1383 | checkout featureB |
| 1384 | commit |
| 1385 | checkout develop |
| 1386 | merge featureA |
| 1387 | branch release |
| 1388 | checkout release |
| 1389 | commit |
| 1390 | checkout main |
| 1391 | commit |
| 1392 | checkout release |
| 1393 | merge main |
| 1394 | checkout develop |
| 1395 | merge release |
| 1396 | ``` |
| 1397 | |
| 1398 | ```mermaid |
| 1399 | --- |
| 1400 | config: |
| 1401 | logLevel: 'debug' |
| 1402 | theme: 'default' |
| 1403 | --- |
| 1404 | gitGraph |
| 1405 | commit type:HIGHLIGHT |
| 1406 | branch hotfix |
| 1407 | checkout hotfix |
| 1408 | commit |
| 1409 | branch develop |
| 1410 | checkout develop |
| 1411 | commit id:"ash" tag:"abc" |
| 1412 | branch featureB |
| 1413 | checkout featureB |
| 1414 | commit type:HIGHLIGHT |
| 1415 | checkout main |
| 1416 | checkout hotfix |
| 1417 | commit type:NORMAL |
| 1418 | checkout develop |
| 1419 | commit type:REVERSE |
| 1420 | checkout featureB |
| 1421 | commit |
| 1422 | checkout main |
| 1423 | merge hotfix |
| 1424 | checkout featureB |
| 1425 | commit |
| 1426 | checkout develop |
| 1427 | branch featureA |
| 1428 | commit |
| 1429 | checkout develop |
| 1430 | merge hotfix |
| 1431 | checkout featureA |
| 1432 | commit |
| 1433 | checkout featureB |
| 1434 | commit |
| 1435 | checkout develop |
| 1436 | merge featureA |
| 1437 | branch release |
| 1438 | checkout release |
| 1439 | commit |
| 1440 | checkout main |
| 1441 | commit |
| 1442 | checkout release |
| 1443 | merge main |
| 1444 | checkout develop |
| 1445 | merge release |
| 1446 | ``` |
| 1447 | |
| 1448 | ### Dark Theme |
| 1449 | |
| 1450 | ```mermaid-example |
| 1451 | --- |
| 1452 | config: |
| 1453 | logLevel: 'debug' |
| 1454 | theme: 'dark' |
| 1455 | --- |
| 1456 | gitGraph |
| 1457 | commit |
| 1458 | branch hotfix |
| 1459 | checkout hotfix |
| 1460 | commit |
| 1461 | branch develop |
| 1462 | checkout develop |
| 1463 | commit id:"ash" tag:"abc" |
| 1464 | branch featureB |
| 1465 | checkout featureB |
| 1466 | commit type:HIGHLIGHT |
| 1467 | checkout main |
| 1468 | checkout hotfix |
| 1469 | commit type:NORMAL |
| 1470 | checkout develop |
| 1471 | commit type:REVERSE |
| 1472 | checkout featureB |
| 1473 | commit |
| 1474 | checkout main |
| 1475 | merge hotfix |
| 1476 | checkout featureB |
| 1477 | commit |
| 1478 | checkout develop |
| 1479 | branch featureA |
| 1480 | commit |
| 1481 | checkout develop |
| 1482 | merge hotfix |
| 1483 | checkout featureA |
| 1484 | commit |
| 1485 | checkout featureB |
| 1486 | commit |
| 1487 | checkout develop |
| 1488 | merge featureA |
| 1489 | branch release |
| 1490 | checkout release |
| 1491 | commit |
| 1492 | checkout main |
| 1493 | commit |
| 1494 | checkout release |
| 1495 | merge main |
| 1496 | checkout develop |
| 1497 | merge release |
| 1498 | ``` |
| 1499 | |
| 1500 | ```mermaid |
| 1501 | --- |
| 1502 | config: |
| 1503 | logLevel: 'debug' |
| 1504 | theme: 'dark' |
| 1505 | --- |
| 1506 | gitGraph |
| 1507 | commit |
| 1508 | branch hotfix |
| 1509 | checkout hotfix |
| 1510 | commit |
| 1511 | branch develop |
| 1512 | checkout develop |
| 1513 | commit id:"ash" tag:"abc" |
| 1514 | branch featureB |
| 1515 | checkout featureB |
| 1516 | commit type:HIGHLIGHT |
| 1517 | checkout main |
| 1518 | checkout hotfix |
| 1519 | commit type:NORMAL |
| 1520 | checkout develop |
| 1521 | commit type:REVERSE |
| 1522 | checkout featureB |
| 1523 | commit |
| 1524 | checkout main |
| 1525 | merge hotfix |
| 1526 | checkout featureB |
| 1527 | commit |
| 1528 | checkout develop |
| 1529 | branch featureA |
| 1530 | commit |
| 1531 | checkout develop |
| 1532 | merge hotfix |
| 1533 | checkout featureA |
| 1534 | commit |
| 1535 | checkout featureB |
| 1536 | commit |
| 1537 | checkout develop |
| 1538 | merge featureA |
| 1539 | branch release |
| 1540 | checkout release |
| 1541 | commit |
| 1542 | checkout main |
| 1543 | commit |
| 1544 | checkout release |
| 1545 | merge main |
| 1546 | checkout develop |
| 1547 | merge release |
| 1548 | ``` |
| 1549 | |
| 1550 | ### Neutral Theme |
| 1551 | |
| 1552 | ```mermaid-example |
| 1553 | --- |
| 1554 | config: |
| 1555 | logLevel: 'debug' |
| 1556 | theme: 'neutral' |
| 1557 | --- |
| 1558 | gitGraph |
| 1559 | commit |
| 1560 | branch hotfix |
| 1561 | checkout hotfix |
| 1562 | commit |
| 1563 | branch develop |
| 1564 | checkout develop |
| 1565 | commit id:"ash" tag:"abc" |
| 1566 | branch featureB |
| 1567 | checkout featureB |
| 1568 | commit type:HIGHLIGHT |
| 1569 | checkout main |
| 1570 | checkout hotfix |
| 1571 | commit type:NORMAL |
| 1572 | checkout develop |
| 1573 | commit type:REVERSE |
| 1574 | checkout featureB |
| 1575 | commit |
| 1576 | checkout main |
| 1577 | merge hotfix |
| 1578 | checkout featureB |
| 1579 | commit |
| 1580 | checkout develop |
| 1581 | branch featureA |
| 1582 | commit |
| 1583 | checkout develop |
| 1584 | merge hotfix |
| 1585 | checkout featureA |
| 1586 | commit |
| 1587 | checkout featureB |
| 1588 | commit |
| 1589 | checkout develop |
| 1590 | merge featureA |
| 1591 | branch release |
| 1592 | checkout release |
| 1593 | commit |
| 1594 | checkout main |
| 1595 | commit |
| 1596 | checkout release |
| 1597 | merge main |
| 1598 | checkout develop |
| 1599 | merge release |
| 1600 | ``` |
| 1601 | |
| 1602 | ```mermaid |
| 1603 | --- |
| 1604 | config: |
| 1605 | logLevel: 'debug' |
| 1606 | theme: 'neutral' |
| 1607 | --- |
| 1608 | gitGraph |
| 1609 | commit |
| 1610 | branch hotfix |
| 1611 | checkout hotfix |
| 1612 | commit |
| 1613 | branch develop |
| 1614 | checkout develop |
| 1615 | commit id:"ash" tag:"abc" |
| 1616 | branch featureB |
| 1617 | checkout featureB |
| 1618 | commit type:HIGHLIGHT |
| 1619 | checkout main |
| 1620 | checkout hotfix |
| 1621 | commit type:NORMAL |
| 1622 | checkout develop |
| 1623 | commit type:REVERSE |
| 1624 | checkout featureB |
| 1625 | commit |
| 1626 | checkout main |
| 1627 | merge hotfix |
| 1628 | checkout featureB |
| 1629 | commit |
| 1630 | checkout develop |
| 1631 | branch featureA |
| 1632 | commit |
| 1633 | checkout develop |
| 1634 | merge hotfix |
| 1635 | checkout featureA |
| 1636 | commit |
| 1637 | checkout featureB |
| 1638 | commit |
| 1639 | checkout develop |
| 1640 | merge featureA |
| 1641 | branch release |
| 1642 | checkout release |
| 1643 | commit |
| 1644 | checkout main |
| 1645 | commit |
| 1646 | checkout release |
| 1647 | merge main |
| 1648 | checkout develop |
| 1649 | merge release |
| 1650 | ``` |
| 1651 | |
| 1652 | ## Customize using Theme Variables |
| 1653 | |
| 1654 | Mermaid allows you to customize your diagram using theme variables which govern the look and feel of various elements of the diagram. |
| 1655 | |
| 1656 | 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. |
| 1657 | |
| 1658 | See how the default theme is used to set the colors for the branches: |
| 1659 | |
| 1660 | ```mermaid-example |
| 1661 | --- |
| 1662 | config: |
| 1663 | logLevel: 'debug' |
| 1664 | theme: 'default' |
| 1665 | --- |
| 1666 | gitGraph |
| 1667 | commit |
| 1668 | branch develop |
| 1669 | commit tag:"v1.0.0" |
| 1670 | commit |
| 1671 | checkout main |
| 1672 | commit type: HIGHLIGHT |
| 1673 | commit |
| 1674 | merge develop |
| 1675 | commit |
| 1676 | branch featureA |
| 1677 | commit |
| 1678 | ``` |
| 1679 | |
| 1680 | ```mermaid |
| 1681 | --- |
| 1682 | config: |
| 1683 | logLevel: 'debug' |
| 1684 | theme: 'default' |
| 1685 | --- |
| 1686 | gitGraph |
| 1687 | commit |
| 1688 | branch develop |
| 1689 | commit tag:"v1.0.0" |
| 1690 | commit |
| 1691 | checkout main |
| 1692 | commit type: HIGHLIGHT |
| 1693 | commit |
| 1694 | merge develop |
| 1695 | commit |
| 1696 | branch featureA |
| 1697 | commit |
| 1698 | ``` |
| 1699 | |
| 1700 | > #### IMPORTANT: |
| 1701 | > |
| 1702 | > 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'. |
| 1703 | > _More on this in the next section. See examples on **Customizing branch label colors** below_ |
| 1704 | |
| 1705 | ### Customizing branch colors |
| 1706 | |
| 1707 | 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. |
| 1708 | |
| 1709 | 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. |
| 1710 | |
| 1711 | Example: |
| 1712 | |
| 1713 | Now let's override the default values for the `git0` to `git3` variables: |
| 1714 | |
| 1715 | ```mermaid-example |
| 1716 | --- |
| 1717 | config: |
| 1718 | logLevel: 'debug' |
| 1719 | theme: 'default' |
| 1720 | themeVariables: |
| 1721 | 'git0': '#ff0000' |
| 1722 | 'git1': '#00ff00' |
| 1723 | 'git2': '#0000ff' |
| 1724 | 'git3': '#ff00ff' |
| 1725 | 'git4': '#00ffff' |
| 1726 | 'git5': '#ffff00' |
| 1727 | 'git6': '#ff00ff' |
| 1728 | 'git7': '#00ffff' |
| 1729 | --- |
| 1730 | gitGraph |
| 1731 | commit |
| 1732 | branch develop |
| 1733 | commit tag:"v1.0.0" |
| 1734 | commit |
| 1735 | checkout main |
| 1736 | commit type: HIGHLIGHT |
| 1737 | commit |
| 1738 | merge develop |
| 1739 | commit |
| 1740 | branch featureA |
| 1741 | commit |
| 1742 | |
| 1743 | ``` |
| 1744 | |
| 1745 | ```mermaid |
| 1746 | --- |
| 1747 | config: |
| 1748 | logLevel: 'debug' |
| 1749 | theme: 'default' |
| 1750 | themeVariables: |
| 1751 | 'git0': '#ff0000' |
| 1752 | 'git1': '#00ff00' |
| 1753 | 'git2': '#0000ff' |
| 1754 | 'git3': '#ff00ff' |
| 1755 | 'git4': '#00ffff' |
| 1756 | 'git5': '#ffff00' |
| 1757 | 'git6': '#ff00ff' |
| 1758 | 'git7': '#00ffff' |
| 1759 | --- |
| 1760 | gitGraph |
| 1761 | commit |
| 1762 | branch develop |
| 1763 | commit tag:"v1.0.0" |
| 1764 | commit |
| 1765 | checkout main |
| 1766 | commit type: HIGHLIGHT |
| 1767 | commit |
| 1768 | merge develop |
| 1769 | commit |
| 1770 | branch featureA |
| 1771 | commit |
| 1772 | |
| 1773 | ``` |
| 1774 | |
| 1775 | See how the branch colors are changed to the values specified in the theme variables. |
| 1776 | |
| 1777 | ### Customizing branch label colors |
| 1778 | |
| 1779 | 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. |
| 1780 | |
| 1781 | Lets see how the default theme is used to set the colors for the branch labels: |
| 1782 | |
| 1783 | Now let's override the default values for the `gitBranchLabel0` to `gitBranchLabel2` variables: |
| 1784 | |
| 1785 | ```mermaid-example |
| 1786 | --- |
| 1787 | config: |
| 1788 | logLevel: 'debug' |
| 1789 | theme: 'default' |
| 1790 | themeVariables: |
| 1791 | 'gitBranchLabel0': '#ffffff' |
| 1792 | 'gitBranchLabel1': '#ffffff' |
| 1793 | 'gitBranchLabel2': '#ffffff' |
| 1794 | 'gitBranchLabel3': '#ffffff' |
| 1795 | 'gitBranchLabel4': '#ffffff' |
| 1796 | 'gitBranchLabel5': '#ffffff' |
| 1797 | 'gitBranchLabel6': '#ffffff' |
| 1798 | 'gitBranchLabel7': '#ffffff' |
| 1799 | 'gitBranchLabel8': '#ffffff' |
| 1800 | 'gitBranchLabel9': '#ffffff' |
| 1801 | --- |
| 1802 | gitGraph |
| 1803 | checkout main |
| 1804 | branch branch1 |
| 1805 | branch branch2 |
| 1806 | branch branch3 |
| 1807 | branch branch4 |
| 1808 | branch branch5 |
| 1809 | branch branch6 |
| 1810 | branch branch7 |
| 1811 | branch branch8 |
| 1812 | branch branch9 |
| 1813 | checkout branch1 |
| 1814 | commit |
| 1815 | ``` |
| 1816 | |
| 1817 | ```mermaid |
| 1818 | --- |
| 1819 | config: |
| 1820 | logLevel: 'debug' |
| 1821 | theme: 'default' |
| 1822 | themeVariables: |
| 1823 | 'gitBranchLabel0': '#ffffff' |
| 1824 | 'gitBranchLabel1': '#ffffff' |
| 1825 | 'gitBranchLabel2': '#ffffff' |
| 1826 | 'gitBranchLabel3': '#ffffff' |
| 1827 | 'gitBranchLabel4': '#ffffff' |
| 1828 | 'gitBranchLabel5': '#ffffff' |
| 1829 | 'gitBranchLabel6': '#ffffff' |
| 1830 | 'gitBranchLabel7': '#ffffff' |
| 1831 | 'gitBranchLabel8': '#ffffff' |
| 1832 | 'gitBranchLabel9': '#ffffff' |
| 1833 | --- |
| 1834 | gitGraph |
| 1835 | checkout main |
| 1836 | branch branch1 |
| 1837 | branch branch2 |
| 1838 | branch branch3 |
| 1839 | branch branch4 |
| 1840 | branch branch5 |
| 1841 | branch branch6 |
| 1842 | branch branch7 |
| 1843 | branch branch8 |
| 1844 | branch branch9 |
| 1845 | checkout branch1 |
| 1846 | commit |
| 1847 | ``` |
| 1848 | |
| 1849 | 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**. |
| 1850 | |
| 1851 | ### Customizing Commit colors |
| 1852 | |
| 1853 | You can customize commit using the `commitLabelColor` and `commitLabelBackground` theme variables for changes in the commit label color and background color respectively. |
| 1854 | |
| 1855 | Example: |
| 1856 | Now let's override the default values for the `commitLabelColor` to `commitLabelBackground` variables: |
| 1857 | |
| 1858 | ```mermaid-example |
| 1859 | --- |
| 1860 | config: |
| 1861 | logLevel: 'debug' |
| 1862 | theme: 'default' |
| 1863 | themeVariables: |
| 1864 | commitLabelColor: '#ff0000' |
| 1865 | commitLabelBackground: '#00ff00' |
| 1866 | --- |
| 1867 | gitGraph |
| 1868 | commit |
| 1869 | branch develop |
| 1870 | commit tag:"v1.0.0" |
| 1871 | commit |
| 1872 | checkout main |
| 1873 | commit type: HIGHLIGHT |
| 1874 | commit |
| 1875 | merge develop |
| 1876 | commit |
| 1877 | branch featureA |
| 1878 | commit |
| 1879 | |
| 1880 | ``` |
| 1881 | |
| 1882 | ```mermaid |
| 1883 | --- |
| 1884 | config: |
| 1885 | logLevel: 'debug' |
| 1886 | theme: 'default' |
| 1887 | themeVariables: |
| 1888 | commitLabelColor: '#ff0000' |
| 1889 | commitLabelBackground: '#00ff00' |
| 1890 | --- |
| 1891 | gitGraph |
| 1892 | commit |
| 1893 | branch develop |
| 1894 | commit tag:"v1.0.0" |
| 1895 | commit |
| 1896 | checkout main |
| 1897 | commit type: HIGHLIGHT |
| 1898 | commit |
| 1899 | merge develop |
| 1900 | commit |
| 1901 | branch featureA |
| 1902 | commit |
| 1903 | |
| 1904 | ``` |
| 1905 | |
| 1906 | See how the commit label color and background color are changed to the values specified in the theme variables. |
| 1907 | |
| 1908 | ### Customizing Commit Label Font Size |
| 1909 | |
| 1910 | You can customize commit using the `commitLabelFontSize` theme variables for changing in the font size of the commit label . |
| 1911 | |
| 1912 | Example: |
| 1913 | Now let's override the default values for the `commitLabelFontSize` variable: |
| 1914 | |
| 1915 | ```mermaid-example |
| 1916 | --- |
| 1917 | config: |
| 1918 | logLevel: 'debug' |
| 1919 | theme: 'default' |
| 1920 | themeVariables: |
| 1921 | commitLabelColor: '#ff0000' |
| 1922 | commitLabelBackground: '#00ff00' |
| 1923 | commitLabelFontSize: '16px' |
| 1924 | --- |
| 1925 | gitGraph |
| 1926 | commit |
| 1927 | branch develop |
| 1928 | commit tag:"v1.0.0" |
| 1929 | commit |
| 1930 | checkout main |
| 1931 | commit type: HIGHLIGHT |
| 1932 | commit |
| 1933 | merge develop |
| 1934 | commit |
| 1935 | branch featureA |
| 1936 | commit |
| 1937 | |
| 1938 | ``` |
| 1939 | |
| 1940 | ```mermaid |
| 1941 | --- |
| 1942 | config: |
| 1943 | logLevel: 'debug' |
| 1944 | theme: 'default' |
| 1945 | themeVariables: |
| 1946 | commitLabelColor: '#ff0000' |
| 1947 | commitLabelBackground: '#00ff00' |
| 1948 | commitLabelFontSize: '16px' |
| 1949 | --- |
| 1950 | gitGraph |
| 1951 | commit |
| 1952 | branch develop |
| 1953 | commit tag:"v1.0.0" |
| 1954 | commit |
| 1955 | checkout main |
| 1956 | commit type: HIGHLIGHT |
| 1957 | commit |
| 1958 | merge develop |
| 1959 | commit |
| 1960 | branch featureA |
| 1961 | commit |
| 1962 | |
| 1963 | ``` |
| 1964 | |
| 1965 | See how the commit label font size changed. |
| 1966 | |
| 1967 | ### Customizing Tag Label Font Size |
| 1968 | |
| 1969 | You can customize commit using the `tagLabelFontSize` theme variables for changing in the font size of the tag label . |
| 1970 | |
| 1971 | Example: |
| 1972 | Now let's override the default values for the `tagLabelFontSize` variable: |
| 1973 | |
| 1974 | ```mermaid-example |
| 1975 | --- |
| 1976 | config: |
| 1977 | logLevel: 'debug' |
| 1978 | theme: 'default' |
| 1979 | themeVariables: |
| 1980 | commitLabelColor: '#ff0000' |
| 1981 | commitLabelBackground: '#00ff00' |
| 1982 | tagLabelFontSize: '16px' |
| 1983 | --- |
| 1984 | gitGraph |
| 1985 | commit |
| 1986 | branch develop |
| 1987 | commit tag:"v1.0.0" |
| 1988 | commit |
| 1989 | checkout main |
| 1990 | commit type: HIGHLIGHT |
| 1991 | commit |
| 1992 | merge develop |
| 1993 | commit |
| 1994 | branch featureA |
| 1995 | commit |
| 1996 | |
| 1997 | ``` |
| 1998 | |
| 1999 | ```mermaid |
| 2000 | --- |
| 2001 | config: |
| 2002 | logLevel: 'debug' |
| 2003 | theme: 'default' |
| 2004 | themeVariables: |
| 2005 | commitLabelColor: '#ff0000' |
| 2006 | commitLabelBackground: '#00ff00' |
| 2007 | tagLabelFontSize: '16px' |
| 2008 | --- |
| 2009 | gitGraph |
| 2010 | commit |
| 2011 | branch develop |
| 2012 | commit tag:"v1.0.0" |
| 2013 | commit |
| 2014 | checkout main |
| 2015 | commit type: HIGHLIGHT |
| 2016 | commit |
| 2017 | merge develop |
| 2018 | commit |
| 2019 | branch featureA |
| 2020 | commit |
| 2021 | |
| 2022 | ``` |
| 2023 | |
| 2024 | See how the tag label font size changed. |
| 2025 | |
| 2026 | ### Customizing Tag colors |
| 2027 | |
| 2028 | 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. |
| 2029 | Example: |
| 2030 | Now let's override the default values for the `tagLabelColor`, `tagLabelBackground` and to `tagLabelBorder` variables: |
| 2031 | |
| 2032 | ```mermaid-example |
| 2033 | --- |
| 2034 | config: |
| 2035 | logLevel: 'debug' |
| 2036 | theme: 'default' |
| 2037 | themeVariables: |
| 2038 | tagLabelColor: '#ff0000' |
| 2039 | tagLabelBackground: '#00ff00' |
| 2040 | tagLabelBorder: '#0000ff' |
| 2041 | --- |
| 2042 | gitGraph |
| 2043 | commit |
| 2044 | branch develop |
| 2045 | commit tag:"v1.0.0" |
| 2046 | commit |
| 2047 | checkout main |
| 2048 | commit type: HIGHLIGHT |
| 2049 | commit |
| 2050 | merge develop |
| 2051 | commit |
| 2052 | branch featureA |
| 2053 | commit |
| 2054 | |
| 2055 | ``` |
| 2056 | |
| 2057 | ```mermaid |
| 2058 | --- |
| 2059 | config: |
| 2060 | logLevel: 'debug' |
| 2061 | theme: 'default' |
| 2062 | themeVariables: |
| 2063 | tagLabelColor: '#ff0000' |
| 2064 | tagLabelBackground: '#00ff00' |
| 2065 | tagLabelBorder: '#0000ff' |
| 2066 | --- |
| 2067 | gitGraph |
| 2068 | commit |
| 2069 | branch develop |
| 2070 | commit tag:"v1.0.0" |
| 2071 | commit |
| 2072 | checkout main |
| 2073 | commit type: HIGHLIGHT |
| 2074 | commit |
| 2075 | merge develop |
| 2076 | commit |
| 2077 | branch featureA |
| 2078 | commit |
| 2079 | |
| 2080 | ``` |
| 2081 | |
| 2082 | See how the tag colors are changed to the values specified in the theme variables. |
| 2083 | |
| 2084 | ### Customizing Highlight commit colors |
| 2085 | |
| 2086 | 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. |
| 2087 | |
| 2088 | Example: |
| 2089 | |
| 2090 | Now let's override the default values for the `git0` to `git3` variables: |
| 2091 | |
| 2092 | ```mermaid-example |
| 2093 | --- |
| 2094 | config: |
| 2095 | logLevel: 'debug' |
| 2096 | theme: 'default' |
| 2097 | themeVariables: |
| 2098 | 'gitInv0': '#ff0000' |
| 2099 | --- |
| 2100 | gitGraph |
| 2101 | commit |
| 2102 | branch develop |
| 2103 | commit tag:"v1.0.0" |
| 2104 | commit |
| 2105 | checkout main |
| 2106 | commit type: HIGHLIGHT |
| 2107 | commit |
| 2108 | merge develop |
| 2109 | commit |
| 2110 | branch featureA |
| 2111 | commit |
| 2112 | |
| 2113 | ``` |
| 2114 | |
| 2115 | ```mermaid |
| 2116 | --- |
| 2117 | config: |
| 2118 | logLevel: 'debug' |
| 2119 | theme: 'default' |
| 2120 | themeVariables: |
| 2121 | 'gitInv0': '#ff0000' |
| 2122 | --- |
| 2123 | gitGraph |
| 2124 | commit |
| 2125 | branch develop |
| 2126 | commit tag:"v1.0.0" |
| 2127 | commit |
| 2128 | checkout main |
| 2129 | commit type: HIGHLIGHT |
| 2130 | commit |
| 2131 | merge develop |
| 2132 | commit |
| 2133 | branch featureA |
| 2134 | commit |
| 2135 | |
| 2136 | ``` |
| 2137 | |
| 2138 | See how the highlighted commit color on the first branch is changed to the value specified in the theme variable `gitInv0`. |
| 2139 | |