git

why using linear commit ?

At frame 9, we want to commit the devs made in develop branch, to the main branch. The problem is that changes were made to the main branch. One solution is to merge d3 and m5. This solution is a problem :
can you really trust merge without going through a whole test cycle ?
appart from cicd, m6 was never really tested.
the fully tested version d3 is lost when develop branch is deleted.

solution : rebase

if you activate linear commit in github, the previous scenario will not be possible : you need to rebase before pushing a MR
if you rebase, there is no need for a merge, because the new head of main will be exactly the head of develop
d3 == m6 : the new head of main will be fully tested
this version will always be available in the main branch history

ms f min f max

Frame 1 / 11

---
config:
  flowchart:
    defaultRenderer: elk
title: Example Git diagram
animate: null
animate-yml-file: git-animate.yml

---



flowchart LR

subgraph main branch
    m1 
    m2 
    m3 
    m4 
    m5 
    m6
    mr6
end

subgraph develop branch
    d1 
    d2 
    d3
    dr1
    dr2
    dr3
end

d3 ed3dr1@-->dr1



m1 em1m2@-->m2
m2 em2m3@-->m3
m3 em3m4@-->m4
m4 em4m5@-->m5
m5 em5m6@-->m6

d1 ed1d2@-->d2
d2 ed2d3@-->d3
d3 ed3m6@-->m6
dr1 edr1dr2@-->dr2
dr2 edr2dr3@-->dr3
dr3 edr3mr6@-->mr6

m3 em3d1@-->d1
m5 em5dr1@-->dr1
m5 em5mr6@-->mr6

m1((m1)) ;
m2((m2)) ;
m3((m3)) ;
m4((m4)) ;
m5((m5)) ;
m6((m6)) ;
mr6((m6)) ;

d1((d1)) ;
d2((d2)) ;
d3((d3)) ;
dr1((d1)) ;
dr2((d2)) ;
dr3((d3)) ;

classDef class_active_node      stroke-width:1px,color:black,stroke:black ;
classDef class_from_node    stroke:green,stroke-width:5px,color:black ;
classDef class_to_node      stroke:red,stroke-width:5px,color:black ;
classDef class_hidden_node     stroke-width:1px,color:white,stroke:white ;
classDef class_active_edge    stroke-width:1px,color:black,stroke:black;
classDef class_hidden_edge stroke-width:1px,stroke:white ;
classDef class_animate_edge stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite,color black;

classDef class_old     stroke:#ccc,fill:#eee,color:#ccc;
classDef class_old_edge stroke-width:1px,stroke:#ccc,troke-dasharray: 9,5,stroke-dashoffset: 900 ;
class ed3d1r class_no_edge; 

class em5mr6 class_no_edge;

class m1 class_hidden_node; 
class m2 class_hidden_node; 
class m3 class_hidden_node; 
class m4 class_hidden_node; 
class m5 class_hidden_node; 
class m6 class_hidden_node; 
class mr6 class_hidden_node; 

class d1 class_hidden_node; 
class d2 class_hidden_node; 
class d3 class_hidden_node; 
class dr1 class_hidden_node;  
class dr2 class_hidden_node;  
class dr3 class_hidden_node;   


class em1m2 class_hidden_edge;
class em2m3 class_hidden_edge;
class em3m4 class_hidden_edge;
class em4m5 class_hidden_edge;
class em5m6 class_hidden_edge;
class em3d1 class_hidden_edge;
class ed1d2 class_hidden_edge;
class ed2d3 class_hidden_edge;
class ed3dr1 class_hidden_edge;
class ed3dr1 class_hidden_edge;
class edr1dr2 class_hidden_edge;
class edr2dr3 class_hidden_edge;
class edr3m6 class_hidden_edge;
class em5dr1 class_hidden_edge;
class edr3mr6 class_hidden_edge;
class em5mr6 class_hidden_edge;

class ed3m6 class_hidden_edge;
%% mermaid-animate-tag em5d1

initial

Frame 2 / 11

---
config:
  flowchart:
    defaultRenderer: elk
title: Example Git diagram
animate: null
animate-yml-file: git-animate.yml

---



flowchart LR

subgraph main branch
    m1 
    m2 
    m3 
    m4 
    m5 
    m6
    mr6
end

subgraph develop branch
    d1 
    d2 
    d3
    dr1
    dr2
    dr3
end

d3 ed3dr1@-->dr1



m1 em1m2@-->m2
m2 em2m3@-->m3
m3 em3m4@-->m4
m4 em4m5@-->m5
m5 em5m6@-->m6

d1 ed1d2@-->d2
d2 ed2d3@-->d3
d3 ed3m6@-->m6
dr1 edr1dr2@-->dr2
dr2 edr2dr3@-->dr3
dr3 edr3mr6@-->mr6

