| 1 | <!doctype html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="utf-8" /> |
| 5 | <meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
| 6 | <title>Git Graphs Mermaid Quick Test Page</title> |
| 7 | <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" /> |
| 8 | <style> |
| 9 | div.mermaid { |
| 10 | /* font-family: 'trebuchet ms', verdana, arial; */ |
| 11 | font-family: 'Courier New', Courier, monospace !important; |
| 12 | } |
| 13 | </style> |
| 14 | </head> |
| 15 | |
| 16 | <body> |
| 17 | <h1>Git graph demo</h1> |
| 18 | <h2>Simple "branch and merge" graph</h2> |
| 19 | <pre class="mermaid"> |
| 20 | --- |
| 21 | title: Simple "branch and merge" (left-to-right) |
| 22 | --- |
| 23 | gitGraph LR: |
| 24 | commit |
| 25 | branch newbranch |
| 26 | checkout newbranch |
| 27 | commit |
| 28 | checkout main |
| 29 | merge newbranch |
| 30 | </pre> |
| 31 | <pre class="mermaid"> |
| 32 | --- |
| 33 | title: Simple "branch and merge" (top-to-bottom) |
| 34 | --- |
| 35 | gitGraph TB: |
| 36 | commit |
| 37 | branch newbranch |
| 38 | checkout newbranch |
| 39 | commit |
| 40 | checkout main |
| 41 | merge newbranch |
| 42 | </pre> |
| 43 | <pre class="mermaid"> |
| 44 | --- |
| 45 | title: Simple "branch and merge" (bottom-to-top) |
| 46 | --- |
| 47 | gitGraph BT: |
| 48 | commit |
| 49 | branch newbranch |
| 50 | checkout newbranch |
| 51 | commit |
| 52 | checkout main |
| 53 | merge newbranch |
| 54 | </pre |
| 55 | > |
| 56 | <h2>Continuous development graph</h2> |
| 57 | <pre class="mermaid"> |
| 58 | --- |
| 59 | title: Continuous development (left-to-right) |
| 60 | --- |
| 61 | gitGraph LR: |
| 62 | commit |
| 63 | branch develop |
| 64 | checkout develop |
| 65 | commit |
| 66 | checkout main |
| 67 | merge develop |
| 68 | checkout develop |
| 69 | commit |
| 70 | checkout main |
| 71 | merge develop |
| 72 | </pre> |
| 73 | <pre class="mermaid"> |
| 74 | --- |
| 75 | title: Continuous development (top-to-bottom) |
| 76 | --- |
| 77 | gitGraph TB: |
| 78 | commit |
| 79 | branch develop |
| 80 | checkout develop |
| 81 | commit |
| 82 | checkout main |
| 83 | merge develop |
| 84 | checkout develop |
| 85 | commit |
| 86 | checkout main |
| 87 | merge develop |
| 88 | </pre> |
| 89 | <pre class="mermaid"> |
| 90 | --- |
| 91 | title: Continuous development (bottom-to-top) |
| 92 | --- |
| 93 | gitGraph BT: |
| 94 | commit |
| 95 | branch develop |
| 96 | checkout develop |
| 97 | commit |
| 98 | checkout main |
| 99 | merge develop |
| 100 | checkout develop |
| 101 | commit |
| 102 | checkout main |
| 103 | merge develop |
| 104 | </pre |
| 105 | > |
| 106 | <h2>Merge feature to advanced main graph</h2> |
| 107 | <pre class="mermaid"> |
| 108 | --- |
| 109 | title: Merge feature to advanced main (left-to-right) |
| 110 | --- |
| 111 | gitGraph LR: |
| 112 | commit |
| 113 | branch newbranch |
| 114 | checkout newbranch |
| 115 | commit |
| 116 | checkout main |
| 117 | commit |
| 118 | merge newbranch |
| 119 | </pre> |
| 120 | <pre class="mermaid"> |
| 121 | --- |
| 122 | title: Merge feature to advanced main (top-to-bottom) |
| 123 | --- |
| 124 | gitGraph TB: |
| 125 | commit |
| 126 | branch newbranch |
| 127 | checkout newbranch |
| 128 | commit |
| 129 | checkout main |
| 130 | commit |
| 131 | merge newbranch |
| 132 | </pre> |
| 133 | <pre class="mermaid"> |
| 134 | --- |
| 135 | title: Merge feature to advanced main (bottom-to-top) |
| 136 | --- |
| 137 | gitGraph BT: |
| 138 | commit |
| 139 | branch newbranch |
| 140 | checkout newbranch |
| 141 | commit |
| 142 | checkout main |
| 143 | commit |
| 144 | merge newbranch |
| 145 | </pre |
| 146 | > |
| 147 | <h2>Two-way merges</h2> |
| 148 | <pre class="mermaid"> |
| 149 | --- |
| 150 | title: Two-way merges (left-to-right) |
| 151 | --- |
| 152 | gitGraph LR: |
| 153 | commit |
| 154 | branch develop |
| 155 | checkout develop |
| 156 | commit |
| 157 | checkout main |
| 158 | merge develop |
| 159 | commit |
| 160 | checkout develop |
| 161 | merge main |
| 162 | commit |
| 163 | checkout main |
| 164 | merge develop |
| 165 | </pre> |
| 166 | <pre class="mermaid"> |
| 167 | --- |
| 168 | title: Two-way merges (top-to-bottom) |
| 169 | --- |
| 170 | gitGraph TB: |
| 171 | commit |
| 172 | branch develop |
| 173 | checkout develop |
| 174 | commit |
| 175 | checkout main |
| 176 | merge develop |
| 177 | commit |
| 178 | checkout develop |
| 179 | merge main |
| 180 | commit |
| 181 | checkout main |
| 182 | merge develop |
| 183 | </pre> |
| 184 | <pre class="mermaid"> |
| 185 | --- |
| 186 | title: Two-way merges (bottom-to-top) |
| 187 | --- |
| 188 | gitGraph BT: |
| 189 | commit |
| 190 | branch develop |
| 191 | checkout develop |
| 192 | commit |
| 193 | checkout main |
| 194 | merge develop |
| 195 | commit |
| 196 | checkout develop |
| 197 | merge main |
| 198 | commit |
| 199 | checkout main |
| 200 | merge develop |
| 201 | </pre |
| 202 | > |
| 203 | <h2>Cherry-pick from branch graph</h2> |
| 204 | <pre class="mermaid"> |
| 205 | --- |
| 206 | title: Cherry-pick from branch (left-to-right) |
| 207 | --- |
| 208 | gitGraph LR: |
| 209 | commit |
| 210 | branch newbranch |
| 211 | checkout newbranch |
| 212 | commit id: "Pick me" |
| 213 | checkout main |
| 214 | commit |
| 215 | checkout newbranch |
| 216 | commit |
| 217 | checkout main |
| 218 | cherry-pick id: "Pick me" |
| 219 | </pre> |
| 220 | <pre class="mermaid"> |
| 221 | --- |
| 222 | title: Cherry-pick from branch (top-to-bottom) |
| 223 | --- |
| 224 | gitGraph TB: |
| 225 | commit |
| 226 | branch newbranch |
| 227 | checkout newbranch |
| 228 | commit id: "Pick me" |
| 229 | checkout main |
| 230 | commit |
| 231 | checkout newbranch |
| 232 | commit |
| 233 | checkout main |
| 234 | cherry-pick id: "Pick me" |
| 235 | </pre> |
| 236 | <pre class="mermaid"> |
| 237 | --- |
| 238 | title: Cherry-pick from branch (bottom-to-top) |
| 239 | --- |
| 240 | gitGraph BT: |
| 241 | commit |
| 242 | branch newbranch |
| 243 | checkout newbranch |
| 244 | commit id: "Pick me" |
| 245 | checkout main |
| 246 | commit |
| 247 | checkout newbranch |
| 248 | commit |
| 249 | checkout main |
| 250 | cherry-pick id: "Pick me" |
| 251 | </pre> |
| 252 | <h2>Cherry-pick from main graph</h2> |
| 253 | <pre class="mermaid"> |
| 254 | --- |
| 255 | title: Cherry-pick from main (left-to-right) |
| 256 | --- |
| 257 | gitGraph LR: |
| 258 | commit |
| 259 | branch develop |
| 260 | commit |
| 261 | checkout main |
| 262 | commit id:"A" |
| 263 | checkout develop |
| 264 | commit |
| 265 | cherry-pick id: "A" |
| 266 | </pre> |
| 267 | <pre class="mermaid"> |
| 268 | --- |
| 269 | title: Cherry-pick from main (top-to-bottom) |
| 270 | --- |
| 271 | gitGraph TB: |
| 272 | commit |
| 273 | branch develop |
| 274 | commit |
| 275 | checkout main |
| 276 | commit id:"A" |
| 277 | checkout develop |
| 278 | commit |
| 279 | cherry-pick id: "A" |
| 280 | </pre> |
| 281 | <pre class="mermaid"> |
| 282 | --- |
| 283 | title: Cherry-pick from main (bottom-to-top) |
| 284 | --- |
| 285 | gitGraph BT: |
| 286 | commit |
| 287 | branch develop |
| 288 | commit |
| 289 | checkout main |
| 290 | commit id:"A" |
| 291 | checkout develop |
| 292 | commit |
| 293 | cherry-pick id: "A" |
| 294 | </pre |
| 295 | > |
| 296 | <h2>Cherry-pick then merge graph</h2> |
| 297 | <pre class="mermaid"> |
| 298 | --- |
| 299 | title: Cherry-pick then merge (left-to-right) |
| 300 | --- |
| 301 | gitGraph LR: |
| 302 | commit |
| 303 | branch newbranch |
| 304 | checkout newbranch |
| 305 | commit id: "Pick me" |
| 306 | checkout main |
| 307 | commit |
| 308 | checkout newbranch |
| 309 | commit |
| 310 | checkout main |
| 311 | cherry-pick id: "Pick me" |
| 312 | merge newbranch |
| 313 | </pre> |
| 314 | <pre class="mermaid"> |
| 315 | --- |
| 316 | title: Cherry-pick then merge (top-to-bottom) |
| 317 | --- |
| 318 | gitGraph TB: |
| 319 | commit |
| 320 | branch newbranch |
| 321 | checkout newbranch |
| 322 | commit id: "Pick me" |
| 323 | checkout main |
| 324 | commit |
| 325 | checkout newbranch |
| 326 | commit |
| 327 | checkout main |
| 328 | cherry-pick id: "Pick me" |
| 329 | merge newbranch |
| 330 | </pre> |
| 331 | <pre class="mermaid"> |
| 332 | --- |
| 333 | title: Cherry-pick then merge (bottom-to-top) |
| 334 | --- |
| 335 | gitGraph BT: |
| 336 | commit |
| 337 | branch newbranch |
| 338 | checkout newbranch |
| 339 | commit id: "Pick me" |
| 340 | checkout main |
| 341 | commit |
| 342 | checkout newbranch |
| 343 | commit |
| 344 | checkout main |
| 345 | cherry-pick id: "Pick me" |
| 346 | merge newbranch |
| 347 | </pre |
| 348 | > |
| 349 | <h2>Merge from main onto undeveloped branch graph</h2> |
| 350 | <pre class="mermaid"> |
| 351 | --- |
| 352 | title: Merge from main onto undeveloped branch (left-to-right) |
| 353 | --- |
| 354 | gitGraph LR: |
| 355 | commit |
| 356 | branch develop |
| 357 | commit |
| 358 | checkout main |
| 359 | commit |
| 360 | checkout develop |
| 361 | merge main |
| 362 | </pre> |
| 363 | <pre class="mermaid"> |
| 364 | --- |
| 365 | title: Merge from main onto undeveloped branch (top-to-bottom) |
| 366 | --- |
| 367 | gitGraph TB: |
| 368 | commit |
| 369 | branch develop |
| 370 | commit |
| 371 | checkout main |
| 372 | commit |
| 373 | checkout develop |
| 374 | merge main |
| 375 | </pre> |
| 376 | <pre class="mermaid"> |
| 377 | --- |
| 378 | title: Merge from main onto undeveloped branch (bottom-to-top) |
| 379 | --- |
| 380 | gitGraph BT: |
| 381 | commit |
| 382 | branch develop |
| 383 | commit |
| 384 | checkout main |
| 385 | commit |
| 386 | checkout develop |
| 387 | merge main |
| 388 | </pre |
| 389 | > |
| 390 | <h2>Merge from main onto developed branch graph</h2> |
| 391 | <pre class="mermaid"> |
| 392 | --- |
| 393 | title: Merge from main onto developed branch (left-to-right) |
| 394 | --- |
| 395 | gitGraph LR: |
| 396 | commit |
| 397 | branch develop |
| 398 | commit |
| 399 | checkout main |
| 400 | commit |
| 401 | checkout develop |
| 402 | commit |
| 403 | merge main |
| 404 | </pre> |
| 405 | <pre class="mermaid"> |
| 406 | --- |
| 407 | title: Merge from main onto developed branch (top-to-bottom) |
| 408 | --- |
| 409 | gitGraph TB: |
| 410 | commit |
| 411 | branch develop |
| 412 | commit |
| 413 | checkout main |
| 414 | commit |
| 415 | checkout develop |
| 416 | commit |
| 417 | merge main |
| 418 | </pre> |
| 419 | <pre class="mermaid"> |
| 420 | --- |
| 421 | title: Merge from main onto developed branch (bottom-to-top) |
| 422 | --- |
| 423 | gitGraph BT: |
| 424 | commit |
| 425 | branch develop |
| 426 | commit |
| 427 | checkout main |
| 428 | commit |
| 429 | checkout develop |
| 430 | commit |
| 431 | merge main |
| 432 | </pre |
| 433 | > |
| 434 | <h2>Two branches from same commit graph</h2> |
| 435 | <pre class="mermaid"> |
| 436 | --- |
| 437 | title: Two branches from same commit (left-to-right) |
| 438 | --- |
| 439 | gitGraph LR: |
| 440 | commit |
| 441 | commit |
| 442 | branch feature-001 |
| 443 | commit |
| 444 | commit |
| 445 | checkout main |
| 446 | branch feature-002 |
| 447 | commit |
| 448 | checkout feature-001 |
| 449 | merge feature-002 |
| 450 | </pre> |
| 451 | <pre class="mermaid"> |
| 452 | --- |
| 453 | title: Two branches from same commit (top-to-bottom) |
| 454 | --- |
| 455 | gitGraph TB: |
| 456 | commit |
| 457 | commit |
| 458 | branch feature-001 |
| 459 | commit |
| 460 | commit |
| 461 | checkout main |
| 462 | branch feature-002 |
| 463 | commit |
| 464 | checkout feature-001 |
| 465 | merge feature-002 |
| 466 | </pre> |
| 467 | <pre class="mermaid"> |
| 468 | --- |
| 469 | title: Two branches from same commit (bottom-to-top) |
| 470 | --- |
| 471 | gitGraph BT: |
| 472 | commit |
| 473 | commit |
| 474 | branch feature-001 |
| 475 | commit |
| 476 | commit |
| 477 | checkout main |
| 478 | branch feature-002 |
| 479 | commit |
| 480 | checkout feature-001 |
| 481 | merge feature-002 |
| 482 | </pre |
| 483 | > |
| 484 | <h2>Three branches and a cherry-pick from each graph</h2> |
| 485 | <pre class="mermaid"> |
| 486 | --- |
| 487 | title: Three branches and a cherry-pick from each (left-to-right) |
| 488 | --- |
| 489 | gitGraph LR: |
| 490 | commit id: "ZERO" |
| 491 | branch develop |
| 492 | commit id:"A" |
| 493 | checkout main |
| 494 | commit id:"ONE" |
| 495 | checkout develop |
| 496 | commit id:"B" |
| 497 | branch featureA |
| 498 | commit id:"FIX" |
| 499 | commit id: "FIX-2" |
| 500 | checkout main |
| 501 | commit id:"TWO" |
| 502 | cherry-pick id:"A" |
| 503 | commit id:"THREE" |
| 504 | cherry-pick id:"FIX" |
| 505 | checkout develop |
| 506 | commit id:"C" |
| 507 | merge featureA |
| 508 | </pre> |
| 509 | <pre class="mermaid"> |
| 510 | --- |
| 511 | title: Three branches and a cherry-pick from each (top-to-bottom) |
| 512 | --- |
| 513 | gitGraph TB: |
| 514 | commit id: "ZERO" |
| 515 | branch develop |
| 516 | commit id:"A" |
| 517 | checkout main |
| 518 | commit id:"ONE" |
| 519 | checkout develop |
| 520 | commit id:"B" |
| 521 | branch featureA |
| 522 | commit id:"FIX" |
| 523 | commit id: "FIX-2" |
| 524 | checkout main |
| 525 | commit id:"TWO" |
| 526 | cherry-pick id:"A" |
| 527 | commit id:"THREE" |
| 528 | cherry-pick id:"FIX" |
| 529 | checkout develop |
| 530 | commit id:"C" |
| 531 | merge featureA |
| 532 | </pre> |
| 533 | <pre class="mermaid"> |
| 534 | --- |
| 535 | title: Three branches and a cherry-pick from each (bottom-to-top) |
| 536 | --- |
| 537 | gitGraph BT: |
| 538 | commit id: "ZERO" |
| 539 | branch develop |
| 540 | commit id:"A" |
| 541 | checkout main |
| 542 | commit id:"ONE" |
| 543 | checkout develop |
| 544 | commit id:"B" |
| 545 | branch featureA |
| 546 | commit id:"FIX" |
| 547 | commit id: "FIX-2" |
| 548 | checkout main |
| 549 | commit id:"TWO" |
| 550 | cherry-pick id:"A" |
| 551 | commit id:"THREE" |
| 552 | cherry-pick id:"FIX" |
| 553 | checkout develop |
| 554 | commit id:"C" |
| 555 | merge featureA |
| 556 | </pre> |
| 557 | <script type="module"> |
| 558 | import mermaid from './mermaid.esm.mjs'; |
| 559 | const ALLOWED_TAGS = [ |
| 560 | 'a', |
| 561 | 'b', |
| 562 | 'blockquote', |
| 563 | 'br', |
| 564 | 'dd', |
| 565 | 'div', |
| 566 | 'dl', |
| 567 | 'dt', |
| 568 | 'em', |
| 569 | 'foreignObject', |
| 570 | 'h1', |
| 571 | 'h2', |
| 572 | 'h3', |
| 573 | 'h4', |
| 574 | 'h5', |
| 575 | 'h6', |
| 576 | 'h7', |
| 577 | 'h8', |
| 578 | 'hr', |
| 579 | 'i', |
| 580 | 'li', |
| 581 | 'ul', |
| 582 | 'ol', |
| 583 | 'p', |
| 584 | 'pre', |
| 585 | 'span', |
| 586 | 'strike', |
| 587 | 'strong', |
| 588 | 'table', |
| 589 | 'tbody', |
| 590 | 'td', |
| 591 | 'tfoot', |
| 592 | 'th', |
| 593 | 'thead', |
| 594 | 'tr', |
| 595 | ]; |
| 596 | mermaid.initialize({ |
| 597 | theme: 'default', |
| 598 | // themeCSS: '.node rect { fill: red; }', |
| 599 | logLevel: 3, |
| 600 | securityLevel: 'loose', |
| 601 | flowchart: { curve: 'basis' }, |
| 602 | gantt: { axisFormat: '%m/%d/%Y' }, |
| 603 | sequence: { actorMargin: 50 }, |
| 604 | dompurifyConfig: { |
| 605 | USE_PROFILES: { |
| 606 | svg: true, |
| 607 | }, |
| 608 | ADD_TAGS: ALLOWED_TAGS, |
| 609 | ADD_ATTR: ['transform-origin'], |
| 610 | }, |
| 611 | }); |
| 612 | </script> |
| 613 | </body> |
| 614 | </html> |
| 615 | |