what is it ?

This is a pre-processor, that allows you to render animation for mermaid diagrams, if you use mdbook to manage your documentation written as .md files.

Look at demos to look what it does.
Look at installation to look how to install it. If you already use mdbook, it is one line in you book.toml file.
Loot at usage to see how to configure a diagram. The configuration is a yml file, so you can easily handle that with other tools.

demod

mermaid version
flowchart
pie
git
xy
timeline

blah

mermaid version

blahblkdfa

this comes from your settings. Check you have version >= 11.12.2

---


---

info

if not, some features ( eg xy graph ) will not work.

flowchart

demo1

ms f min f max

Frame 1 / 4

---
config: null
title: demo with workflow
animate:
  frames:
  - title: |
      <p style="background-color:FireBrick;color:GreenYellow">user label for frame 1, foo</p>
    toggles:
    - n1@on
    - n2@off
    - n3@hidden
    - n4@hidden
  - title: |
      <p style="background-color:aquamarine;color:black">user label for frame 2, foo</p>
    toggles:
    - n1@off
    - n2@on
  - title: |
      <p style="background-color:coral;color:GreenYellow">user label for frame 3, foo</p>
    toggles:
    - n1@hidden
    - n2@hidden
    - n3@on
  - title: |
      <p style="background-color:Purple;color:GreenYellow">user label for frame 4, foo</p>
    toggles:
    - n3@off
    - n4@on
  tags:
  - n1
  - n2
  - n3
  - n4
  tag-values: []
  variants:
  - name: on
    value: class {tag} class_on;
  - name: off
    value: class {tag} class_off;
  - name: hidden
    value: class {tag} class_grey;
  delay: 500
  auto-start: true
  min-frame: null
  max-frame: null
animate-yml-file: null

---



flowchart LR

subgraph one
    n1
    n2
end

subgraph two
    n3 
    n4 
end

n1 --> n2
n2 --> n3
n3 --> n4
n4 --> n1


classDef class_on fill:green,stroke:red,stroke-width:5px,color:white ;
classDef class_off fill:lightgreen,stroke:white,stroke-width:5px,color:black ;
classDef class_grey fill:grey,stroke:grey,stroke-width:5px,color:black ;


class n1 class_on;
class n2 class_off;
class n3 class_grey;
class n4 class_grey;

user label for frame 1, foo

Frame 2 / 4

---
config: null
title: demo with workflow
animate:
  frames:
  - title: |
      <p style="background-color:FireBrick;color:GreenYellow">user label for frame 1, foo</p>
    toggles:
    - n1@on
    - n2@off
    - n3@hidden
    - n4@hidden
  - title: |
      <p style="background-color:aquamarine;color:black">user label for frame 2, foo</p>
    toggles:
    - n1@off
    - n2@on
  - title: |
      <p style="background-color:coral;color:GreenYellow">user label for frame 3, foo</p>
    toggles:
    - n1@hidden
    - n2@hidden
    - n3@on
  - title: |
      <p style="background-color:Purple;color:GreenYellow">user label for frame 4, foo</p>
    toggles:
    - n3@off
    - n4@on
  tags:
  - n1
  - n2
  - n3
  - n4
  tag-values: []
  variants:
  - name: on
    value: class {tag} class_on;
  - name: off
    value: class {tag} class_off;
  - name: hidden
    value: class {tag} class_grey;
  delay: 500
  auto-start: true
  min-frame: null
  max-frame: null
animate-yml-file: null

---



flowchart LR

subgraph one
    n1
    n2
end

subgraph two
    n3 
    n4 
end

n1 --> n2
n2 --> n3
n3 --> n4
n4 --> n1


classDef class_on fill:green,stroke:red,stroke-width:5px,color:white ;
classDef class_off fill:lightgreen,stroke:white,stroke-width:5px,color:black ;
classDef class_grey fill:grey,stroke:grey,stroke-width:5px,color:black ;


class n1 class_off;
class n2 class_on;
class n3 class_grey;
class n4 class_grey;

user label for frame 2, foo

Frame 3 / 4