m3 em3d1@-->d1
m5 em5dr1@-->dr1
m5 em5mr6@-->mr6

m1((m1)) ;
m2((m2)) ;
m3((m3)) ;
m4((m4)) ;
m5((m5)) ;
m6((m6)) ;
mr6((m6)) ;

d1((d1)) ;
d2((d2)) ;
d3((d3)) ;
dr1((d1)) ;
dr2((d2)) ;
dr3((d3)) ;

classDef class_active_node      stroke-width:1px,color:black,stroke:black ;
classDef class_from_node    stroke:green,stroke-width:5px,color:black ;
classDef class_to_node      stroke:red,stroke-width:5px,color:black ;
classDef class_hidden_node     stroke-width:1px,color:white,stroke:white ;
classDef class_active_edge    stroke-width:1px,color:black,stroke:black;
classDef class_hidden_edge stroke-width:1px,stroke:white ;
classDef class_animate_edge stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite,color black;

classDef class_old     stroke:#ccc,fill:#eee,color:#ccc;
classDef class_old_edge stroke-width:1px,stroke:#ccc,troke-dasharray: 9,5,stroke-dashoffset: 900 ;
class ed3d1r class_no_edge; 

class em5mr6 class_no_edge;

class m1 class_from_node; 
class m2 class_to_node; 
class m3 class_hidden_node; 
class m4 class_hidden_node; 
class m5 class_hidden_node; 
class m6 class_hidden_node; 
class mr6 class_hidden_node; 

class d1 class_hidden_node; 
class d2 class_hidden_node; 
class d3 class_hidden_node; 
class dr1 class_hidden_node;  
class dr2 class_hidden_node;  
class dr3 class_hidden_node;   


class em1m2 class_animate_edge; 
class em2m3 class_hidden_edge;
class em3m4 class_hidden_edge;
class em4m5 class_hidden_edge;
class em5m6 class_hidden_edge;
class em3d1 class_hidden_edge;
class ed1d2 class_hidden_edge;
class ed2d3 class_hidden_edge;
class ed3dr1 class_hidden_edge;
class ed3dr1 class_hidden_edge;
class edr1dr2 class_hidden_edge;
class edr2dr3 class_hidden_edge;
class edr3m6 class_hidden_edge;
class em5dr1 class_hidden_edge;
class edr3mr6 class_hidden_edge;
class em5mr6 class_hidden_edge;

class ed3m6 class_hidden_edge;
%% mermaid-animate-tag em5d1

add commit in main

Frame 3 / 11

---
config:
  flowchart:
    defaultRenderer: elk
title: Example Git diagram
animate: null
animate-yml-file: git-animate.yml

---



flowchart LR

subgraph main branch
    m1 
    m2 
    m3 
    m4 
    m5 
    m6
    mr6
end

subgraph develop branch
    d1 
    d2 
    d3
    dr1
    dr2
    dr3
end

d3 ed3dr1@-->dr1



m1 em1m2@-->m2
m2 em2m3@-->m3
m3 em3m4@-->m4
m4 em4m5@-->m5
m5 em5m6@-->m6

d1 ed1d2@-->d2
d2 ed2d3@-->d3
d3 ed3m6@-->m6
dr1 edr1dr2@-->dr2
dr2 edr2dr3@-->dr3
dr3 edr3mr6@-->mr6

m3 em3d1@-->d1
m5 em5dr1@-->dr1
m5 em5mr6@-->mr6

m1((m1)) ;
m2((m2)) ;
m3((m3)) ;
m4((m4)) ;
m5((m5)) ;
m6((m6)) ;
mr6((m6)) ;

d1((d1)) ;
d2((d2)) ;
d3((d3)) ;
dr1((d1)) ;
dr2((d2)) ;
dr3((d3)) ;

classDef class_active_node      stroke-width:1px,color:black,stroke:black ;
classDef class_from_node    stroke:green,stroke-width:5px,color:black ;
classDef class_to_node      stroke:red,stroke-width:5px,color:black ;
classDef class_hidden_node     stroke-width:1px,color:white,stroke:white ;
classDef class_active_edge    stroke-width:1px,color:black,stroke:black;
classDef class_hidden_edge stroke-width:1px,stroke:white ;
classDef class_animate_edge stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite,color black;

classDef class_old     stroke:#ccc,fill:#eee,color:#ccc;
classDef class_old_edge stroke-width:1px,stroke:#ccc,troke-dasharray: 9,5,stroke-dashoffset: 900 ;
class ed3d1r class_no_edge; 

class em5mr6 class_no_edge;

