git

33 samples from the mermaid demo corpus, rendered both ways.

Example 1

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Simple "branch and merge" (left-to-right)
---
gitGraph LR:
commit
branch newbranch
checkout newbranch
commit
checkout main
merge newbranch

Example 2

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Simple "branch and merge" (top-to-bottom)
---
gitGraph TB:
commit
branch newbranch
checkout newbranch
commit
checkout main
merge newbranch

Example 3

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Simple "branch and merge" (bottom-to-top)
---
gitGraph BT:
commit
branch newbranch
checkout newbranch
commit
checkout main
merge newbranch

Example 4

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Continuous development (left-to-right)
---
gitGraph LR:
commit
branch develop
checkout develop
commit
checkout main
merge develop
checkout develop
commit
checkout main
merge develop

Example 5

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Continuous development (top-to-bottom)
---
gitGraph TB:
commit
branch develop
checkout develop
commit
checkout main
merge develop
checkout develop
commit
checkout main
merge develop

Example 6

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Continuous development (bottom-to-top)
---
gitGraph BT:
commit
branch develop
checkout develop
commit
checkout main
merge develop
checkout develop
commit
checkout main
merge develop

Example 7

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Merge feature to advanced main (left-to-right)
---
gitGraph LR:
commit
branch newbranch
checkout newbranch
commit
checkout main
commit
merge newbranch

Example 8

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Merge feature to advanced main (top-to-bottom)
---
gitGraph TB:
commit
branch newbranch
checkout newbranch
commit
checkout main
commit
merge newbranch

Example 9

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Merge feature to advanced main (bottom-to-top)
---
gitGraph BT:
commit
branch newbranch
checkout newbranch
commit
checkout main
commit
merge newbranch

Example 10

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Two-way merges (left-to-right)
---
gitGraph LR:
commit
branch develop
checkout develop
commit
checkout main
merge develop
commit
checkout develop
merge main
commit
checkout main
merge develop

Example 11

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Two-way merges (top-to-bottom)
---
gitGraph TB:
commit
branch develop
checkout develop
commit
checkout main
merge develop
commit
checkout develop
merge main
commit
checkout main
merge develop

Example 12

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Two-way merges (bottom-to-top)
---
gitGraph BT:
commit
branch develop
checkout develop
commit
checkout main
merge develop
commit
checkout develop
merge main
commit
checkout main
merge develop

Example 13

match
0.05% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Cherry-pick from branch (left-to-right)
---
gitGraph LR:
commit
branch newbranch
checkout newbranch
commit id: "Pick me"
checkout main
commit
checkout newbranch
commit
checkout main
cherry-pick id: "Pick me"

Example 14

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Cherry-pick from branch (top-to-bottom)
---
gitGraph TB:
commit
branch newbranch
checkout newbranch
commit id: "Pick me"
checkout main
commit
checkout newbranch
commit
checkout main
cherry-pick id: "Pick me"

Example 15

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Cherry-pick from branch (bottom-to-top)
---
gitGraph BT:
commit
branch newbranch
checkout newbranch
commit id: "Pick me"
checkout main
commit
checkout newbranch
commit
checkout main
cherry-pick id: "Pick me"

Example 16

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Cherry-pick from main (left-to-right)
---
gitGraph LR:
commit
branch develop
commit
checkout main
commit id:"A"
checkout develop
commit
cherry-pick id: "A"

Example 17

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Cherry-pick from main (top-to-bottom)
---
gitGraph TB:
commit
branch develop
commit
checkout main
commit id:"A"
checkout develop
commit
cherry-pick id: "A"

Example 18

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Cherry-pick from main (bottom-to-top)
---
gitGraph BT:
commit
branch develop
commit
checkout main
commit id:"A"
checkout develop
commit
cherry-pick id: "A"