---
config: null
title: demo with workflow
animate:
  frames:
  - title: |
      <p style="background-color:FireBrick;color:GreenYellow">user label for frame 1, foo</p>
    toggles:
    - n1@on
    - n2@off
    - n3@hidden
    - n4@hidden
  - title: |
      <p style="background-color:aquamarine;color:black">user label for frame 2, foo</p>
    toggles:
    - n1@off
    - n2@on
  - title: |
      <p style="background-color:coral;color:GreenYellow">user label for frame 3, foo</p>
    toggles:
    - n1@hidden
    - n2@hidden
    - n3@on
  - title: |
      <p style="background-color:Purple;color:GreenYellow">user label for frame 4, foo</p>
    toggles:
    - n3@off
    - n4@on
  tags:
  - n1
  - n2
  - n3
  - n4
  tag-values: []
  variants:
  - name: on
    value: class {tag} class_on;
  - name: off
    value: class {tag} class_off;
  - name: hidden
    value: class {tag} class_grey;
  delay: 500
  auto-start: true
  min-frame: null
  max-frame: null
animate-yml-file: null

---



flowchart LR

subgraph one
    n1
    n2
end

subgraph two
    n3 
    n4 
end

n1 --> n2
n2 --> n3
n3 --> n4
n4 --> n1


classDef class_on fill:green,stroke:red,stroke-width:5px,color:white ;
classDef class_off fill:lightgreen,stroke:white,stroke-width:5px,color:black ;
classDef class_grey fill:grey,stroke:grey,stroke-width:5px,color:black ;


class n1 class_grey;
class n2 class_grey;
class n3 class_on;
class n4 class_grey;

user label for frame 3, foo

Frame 4 / 4

---
config: null
title: demo with workflow
animate:
  frames:
  - title: |
      <p style="background-color:FireBrick;color:GreenYellow">user label for frame 1, foo</p>
    toggles:
    - n1@on
    - n2@off
    - n3@hidden
    - n4@hidden
  - title: |
      <p style="background-color:aquamarine;color:black">user label for frame 2, foo</p>
    toggles:
    - n1@off
    - n2@on
  - title: |
      <p style="background-color:coral;color:GreenYellow">user label for frame 3, foo</p>
    toggles:
    - n1@hidden
    - n2@hidden
    - n3@on
  - title: |
      <p style="background-color:Purple;color:GreenYellow">user label for frame 4, foo</p>
    toggles:
    - n3@off
    - n4@on
  tags:
  - n1
  - n2
  - n3
  - n4
  tag-values: []
  variants:
  - name: on
    value: class {tag} class_on;
  - name: off
    value: class {tag} class_off;
  - name: hidden
    value: class {tag} class_grey;
  delay: 500
  auto-start: true
  min-frame: null
  max-frame: null
animate-yml-file: null

---



flowchart LR

subgraph one
    n1
    n2
end

subgraph two
    n3 
    n4 
end

n1 --> n2
n2 --> n3
n3 --> n4
n4 --> n1


classDef class_on fill:green,stroke:red,stroke-width:5px,color:white ;
classDef class_off fill:lightgreen,stroke:white,stroke-width:5px,color:black ;
classDef class_grey fill:grey,stroke:grey,stroke-width:5px,color:black ;


class n1 class_grey;
class n2 class_grey;
class n3 class_off;
class n4 class_on;

user label for frame 4, foo

pie

ms f min f max

Frame 1 / 2

---
config: null
title: pie
animate:
  frames:
  - title: |
      <h1 style="background-color:FireBrick;color:GreenYellow">year 2020</h1>
    toggles:
    - scenario@sc-1
  - title: |
      <h1 style="background-color:aquamarine;color:black">year 2025</h1>
    toggles:
    - scenario@sc-2
  tags:
  - scenario
  tag-values: []
  variants:
  - name: sc-1
    value: |
      "Dog" : 300
      "Cat" : 100
      "Rat" : 10
  - name: sc-2
    value: |
      "Dog" : 350
      "Cat" : 100
      "Rat" : 34
  delay: 800
  auto-start: true
  min-frame: null
  max-frame: null
animate-yml-file: null

---


pie title Pets adopted by volunteers
"Dog" : 300
"Cat" : 100
"Rat" : 10

year 2020

Frame 2 / 2