class m1 class_active_node; 
class m2 class_from_node; 
class m3 class_to_node; 
class m4 class_hidden_node; 
class m5 class_hidden_node; 
class m6 class_hidden_node; 
class mr6 class_hidden_node; 

class d1 class_hidden_node; 
class d2 class_hidden_node; 
class d3 class_hidden_node; 
class dr1 class_hidden_node;  
class dr2 class_hidden_node;  
class dr3 class_hidden_node;   


class em1m2 class_active_edge;
class em2m3 class_animate_edge; 
class em3m4 class_hidden_edge;
class em4m5 class_hidden_edge;
class em5m6 class_hidden_edge;
class em3d1 class_hidden_edge;
class ed1d2 class_hidden_edge;
class ed2d3 class_hidden_edge;
class ed3dr1 class_hidden_edge;
class ed3dr1 class_hidden_edge;
class edr1dr2 class_hidden_edge;
class edr2dr3 class_hidden_edge;
class edr3m6 class_hidden_edge;
class em5dr1 class_hidden_edge;
class edr3mr6 class_hidden_edge;
class em5mr6 class_hidden_edge;

class ed3m6 class_hidden_edge;
%% mermaid-animate-tag em5d1

add another commit in main

Frame 4 / 11

---
config:
  flowchart:
    defaultRenderer: elk
title: Example Git diagram
animate: null
animate-yml-file: git-animate.yml

---



flowchart LR

subgraph main branch
    m1 
    m2 
    m3 
    m4 
    m5 
    m6
    mr6
end

subgraph develop branch
    d1 
    d2 
    d3
    dr1
    dr2
    dr3
end

d3 ed3dr1@-->dr1



m1 em1m2@-->m2
m2 em2m3@-->m3
m3 em3m4@-->m4
m4 em4m5@-->m5
m5 em5m6@-->m6

d1 ed1d2@-->d2
d2 ed2d3@-->d3
d3 ed3m6@-->m6
dr1 edr1dr2@-->dr2
dr2 edr2dr3@-->dr3
dr3 edr3mr6@-->mr6

m3 em3d1@-->d1
m5 em5dr1@-->dr1
m5 em5mr6@-->mr6

m1((m1)) ;
m2((m2)) ;
m3((m3)) ;
m4((m4)) ;
m5((m5)) ;
m6((m6)) ;
mr6((m6)) ;

d1((d1)) ;
d2((d2)) ;
d3((d3)) ;
dr1((d1)) ;
dr2((d2)) ;
dr3((d3)) ;

classDef class_active_node      stroke-width:1px,color:black,stroke:black ;
classDef class_from_node    stroke:green,stroke-width:5px,color:black ;
classDef class_to_node      stroke:red,stroke-width:5px,color:black ;
classDef class_hidden_node     stroke-width:1px,color:white,stroke:white ;
classDef class_active_edge    stroke-width:1px,color:black,stroke:black;
classDef class_hidden_edge stroke-width:1px,stroke:white ;
classDef class_animate_edge stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite,color black;

classDef class_old     stroke:#ccc,fill:#eee,color:#ccc;
classDef class_old_edge stroke-width:1px,stroke:#ccc,troke-dasharray: 9,5,stroke-dashoffset: 900 ;
class ed3d1r class_no_edge; 

class em5mr6 class_no_edge;

class m1 class_active_node; 
class m2 class_active_node; 
class m3 class_from_node; 
class m4 class_hidden_node; 
class m5 class_hidden_node; 
class m6 class_hidden_node; 
class mr6 class_hidden_node; 

class d1 class_to_node; 
class d2 class_hidden_node; 
class d3 class_hidden_node; 
class dr1 class_hidden_node;  
class dr2 class_hidden_node;  
class dr3 class_hidden_node;   


class em1m2 class_active_edge;
class em2m3 class_active_edge;
class em3m4 class_hidden_edge;
class em4m5 class_hidden_edge;
class em5m6 class_hidden_edge;
class em3d1 class_animate_edge; 
class ed1d2 class_hidden_edge;
class ed2d3 class_hidden_edge;
class ed3dr1 class_hidden_edge;
class ed3dr1 class_hidden_edge;
class edr1dr2 class_hidden_edge;
class edr2dr3 class_hidden_edge;
class edr3m6 class_hidden_edge;
class em5dr1 class_hidden_edge;
class edr3mr6 class_hidden_edge;
class em5mr6 class_hidden_edge;

class ed3m6 class_hidden_edge;
%% mermaid-animate-tag em5d1

checkout develop branch

Frame 5 / 11

---
config:
  flowchart:
    defaultRenderer: elk
title: Example Git diagram
animate: null
animate-yml-file: git-animate.yml

---