Example 19

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Cherry-pick then merge (left-to-right)
---
gitGraph LR:
commit
branch newbranch
checkout newbranch
commit id: "Pick me"
checkout main
commit
checkout newbranch
commit
checkout main
cherry-pick id: "Pick me"
merge newbranch

Example 20

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Cherry-pick then merge (top-to-bottom)
---
gitGraph TB:
commit
branch newbranch
checkout newbranch
commit id: "Pick me"
checkout main
commit
checkout newbranch
commit
checkout main
cherry-pick id: "Pick me"
merge newbranch

Example 21

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Cherry-pick then merge (bottom-to-top)
---
gitGraph BT:
commit
branch newbranch
checkout newbranch
commit id: "Pick me"
checkout main
commit
checkout newbranch
commit
checkout main
cherry-pick id: "Pick me"
merge newbranch

Example 22

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Merge from main onto undeveloped branch (left-to-right)
---
gitGraph LR:
commit
branch develop
commit
checkout main
commit
checkout develop
merge main

Example 23

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Merge from main onto undeveloped branch (top-to-bottom)
---
gitGraph TB:
commit
branch develop
commit
checkout main
commit
checkout develop
merge main

Example 24

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Merge from main onto undeveloped branch (bottom-to-top)
---
gitGraph BT:
commit
branch develop
commit
checkout main
commit
checkout develop
merge main

Example 25

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Merge from main onto developed branch (left-to-right)
---
gitGraph LR:
commit
branch develop
commit
checkout main
commit
checkout develop
commit
merge main

Example 26

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Merge from main onto developed branch (top-to-bottom)
---
gitGraph TB:
commit
branch develop
commit
checkout main
commit
checkout develop
commit
merge main

Example 27

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Merge from main onto developed branch (bottom-to-top)
---
gitGraph BT:
commit
branch develop
commit
checkout main
commit
checkout develop
commit
merge main

Example 28

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Two branches from same commit (left-to-right)
---
gitGraph LR:
commit
commit
branch feature-001
commit
commit
checkout main
branch feature-002
commit
checkout feature-001
merge feature-002

Example 29

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Two branches from same commit (top-to-bottom)
---
gitGraph TB:
commit
commit
branch feature-001
commit
commit
checkout main
branch feature-002
commit
checkout feature-001
merge feature-002

Example 30

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Two branches from same commit (bottom-to-top)
---
gitGraph BT:
commit
commit
branch feature-001
commit
commit
checkout main
branch feature-002
commit
checkout feature-001
merge feature-002

Example 31

match
0.12% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Three branches and a cherry-pick from each (left-to-right)
---
gitGraph LR:
commit id: "ZERO"
branch develop
commit id:"A"
checkout main
commit id:"ONE"
checkout develop
commit id:"B"
branch featureA
commit id:"FIX"
commit id: "FIX-2"
checkout main
commit id:"TWO"
cherry-pick id:"A"
commit id:"THREE"
cherry-pick id:"FIX"
checkout develop
commit id:"C"
merge featureA

Example 32

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Three branches and a cherry-pick from each (top-to-bottom)
---
gitGraph TB:
commit id: "ZERO"
branch develop
commit id:"A"
checkout main
commit id:"ONE"
checkout develop
commit id:"B"
branch featureA
commit id:"FIX"
commit id: "FIX-2"
checkout main
commit id:"TWO"
cherry-pick id:"A"
commit id:"THREE"
cherry-pick id:"FIX"
checkout develop
commit id:"C"
merge featureA

Example 33

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
title: Three branches and a cherry-pick from each (bottom-to-top)
---
gitGraph BT:
commit id: "ZERO"
branch develop
commit id:"A"
checkout main
commit id:"ONE"
checkout develop
commit id:"B"
branch featureA
commit id:"FIX"
commit id: "FIX-2"
checkout main
commit id:"TWO"
cherry-pick id:"A"
commit id:"THREE"
cherry-pick id:"FIX"
checkout develop
commit id:"C"
merge featureA