---
config: null
title: pie
animate:
  frames:
  - title: |
      <h1 style="background-color:FireBrick;color:GreenYellow">year 2020</h1>
    toggles:
    - scenario@sc-1
  - title: |
      <h1 style="background-color:aquamarine;color:black">year 2025</h1>
    toggles:
    - scenario@sc-2
  tags:
  - scenario
  tag-values: []
  variants:
  - name: sc-1
    value: |
      "Dog" : 300
      "Cat" : 100
      "Rat" : 10
  - name: sc-2
    value: |
      "Dog" : 350
      "Cat" : 100
      "Rat" : 34
  delay: 800
  auto-start: true
  min-frame: null
  max-frame: null
animate-yml-file: null

---


pie title Pets adopted by volunteers
"Dog" : 350
"Cat" : 100
"Rat" : 34

year 2025

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

chart

ms f min f max

Frame 1 / 2

---
config: null
title: blah
animate:
  frames:
  - title: v2000
    toggles:
    - scenario@v2000
  - title: v2020
    toggles:
    - scenario@v2020
  tags:
  - scenario
  tag-values: []
  variants:
  - name: v2000
    value: |
      title "Sales Revenue year 2000"
      line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
  - name: v2020
    value: |
      title "Sales Revenue year 2020"
      line [7300, 6300, 7500, 8200, 9500, 10500, 9000, 9200, 9200, 8500, 7300, 6300]
      bar [7300, 6300, 7500, 8200, 9500, 10500, 9000, 9200, 9200, 8500, 7300, 6300]
  delay: 500
  auto-start: true
  min-frame: null
  max-frame: null
animate-yml-file: null

---



xychart
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    %% bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    title "Sales Revenue year 2000"
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

v2000

Frame 2 / 2

---
config: null
title: blah
animate:
  frames:
  - title: v2000
    toggles:
    - scenario@v2000
  - title: v2020
    toggles:
    - scenario@v2020
  tags:
  - scenario
  tag-values: []
  variants:
  - name: v2000
    value: |
      title "Sales Revenue year 2000"
      line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
  - name: v2020
    value: |
      title "Sales Revenue year 2020"
      line [7300, 6300, 7500, 8200, 9500, 10500, 9000, 9200, 9200, 8500, 7300, 6300]
      bar [7300, 6300, 7500, 8200, 9500, 10500, 9000, 9200, 9200, 8500, 7300, 6300]
  delay: 500
  auto-start: true
  min-frame: null
  max-frame: null
animate-yml-file: null

---



xychart
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    %% bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    title "Sales Revenue year 2020"
line [7300, 6300, 7500, 8200, 9500, 10500, 9000, 9200, 9200, 8500, 7300, 6300]
bar [7300, 6300, 7500, 8200, 9500, 10500, 9000, 9200, 9200, 8500, 7300, 6300]

v2020

timeline

ms f min f max

Frame 1 / 3

---
config:
  logLevel: debug
  theme: default
title: null
animate: null
animate-yml-file: timeline-animate.yml

---


       timeline
        title History of Social Media Platform

2002 : LinkedIn 
%% mermaid-animate-tag 2004
%% mermaid-animate-tag 2005
%% mermaid-animate-tag 2006
%% mermaid-animate-tag 2007
%% mermaid-animate-tag 2008
%% mermaid-animate-tag 2010

2002

Frame 2 / 3

---
config:
  logLevel: debug
  theme: default
title: null
animate: null
animate-yml-file: timeline-animate.yml

---


       timeline
        title History of Social Media Platform

2002 : LinkedIn 
2004 : Facebook 
%% mermaid-animate-tag 2005
%% mermaid-animate-tag 2006
%% mermaid-animate-tag 2007
%% mermaid-animate-tag 2008
%% mermaid-animate-tag 2010

2004

Frame 3 / 3

---
config:
  logLevel: debug
  theme: default
title: null
animate: null
animate-yml-file: timeline-animate.yml

---


       timeline
        title History of Social Media Platform

2002 : LinkedIn 
2004 : Facebook 
2005 : YouTube 
%% mermaid-animate-tag 2006
%% mermaid-animate-tag 2007
%% mermaid-animate-tag 2008
%% mermaid-animate-tag 2010

2005

installation

cargo

you need a working installation of cargo, the package manager for rust, follow instructions :

https://doc.rust-lang.org/cargo/getting-started/installation.html

mdbook

you need mdbook

cargo install mdbook
mdbook --version

this was tested with version v0.5.2

mdbook-mermaid preprocessor

to let mdbook process the mermaid diagrams, you need the preprocessor for mdbook mermaid