flowchart LR

subgraph main branch
    m1 
    m2 
    m3 
    m4 
    m5 
    m6
    mr6
end

subgraph develop branch
    d1 
    d2 
    d3
    dr1
    dr2
    dr3
end

d3 ed3dr1@-->dr1



m1 em1m2@-->m2
m2 em2m3@-->m3
m3 em3m4@-->m4
m4 em4m5@-->m5
m5 em5m6@-->m6

d1 ed1d2@-->d2
d2 ed2d3@-->d3
d3 ed3m6@-->m6
dr1 edr1dr2@-->dr2
dr2 edr2dr3@-->dr3
dr3 edr3mr6@-->mr6

m3 em3d1@-->d1
m5 em5dr1@-->dr1
m5 em5mr6@-->mr6

m1((m1)) ;
m2((m2)) ;
m3((m3)) ;
m4((m4)) ;
m5((m5)) ;
m6((m6)) ;
mr6((m6)) ;

d1((d1)) ;
d2((d2)) ;
d3((d3)) ;
dr1((d1)) ;
dr2((d2)) ;
dr3((d3)) ;

classDef class_active_node      stroke-width:1px,color:black,stroke:black ;
classDef class_from_node    stroke:green,stroke-width:5px,color:black ;
classDef class_to_node      stroke:red,stroke-width:5px,color:black ;
classDef class_hidden_node     stroke-width:1px,color:white,stroke:white ;
classDef class_active_edge    stroke-width:1px,color:black,stroke:black;
classDef class_hidden_edge stroke-width:1px,stroke:white ;
classDef class_animate_edge stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite,color black;

classDef class_old     stroke:#ccc,fill:#eee,color:#ccc;
classDef class_old_edge stroke-width:1px,stroke:#ccc,troke-dasharray: 9,5,stroke-dashoffset: 900 ;
class ed3d1r class_no_edge; 

class em5mr6 class_no_edge;

class m1 class_active_node; 
class m2 class_active_node; 
class m3 class_active_node; 
class m4 class_hidden_node; 
class m5 class_hidden_node; 
class m6 class_hidden_node; 
class mr6 class_hidden_node; 

class d1 class_from_node; 
class d2 class_to_node; 
class d3 class_hidden_node; 
class dr1 class_hidden_node;  
class dr2 class_hidden_node;  
class dr3 class_hidden_node;   


class em1m2 class_active_edge;
class em2m3 class_active_edge;
class em3m4 class_hidden_edge;
class em4m5 class_hidden_edge;
class em5m6 class_hidden_edge;
class em3d1 class_active_edge;
class ed1d2 class_animate_edge; 
class ed2d3 class_hidden_edge;
class ed3dr1 class_hidden_edge;
class ed3dr1 class_hidden_edge;
class edr1dr2 class_hidden_edge;
class edr2dr3 class_hidden_edge;
class edr3m6 class_hidden_edge;
class em5dr1 class_hidden_edge;
class edr3mr6 class_hidden_edge;
class em5mr6 class_hidden_edge;

class ed3m6 class_hidden_edge;
%% mermaid-animate-tag em5d1

add commit in develop

Frame 6 / 11

---
config:
  flowchart:
    defaultRenderer: elk
title: Example Git diagram
animate: null
animate-yml-file: git-animate.yml

---



flowchart LR

subgraph main branch
    m1 
    m2 
    m3 
    m4 
    m5 
    m6
    mr6
end

subgraph develop branch
    d1 
    d2 
    d3
    dr1
    dr2
    dr3
end

d3 ed3dr1@-->dr1



m1 em1m2@-->m2
m2 em2m3@-->m3
m3 em3m4@-->m4
m4 em4m5@-->m5
m5 em5m6@-->m6

d1 ed1d2@-->d2
d2 ed2d3@-->d3
d3 ed3m6@-->m6
dr1 edr1dr2@-->dr2
dr2 edr2dr3@-->dr3
dr3 edr3mr6@-->mr6

m3 em3d1@-->d1
m5 em5dr1@-->dr1
m5 em5mr6@-->mr6

m1((m1)) ;
m2((m2)) ;
m3((m3)) ;
m4((m4)) ;
m5((m5)) ;
m6((m6)) ;
mr6((m6)) ;

d1((d1)) ;
d2((d2)) ;
d3((d3)) ;
dr1((d1)) ;
dr2((d2)) ;
dr3((d3)) ;

classDef class_active_node      stroke-width:1px,color:black,stroke:black ;
classDef class_from_node    stroke:green,stroke-width:5px,color:black ;
classDef class_to_node      stroke:red,stroke-width:5px,color:black ;
classDef class_hidden_node     stroke-width:1px,color:white,stroke:white ;
classDef class_active_edge    stroke-width:1px,color:black,stroke:black;
classDef class_hidden_edge stroke-width:1px,stroke:white ;
classDef class_animate_edge stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite,color black;

