Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

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