cargo install mdbook-mermaid
mdbook-mermaid --version
# install the .js ressources
mdbook-mermaid install <path to your doc sources>

this was tested with version 0.17.0

mermaid.js version

mdbook-mermaid install will install mermaid.js, for 0.17.0 it will install mermaid.js version 11.6.0, which does not support some mermaid features.

to upgrade, add :

curl https://unpkg.com/mermaid@11.12.2/dist/mermaid.min.js --insecure -o <path to your doc sources>/mermaid.min.js

mdbook-mermaid-animate

( this project )

to let mdbook process the mermaid diagrams in order to animate them, you need the preprocessor for mdbook mermaid animate

cargo install mdbook-mermaid-animate
mdbook-mermaid-animate install <path to your doc sources>

in your book.toml

add :

preprocessor.mermaid-animate]
after=["mermaid"]

and :

[output.html]
#mathjax-support = true
#additional-css = ["dtmo.css", "mermaid.css"]
additional-js = [
    "mermaid.min.js", 
    "mermaid-init.js", 
    "mermaid-animate.js",
]

write your documentation

follow mdbook guidelines to write the .md files of your documentation Look at this directory as a working example

usage
some design decisions
informations inline
informations in a separate file

usage

top

some design decisions

we use ```mermaid tag, because we want the diagram to be visible outside of mdbook and the preprocessors, eg github, vscode, … so there is not a new tag, the animated diagrams will be inside block, starting with ```mermaid and ending with ``` .
in mermaid, the informations between the --- marks are a yaml document. If this document has the key animate or animate-yml-file, it will be handled by the mdbook-mermaid-animate preprocessor, if not it will be ignored.

informations inline


---

animate:
    delay: ...
    tags: ...
    variants: ...

---

body of the mermaid diagram definition

informations in a separate file


---

animate-yml-file: some yml file

---

body of the mermaid diagram definition

overview

We define tags, which are string values, and variants, which also string values, and for each frame we map tags to variant names.

The animation is a list of frames. For each frame, we each tag has one value. But, because we don’t want to define again, for each frame, the value of each tag, we only define the tags that change.

yml file

we have these keys :

- delay : the delay in ms between two frames
- tags : a list of possible tags
- variants : a list of possible ( `name`, `value`) pairs
- frames : a list of frames

A frame has keys :

- title
- toggles : a list of string, of the form `tag`@`variant name`

Example : git linear commit diagram.

see the yaml file

variants

in this example, each node can be :

on (the commit is done)
off (the commit is not done)
from ( this is the previous commit)
to ( this is the next commit )

same for edges…

  variants:
   - name: animate_edge
     value: 'class {tag} class_animate_edge; '
   - name: hidden_edge
     value: 'class {tag} class_hidden_edge;'
   - name: active_edge
     value: 'class {tag} class_active_edge;'
   - name: active_node
     value: 'class {tag} class_active_node; '
   - name: hidden_node
     value: 'class {tag} class_hidden_node; '
   - name: from_node
     value: 'class {tag} class_from_node; '
   - name: to_node
     value: 'class {tag} class_to_node; '
   - name: old_node
     value: 'class {tag} class_old_node; '
   - name: old_edge
     value: 'class {tag} class_old_edge; '

we define here the colors for nodes and edges, using classes. The syntax {tag} will allow to replace the tag with its value, for each frame

frames

we show here only two frames


    - title: |
        <h1 style="background-color:Lavender">
        checkout develop branch
        </h1>
      toggles: 
        - em2m3@active_edge
        - em3d1@animate_edge 
        - m2@active_node
        - m3@from_node
        - d1@to_node        

    - title: |
        <h1 style="background-color:Lavender">
        add commit in develop
        </h1>
      toggles: 
        - em3d1@active_edge
        - ed1d2@animate_edge 
        - m3@active_node
        - d1@from_node
        - d2@to_node

the title is an html element
toggles is a list of tag that will change value. Tags not present here will keep the value of the previous frame.

Keyboard shortcuts

mermaid-animate

Frame 1 / 4

Frame 2 / 4

Frame 3 / 4

Frame 4 / 4

Frame 1 / 2

year 2020

Frame 2 / 2

year 2025

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

Frame 1 / 2

Frame 2 / 2

Frame 1 / 3

2002

Frame 2 / 3

2004

Frame 3 / 3

2005