classDef class_old     stroke:#ccc,fill:#eee,color:#ccc;
classDef class_old_edge stroke-width:1px,stroke:#ccc,troke-dasharray: 9,5,stroke-dashoffset: 900 ;
class ed3d1r class_no_edge; 

class em5mr6 class_no_edge;

class m1 class_active_node; 
class m2 class_active_node; 
class m3 class_active_node; 
class m4 class_hidden_node; 
class m5 class_hidden_node; 
class m6 class_hidden_node; 
class mr6 class_hidden_node; 

class d1 class_active_edge;
class d2 class_from_node; 
class d3 class_to_node; 
class dr1 class_hidden_node;  
class dr2 class_hidden_node;  
class dr3 class_hidden_node;   


class em1m2 class_active_edge;
class em2m3 class_active_edge;
class em3m4 class_hidden_edge;
class em4m5 class_hidden_edge;
class em5m6 class_hidden_edge;
class em3d1 class_active_edge;
class ed1d2 class_active_edge;
class ed2d3 class_animate_edge; 
class ed3dr1 class_hidden_edge;
class ed3dr1 class_hidden_edge;
class edr1dr2 class_hidden_edge;
class edr2dr3 class_hidden_edge;
class edr3m6 class_hidden_edge;
class em5dr1 class_hidden_edge;
class edr3mr6 class_hidden_edge;
class em5mr6 class_hidden_edge;

class ed3m6 class_hidden_edge;
%% mermaid-animate-tag em5d1

add another commit in develop

Frame 7 / 11

---
config:
  flowchart:
    defaultRenderer: elk
title: Example Git diagram
animate: null
animate-yml-file: git-animate.yml

---



flowchart LR

subgraph main branch
    m1 
    m2 
    m3 
    m4 
    m5 
    m6
    mr6
end

subgraph develop branch
    d1 
    d2 
    d3
    dr1
    dr2
    dr3
end

d3 ed3dr1@-->dr1



m1 em1m2@-->m2
m2 em2m3@-->m3
m3 em3m4@-->m4
m4 em4m5@-->m5
m5 em5m6@-->m6

d1 ed1d2@-->d2
d2 ed2d3@-->d3
d3 ed3m6@-->m6
dr1 edr1dr2@-->dr2
dr2 edr2dr3@-->dr3
dr3 edr3mr6@-->mr6

m3 em3d1@-->d1
m5 em5dr1@-->dr1
m5 em5mr6@-->mr6

m1((m1)) ;
m2((m2)) ;
m3((m3)) ;
m4((m4)) ;
m5((m5)) ;
m6((m6)) ;
mr6((m6)) ;

d1((d1)) ;
d2((d2)) ;
d3((d3)) ;
dr1((d1)) ;
dr2((d2)) ;
dr3((d3)) ;

classDef class_active_node      stroke-width:1px,color:black,stroke:black ;
classDef class_from_node    stroke:green,stroke-width:5px,color:black ;
classDef class_to_node      stroke:red,stroke-width:5px,color:black ;
classDef class_hidden_node     stroke-width:1px,color:white,stroke:white ;
classDef class_active_edge    stroke-width:1px,color:black,stroke:black;
classDef class_hidden_edge stroke-width:1px,stroke:white ;
classDef class_animate_edge stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite,color black;

classDef class_old     stroke:#ccc,fill:#eee,color:#ccc;
classDef class_old_edge stroke-width:1px,stroke:#ccc,troke-dasharray: 9,5,stroke-dashoffset: 900 ;
class ed3d1r class_no_edge; 

class em5mr6 class_no_edge;

class m1 class_active_node; 
class m2 class_active_node; 
class m3 class_from_node; 
class m4 class_to_node; 
class m5 class_hidden_node; 
class m6 class_hidden_node; 
class mr6 class_hidden_node; 

class d1 class_active_edge;
class d2 class_active_node; 
class d3 class_active_node; 
class dr1 class_hidden_node;  
class dr2 class_hidden_node;  
class dr3 class_hidden_node;   


class em1m2 class_active_edge;
class em2m3 class_active_edge;
class em3m4 class_animate_edge; 
class em4m5 class_hidden_edge;
class em5m6 class_hidden_edge;
class em3d1 class_active_edge;
class ed1d2 class_active_edge;
class ed2d3 class_active_edge;
class ed3dr1 class_hidden_edge;
class ed3dr1 class_hidden_edge;
class edr1dr2 class_hidden_edge;
class edr2dr3 class_hidden_edge;
class edr3m6 class_hidden_edge;
class em5dr1 class_hidden_edge;
class edr3mr6 class_hidden_edge;
class em5mr6 class_hidden_edge;

class ed3m6 class_hidden_edge;
%% mermaid-animate-tag em5d1

in the mean time .... other devs add new commits to main branch

Frame 8 / 11

---
config:
  flowchart:
    defaultRenderer: elk
title: Example Git diagram
animate: null
animate-yml-file: git-animate.yml

---



flowchart LR

subgraph main branch
    m1 
    m2 
    m3 
    m4 
    m5 
    m6
    mr6
end

subgraph develop branch
    d1 
    d2 
    d3
    dr1
    dr2
    dr3
end

d3 ed3dr1@-->dr1



m1 em1m2@-->m2
m2 em2m3@-->m3
m3 em3m4@-->m4
m4 em4m5@-->m5
m5 em5m6@-->m6

d1 ed1d2@-->d2
d2 ed2d3@-->d3
d3 ed3m6@-->m6
dr1 edr1dr2@-->dr2
dr2 edr2dr3@-->dr3
dr3 edr3mr6@-->mr6

m3 em3d1@-->d1
m5 em5dr1@-->dr1
m5 em5mr6@-->mr6

m1((m1)) ;
m2((m2)) ;
m3((m3)) ;
m4((m4)) ;
m5((m5)) ;
m6((m6)) ;
mr6((m6)) ;

d1((d1)) ;
d2((d2)) ;
d3((d3)) ;
dr1((d1)) ;
dr2((d2)) ;
dr3((d3)) ;

classDef class_active_node      stroke-width:1px,color:black,stroke:black ;
classDef class_from_node    stroke:green,stroke-width:5px,color:black ;
classDef class_to_node      stroke:red,stroke-width:5px,color:black ;
classDef class_hidden_node     stroke-width:1px,color:white,stroke:white ;
classDef class_active_edge    stroke-width:1px,color:black,stroke:black;
classDef class_hidden_edge stroke-width:1px,stroke:white ;
classDef class_animate_edge stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite,color black;

classDef class_old     stroke:#ccc,fill:#eee,color:#ccc;
classDef class_old_edge stroke-width:1px,stroke:#ccc,troke-dasharray: 9,5,stroke-dashoffset: 900 ;
class ed3d1r class_no_edge; 

class em5mr6 class_no_edge;

class m1 class_active_node; 
class m2 class_active_node; 
class m3 class_active_node; 
class m4 class_from_node; 
class m5 class_to_node; 
class m6 class_hidden_node; 
class mr6 class_hidden_node; 

class d1 class_active_edge;
class d2 class_active_node; 
class d3 class_active_node; 
class dr1 class_hidden_node;  
class dr2 class_hidden_node;  
class dr3 class_hidden_node;   


class em1m2 class_active_edge;
class em2m3 class_active_edge;
class em3m4 class_active_edge;
class em4m5 class_animate_edge; 
class em5m6 class_hidden_edge;
class em3d1 class_active_edge;
class ed1d2 class_active_edge;
class ed2d3 class_active_edge;
class ed3dr1 class_hidden_edge;
class ed3dr1 class_hidden_edge;
class edr1dr2 class_hidden_edge;
class edr2dr3 class_hidden_edge;
class edr3m6 class_hidden_edge;
class em5dr1 class_hidden_edge;
class edr3mr6 class_hidden_edge;
class em5mr6 class_hidden_edge;

class ed3m6 class_hidden_edge;
%% mermaid-animate-tag em5d1

in the mean time .... other devs add new commits to main branch

Frame 9 / 11

---
config:
  flowchart:
    defaultRenderer: elk
title: Example Git diagram
animate: null
animate-yml-file: git-animate.yml

---



flowchart LR

subgraph main branch
    m1 
    m2 
    m3 
    m4 
    m5 
    m6
    mr6
end

subgraph develop branch
    d1 
    d2 
    d3
    dr1
    dr2
    dr3
end

d3 ed3dr1@-->dr1



m1 em1m2@-->m2
m2 em2m3@-->m3
m3 em3m4@-->m4
m4 em4m5@-->m5
m5 em5m6@-->m6

d1 ed1d2@-->d2
d2 ed2d3@-->d3
d3 ed3m6@-->m6
dr1 edr1dr2@-->dr2
dr2 edr2dr3@-->dr3
dr3 edr3mr6@-->mr6

m3 em3d1@-->d1
m5 em5dr1@-->dr1
m5 em5mr6@-->mr6

m1((m1)) ;
m2((m2)) ;
m3((m3)) ;
m4((m4)) ;
m5((m5)) ;
m6((m6)) ;
mr6((m6)) ;

d1((d1)) ;
d2((d2)) ;
d3((d3)) ;
dr1((d1)) ;
dr2((d2)) ;
dr3((d3)) ;

classDef class_active_node      stroke-width:1px,color:black,stroke:black ;
classDef class_from_node    stroke:green,stroke-width:5px,color:black ;
classDef class_to_node      stroke:red,stroke-width:5px,color:black ;
classDef class_hidden_node     stroke-width:1px,color:white,stroke:white ;
classDef class_active_edge    stroke-width:1px,color:black,stroke:black;
classDef class_hidden_edge stroke-width:1px,stroke:white ;
classDef class_animate_edge stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite,color black;

classDef class_old     stroke:#ccc,fill:#eee,color:#ccc;
classDef class_old_edge stroke-width:1px,stroke:#ccc,troke-dasharray: 9,5,stroke-dashoffset: 900 ;
class ed3d1r class_no_edge; 

class em5mr6 class_no_edge;

class m1 class_active_node; 
class m2 class_active_node; 
class m3 class_active_node; 
class m4 class_active_node; 
class m5 class_from_node; 
class m6 class_to_node; 
class mr6 class_hidden_node; 

class d1 class_active_edge;
class d2 class_active_node; 
class d3 class_from_node; 
class dr1 class_hidden_node;  
class dr2 class_hidden_node;  
class dr3 class_hidden_node;   


class em1m2 class_active_edge;
class em2m3 class_active_edge;
class em3m4 class_active_edge;
class em4m5 class_active_edge;
class em5m6 class_animate_edge; 
class em3d1 class_active_edge;
class ed1d2 class_active_edge;
class ed2d3 class_active_edge;
class ed3dr1 class_hidden_edge;
class ed3dr1 class_hidden_edge;
class edr1dr2 class_hidden_edge;
class edr2dr3 class_hidden_edge;
class edr3m6 class_hidden_edge;
class em5dr1 class_hidden_edge;
class edr3mr6 class_hidden_edge;
class em5mr6 class_hidden_edge;

class ed3m6 class_animate_edge; 
%% mermaid-animate-tag em5d1

merge develop to base

Frame 10 / 11

---
config:
  flowchart:
    defaultRenderer: elk
title: Example Git diagram
animate: null
animate-yml-file: git-animate.yml

---



flowchart LR

subgraph main branch
    m1 
    m2 
    m3 
    m4 
    m5 
    m6
    mr6
end

subgraph develop branch
    d1 
    d2 
    d3
    dr1
    dr2
    dr3
end

d3 ed3dr1@-->dr1



m1 em1m2@-->m2
m2 em2m3@-->m3
m3 em3m4@-->m4
m4 em4m5@-->m5
m5 em5m6@-->m6

d1 ed1d2@-->d2
d2 ed2d3@-->d3
d3 ed3m6@-->m6
dr1 edr1dr2@-->dr2
dr2 edr2dr3@-->dr3
dr3 edr3mr6@-->mr6

m3 em3d1@-->d1
m5 em5dr1@-->dr1
m5 em5mr6@-->mr6

m1((m1)) ;
m2((m2)) ;
m3((m3)) ;
m4((m4)) ;
m5((m5)) ;
m6((m6)) ;
mr6((m6)) ;

d1((d1)) ;
d2((d2)) ;
d3((d3)) ;
dr1((d1)) ;
dr2((d2)) ;
dr3((d3)) ;

classDef class_active_node      stroke-width:1px,color:black,stroke:black ;
classDef class_from_node    stroke:green,stroke-width:5px,color:black ;
classDef class_to_node      stroke:red,stroke-width:5px,color:black ;
classDef class_hidden_node     stroke-width:1px,color:white,stroke:white ;
classDef class_active_edge    stroke-width:1px,color:black,stroke:black;
classDef class_hidden_edge stroke-width:1px,stroke:white ;
classDef class_animate_edge stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite,color black;

classDef class_old     stroke:#ccc,fill:#eee,color:#ccc;
classDef class_old_edge stroke-width:1px,stroke:#ccc,troke-dasharray: 9,5,stroke-dashoffset: 900 ;
class ed3d1r class_no_edge; 

class em5mr6 class_no_edge;

class m1 class_active_node; 
class m2 class_active_node; 
class m3 class_active_node; 
class m4 class_active_node; 
class m5 class_from_node; 
class m6 class_old_node; 
class mr6 class_hidden_node; 

class d1 class_old_node; 
class d2 class_old_node; 
class d3 class_old_node; 
class dr1 class_to_node;  
class dr2 class_to_node;  
class dr3 class_to_node;   


class em1m2 class_active_edge;
class em2m3 class_active_edge;
class em3m4 class_active_edge;
class em4m5 class_active_edge;
class em5m6 class_hidden_edge;
class em3d1 class_old_edge; 
class ed1d2 class_old_edge; 
class ed2d3 class_old_edge; 
class ed3dr1 class_hidden_edge;
class ed3dr1 class_hidden_edge;
class edr1dr2 class_animate_edge; 
class edr2dr3 class_animate_edge; 
class edr3m6 class_hidden_edge;
class em5dr1 class_animate_edge; 
class edr3mr6 class_hidden_edge;
class em5mr6 class_hidden_edge;

class ed3m6 class_old_edge; 
%% mermaid-animate-tag em5d1

rebase develop branch onto main

this will replay d2 and d3 commits

Frame 11 / 11

---
config:
  flowchart:
    defaultRenderer: elk
title: Example Git diagram
animate: null
animate-yml-file: git-animate.yml

---



flowchart LR

subgraph main branch
    m1 
    m2 
    m3 
    m4 
    m5 
    m6
    mr6
end

subgraph develop branch
    d1 
    d2 
    d3
    dr1
    dr2
    dr3
end

d3 ed3dr1@-->dr1



m1 em1m2@-->m2
m2 em2m3@-->m3
m3 em3m4@-->m4
m4 em4m5@-->m5
m5 em5m6@-->m6

d1 ed1d2@-->d2
d2 ed2d3@-->d3
d3 ed3m6@-->m6
dr1 edr1dr2@-->dr2
dr2 edr2dr3@-->dr3
dr3 edr3mr6@-->mr6

m3 em3d1@-->d1
m5 em5dr1@-->dr1
m5 em5mr6@-->mr6

m1((m1)) ;
m2((m2)) ;
m3((m3)) ;
m4((m4)) ;
m5((m5)) ;
m6((m6)) ;
mr6((m6)) ;

d1((d1)) ;
d2((d2)) ;
d3((d3)) ;
dr1((d1)) ;
dr2((d2)) ;
dr3((d3)) ;

classDef class_active_node      stroke-width:1px,color:black,stroke:black ;
classDef class_from_node    stroke:green,stroke-width:5px,color:black ;
classDef class_to_node      stroke:red,stroke-width:5px,color:black ;
classDef class_hidden_node     stroke-width:1px,color:white,stroke:white ;
classDef class_active_edge    stroke-width:1px,color:black,stroke:black;
classDef class_hidden_edge stroke-width:1px,stroke:white ;
classDef class_animate_edge stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite,color black;

classDef class_old     stroke:#ccc,fill:#eee,color:#ccc;
classDef class_old_edge stroke-width:1px,stroke:#ccc,troke-dasharray: 9,5,stroke-dashoffset: 900 ;
class ed3d1r class_no_edge; 

class em5mr6 class_no_edge;

class m1 class_active_node; 
class m2 class_active_node; 
class m3 class_active_node; 
class m4 class_active_node; 
class m5 class_active_node; 
class m6 class_old_node; 
class mr6 class_to_node; 

class d1 class_old_node; 
class d2 class_old_node; 
class d3 class_old_node; 
class dr1 class_active_node;  
class dr2 class_active_node;  
class dr3 class_from_node;   


class em1m2 class_active_edge;
class em2m3 class_active_edge;
class em3m4 class_active_edge;
class em4m5 class_active_edge;
class em5m6 class_hidden_edge;
class em3d1 class_hidden_edge;
class ed1d2 class_old_edge; 
class ed2d3 class_old_edge; 
class ed3dr1 class_hidden_edge;
class ed3dr1 class_hidden_edge;
class edr1dr2 class_active_edge;
class edr2dr3 class_active_edge;
class edr3m6 class_hidden_edge;
class em5dr1 class_active_edge;
class edr3mr6 class_animate_edge; 
class em5mr6 class_hidden_edge;

class ed3m6 class_old_edge; 
class em5d1 class_active_edge;

rebase merge develop branch onto main

there is no conflict, m6 is exactly d3

Keyboard shortcuts

mermaid-animate

git

why using linear commit ?

solution : rebase

Frame 1 / 11

initial

Frame 2 / 11

add commit in main

Frame 3 / 11

add another commit in main

Frame 4 / 11

checkout develop branch

Frame 5 / 11

add commit in develop

Frame 6 / 11

add another commit in develop

Frame 7 / 11

in the mean time .... other devs add new commits to main branch

Frame 8 / 11

in the mean time .... other devs add new commits to main branch

Frame 9 / 11

merge develop to base

Frame 10 / 11

rebase develop branch onto main

Frame 11 / 11

rebase merge develop branch onto main