NETWAYS · martialblog · Jan 17, 2023 · Jan 12, 2023 · Jan 11, 2023 · Jan 11, 2023
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,4 @@ stats
 vm/*.ova
 vm/mnt
 trainer/
+static/
diff --git a/README.md b/README.md
@@ -50,6 +50,21 @@ Start the presentation with the default settings:
 
 More instructions [here](https://github.com/NETWAYS/training-global#using-docker-to-build-and-serve-the-slide-deck).
 
+## Render mermaid.js
+
+Many diagrams are rendered using [mermaid.js](https://mermaid.js.org/). The diagrams are stored in `*.mmd` files and are rendered using the mermaid-cli.
+
+```
+# Uses a containerized mermaid-cli to render all images
+bash render-images.sh
+```
+
+To render a single image:
+
+```
+docker run -u `id -u`:`id -g` --rm -v $(pwd)/_images/mermaid:/data minlag/mermaid-cli -e png -i "/data/image-to-render.mmd"
+```
+
 ### Environment
 
 The training material focuses on https://nws.netways.de where every attendee
@@ -68,5 +83,3 @@ The rendered content will be updated at least if we do a newer version of the ma
 will also be tagged on git.
 
 Material is licensed under [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International](http://creativecommons.org/licenses/by-nc-sa/4.0/).
-
-
diff --git a/_images/ci/git_gitlab_ci_jobs.png b/_images/ci/git_gitlab_ci_jobs.png
diff --git a/_images/ci/git_jenkins_ci_git_hook.png b/_images/ci/git_jenkins_ci_git_hook.png
diff --git a/_images/introduction/git_introduction_basics_01_changes.png b/_images/introduction/git_introduction_basics_01_changes.png
diff --git a/_images/introduction/git_introduction_basics_03_three_states.png b/_images/introduction/git_introduction_basics_03_three_states.png
diff --git a/_images/introduction/git_introduction_cvcs_01.png b/_images/introduction/git_introduction_cvcs_01.png
diff --git a/_images/introduction/git_introduction_dvcs_01.png b/_images/introduction/git_introduction_dvcs_01.png
diff --git a/_images/mermaid/central-vcs.mmd b/_images/mermaid/central-vcs.mmd
@@ -0,0 +1,7 @@
+graph RL
+    subgraph CentralVCS
+    C{{Version DB}}
+    end
+    C -->|Client A| D[File]
+    C -->|Client B| E[File]
+    C -->|Client C| F[File]
diff --git a/_images/mermaid/central-vcs.mmd.png b/_images/mermaid/central-vcs.mmd.png
diff --git a/_images/mermaid/decentral-vcs.mmd b/_images/mermaid/decentral-vcs.mmd
@@ -0,0 +1,12 @@
+graph RL
+    subgraph CentralVCS
+    C{{Version DB}}
+    end
+    C <--> A
+    C <--> B
+    subgraph ClientA
+    A{{VersionDB}}
+    end
+    subgraph ClientB
+    B{{VersionDB}}
+    end
diff --git a/_images/mermaid/decentral-vcs.mmd.png b/_images/mermaid/decentral-vcs.mmd.png
diff --git a/_images/mermaid/deltas.mmd b/_images/mermaid/deltas.mmd
@@ -0,0 +1,5 @@
+graph LR
+    version1 --> version2 --> version3 --> version4
+    A[File A] -->A1(Δ1) --> A2( ) --> A3(Δ2)
+    B[File B] -->B1( ) -->B2(Δ1) --> B3( )
+    C[File C] -->C1(Δ1) -->C2( ) --> C3(Δ2)
diff --git a/_images/mermaid/deltas.mmd.png b/_images/mermaid/deltas.mmd.png
diff --git a/_images/mermaid/git-stages.mmd b/_images/mermaid/git-stages.mmd
@@ -0,0 +1,4 @@
+sequenceDiagram
+    Working Directory->>+Staging Area: add
+    Staging Area->>+Repository: commit
+    Repository->>+Working Directory: checkout
diff --git a/_images/mermaid/git-stages.mmd.png b/_images/mermaid/git-stages.mmd.png
diff --git a/_images/mermaid/workflow-after-rebase.mmd b/_images/mermaid/workflow-after-rebase.mmd
@@ -0,0 +1,9 @@
+gitGraph
+    commit id:"a11111"
+    commit id:"b22222"
+    commit id:"c33333"
+    commit id:"d44444"
+    branch local/main
+    checkout local/main
+    commit id:"y88888"
+    commit id:"z99999"
diff --git a/_images/mermaid/workflow-after-rebase.mmd.png b/_images/mermaid/workflow-after-rebase.mmd.png
diff --git a/_images/mermaid/workflow-before-rebase.mmd b/_images/mermaid/workflow-before-rebase.mmd
@@ -0,0 +1,10 @@
+gitGraph
+    commit id:"a11111"
+    commit id:"b22222"
+    branch local/main
+    checkout local/main
+    commit id:"y88888"
+    commit id:"z99999"
+    checkout main
+    commit id:"c33333"
+    commit id:"d44444"
diff --git a/_images/mermaid/workflow-before-rebase.mmd.png b/_images/mermaid/workflow-before-rebase.mmd.png
diff --git a/_images/mermaid/workflow-branches.mmd b/_images/mermaid/workflow-branches.mmd
@@ -0,0 +1,13 @@
+gitGraph
+    commit
+    commit
+    branch fix/login-bug
+    checkout fix/login-bug
+    commit
+    commit
+    checkout main
+    commit
+    commit
+    branch feature/new-logo
+    checkout feature/new-logo
+    commit
diff --git a/_images/mermaid/workflow-branches.mmd.png b/_images/mermaid/workflow-branches.mmd.png
diff --git a/_images/mermaid/workflow-diverge.mmd b/_images/mermaid/workflow-diverge.mmd
@@ -0,0 +1,10 @@
+gitGraph
+    commit
+    commit
+    branch local/main
+    checkout local/main
+    commit
+    commit
+    checkout main
+    commit
+    commit
diff --git a/_images/mermaid/workflow-diverge.mmd.png b/_images/mermaid/workflow-diverge.mmd.png
diff --git a/_images/mermaid/workflow-feature-branches.mmd b/_images/mermaid/workflow-feature-branches.mmd
@@ -0,0 +1,40 @@
+%%{init: { 'theme': 'default' , 'themeVariables': {
+          'git0': '#ff0000',
+          'git1': '#00ff00',
+          'git2': '#7171ff',
+          'git3': '#ff00ff',
+          'git4': '#00ffff',
+          'git5': '#ffff00',
+          'git6': '#ff00ff',
+          'git7': '#00ffff'
+} } }%%
+gitGraph
+  commit tag:"v0.1"
+  branch develop
+  checkout develop
+  commit
+  branch featureB
+  checkout featureB
+  commit
+  checkout main
+  checkout develop
+  commit
+  checkout featureB
+  commit
+  checkout main
+  commit tag:"v0.2"
+  checkout featureB
+  commit
+  checkout develop
+  branch featureA
+  commit
+  checkout develop
+  checkout featureA
+  commit
+  checkout featureB
+  commit
+  checkout develop
+  merge featureA
+  commit
+  checkout main
+  commit tag:"v1.0"
diff --git a/_images/mermaid/workflow-feature-branches.mmd.png b/_images/mermaid/workflow-feature-branches.mmd.png
diff --git a/_images/mermaid/workflow-github-pr.mmd b/_images/mermaid/workflow-github-pr.mmd
@@ -0,0 +1,10 @@
+gitGraph
+    commit
+    commit
+    branch fork/of/repository
+    checkout fork/of/repository
+    commit
+    commit
+    commit type:HIGHLIGHT tag:"Pull Request"
+    checkout main
+    merge fork/of/repository
diff --git a/_images/mermaid/workflow-github-pr.mmd.png b/_images/mermaid/workflow-github-pr.mmd.png
diff --git a/_images/mermaid/workflow-gitlab-mr.mmd b/_images/mermaid/workflow-gitlab-mr.mmd
@@ -0,0 +1,10 @@
+gitGraph
+    commit
+    commit
+    branch feature/branch
+    checkout feature/branch
+    commit
+    commit
+    commit type:HIGHLIGHT tag:"Merge Request"
+    checkout main
+    merge feature/branch
diff --git a/_images/mermaid/workflow-gitlab-mr.mmd.png b/_images/mermaid/workflow-gitlab-mr.mmd.png
diff --git a/_images/mermaid/workflow-historical-branches.mmd b/_images/mermaid/workflow-historical-branches.mmd
@@ -0,0 +1,26 @@
+%%{init: { 'theme': 'default' , 'themeVariables': {
+          'git0': '#ff0000',
+          'git1': '#00ff00',
+          'git2': '#7171ff',
+          'git3': '#ff00ff',
+          'git4': '#00ffff',
+          'git5': '#ffff00',
+          'git6': '#ff00ff',
+          'git7': '#00ffff'
+} } }%%
+gitGraph
+  commit tag:"v0.1"
+  branch develop
+  checkout develop
+  commit
+  checkout main
+  checkout develop
+  commit
+  checkout main
+  commit tag:"v0.2"
+  checkout develop
+  commit
+  checkout main
+  commit tag:"v1.0"
+  checkout develop
+  commit
diff --git a/_images/mermaid/workflow-historical-branches.mmd.png b/_images/mermaid/workflow-historical-branches.mmd.png
diff --git a/_images/mermaid/workflow-local.mmd b/_images/mermaid/workflow-local.mmd
@@ -0,0 +1,4 @@
+gitGraph
+    commit id: "a11111"
+    commit id: "b22222"
+    commit id: "c33333" tag: "main"
diff --git a/_images/mermaid/workflow-local.mmd.png b/_images/mermaid/workflow-local.mmd.png
diff --git a/_images/mermaid/workflow-maintenance-branch.mmd b/_images/mermaid/workflow-maintenance-branch.mmd
@@ -0,0 +1,53 @@
+%%{init: { 'theme': 'default' , 'themeVariables': {
+          'git0': '#ff0000',
+          'git1': '#d0661c',
+          'git2': '#00ff00',
+          'git3': '#7171ff',
+          'git4': '#ff00ff',
+          'git5': '#00ffff',
+          'git6': '#ffff00',
+          'git7': '#ff00ff',
+          'git8': '#00ffff'
+} } }%%
+gitGraph
+    commit tag:"v0.1"
+    branch hotfix
+    checkout hotfix
+    commit
+    branch develop
+    checkout develop
+    commit
+    branch featureB
+    checkout featureB
+    commit
+    checkout main
+    checkout hotfix
+    commit
+    checkout develop
+    commit
+    checkout featureB
+    commit
+    checkout main
+    merge hotfix  tag:"v0.2"
+    checkout featureB
+    commit
+    checkout develop
+    branch featureA
+    commit
+    checkout develop
+    merge hotfix
+    checkout featureA
+    commit
+    checkout featureB
+    commit
+    checkout develop
+    merge featureA
+    branch release
+    checkout release
+    commit
+    checkout main
+    commit tag:"v1.0"
+    checkout release
+    merge main
+    checkout develop
+    merge release
diff --git a/_images/mermaid/workflow-maintenance-branch.mmd.png b/_images/mermaid/workflow-maintenance-branch.mmd.png
diff --git a/_images/mermaid/workflow-release-branches.mmd b/_images/mermaid/workflow-release-branches.mmd
@@ -0,0 +1,46 @@
+%%{init: { 'theme': 'default' , 'themeVariables': {
+          'git0': '#ff0000',
+          'git1': '#00ff00',
+          'git2': '#7171ff',
+          'git3': '#ff00ff',
+          'git4': '#00ffff',
+          'git5': '#ffff00',
+          'git6': '#ff00ff',
+          'git7': '#00ffff'
+} } }%%
+gitGraph
+  commit tag:"v0.1"
+  branch develop
+  checkout develop
+  commit
+  branch featureB
+  checkout featureB
+  commit
+  checkout main
+  checkout develop
+  commit
+  checkout featureB
+  commit
+  checkout main
+  commit tag:"v0.2"
+  checkout featureB
+  commit
+  checkout develop
+  branch featureA
+  commit
+  checkout develop
+  checkout featureA
+  commit
+  checkout featureB
+  commit
+  checkout develop
+  merge featureA
+  branch release
+  checkout release
+  commit
+  checkout main
+  commit tag:"v1.0"
+  checkout release
+  merge main
+  checkout develop
+  merge release
diff --git a/_images/mermaid/workflow-release-branches.mmd.png b/_images/mermaid/workflow-release-branches.mmd.png
diff --git a/_images/mermaid/workflow-remote.mmd b/_images/mermaid/workflow-remote.mmd
@@ -0,0 +1,6 @@
+gitGraph
+    commit id: "a11111"
+    commit id: "b22222"
+    commit id: "c33333"
+    commit id: "d44444" type: HIGHLIGHT
+    commit id: "e55555" type: HIGHLIGHT tag: "origin/main"
diff --git a/_images/mermaid/workflow-remote.mmd.png b/_images/mermaid/workflow-remote.mmd.png
diff --git a/_images/workflows/git_centralized_workflow_01.png b/_images/workflows/git_centralized_workflow_01.png
diff --git a/_images/workflows/git_centralized_workflow_02.png b/_images/workflows/git_centralized_workflow_02.png
diff --git a/_images/workflows/git_centralized_workflow_03.png b/_images/workflows/git_centralized_workflow_03.png
diff --git a/_images/workflows/git_centralized_workflow_04_example.png b/_images/workflows/git_centralized_workflow_04_example.png
diff --git a/_images/workflows/git_feature_branch_workflow_01.png b/_images/workflows/git_feature_branch_workflow_01.png
diff --git a/_images/workflows/git_gitflow_workflow_02.png b/_images/workflows/git_gitflow_workflow_02.png
diff --git a/_images/workflows/git_gitflow_workflow_03.png b/_images/workflows/git_gitflow_workflow_03.png
diff --git a/_images/workflows/git_gitflow_workflow_04.png b/_images/workflows/git_gitflow_workflow_04.png
diff --git a/_images/workflows/git_gitflow_workflow_05.png b/_images/workflows/git_gitflow_workflow_05.png
diff --git a/_images/workflows/git_github_workflow.png b/_images/workflows/git_github_workflow.png
diff --git a/_images/workflows/git_gitlab_workflow.png b/_images/workflows/git_gitlab_workflow.png
diff --git a/day1/01_Introduction/01_Intro.md b/day1/01_Introduction/01_Intro.md
@@ -34,7 +34,7 @@ systems which store the file revisions in a database.
 * CVS, Subversion
 * What happens if the server is down?
 
-<center><img src="../../_images/introduction/git_introduction_cvcs_01.png" alt="CVCS"/></center>
+<center><img src="../../_images/mermaid/central-vcs.mmd.png" alt="Central VCS"/></center>
 
 
 ~~~SECTION:handouts~~~
@@ -52,7 +52,7 @@ systems which store the file revisions in a database.
 * Git, Mercurial, Bazaar, etc.
 * Server dies, client continues
 
-<center><img src="../../_images/introduction/git_introduction_dvcs_01.png" alt="CVCS"/></center>
+<center><img src="../../_images/mermaid/decentral-vcs.mmd.png" alt="Decentral VCS"/></center>
 
 ~~~SECTION:handouts~~~
 

diff --git a/day1/01_Introduction/03_Basics.md b/day1/01_Introduction/03_Basics.md
@@ -21,7 +21,7 @@
   * Set of snapshots of a mini-filesystem
   * No change - link to the previous identical stored file
 
-<center><img src="../../_images/introduction/git_introduction_basics_01_changes.png" style="width:526px;height:305px;" alt="Basic Changes"/></center>
+<center><img src="../../_images/mermaid/deltas.mmd.png" alt="Detla Changes"/></center>
 
 !SLIDE smbullets printonly
 # Snapshots and Differences
@@ -31,7 +31,7 @@
   * Set of snapshots of a mini-filesystem
   * No change - link to the previous identical stored file
 
-<center><img src="../../_images/introduction/git_introduction_basics_01_changes.png" style="width:450px" alt="Basic Changes"/></center>
+<center><img src="../../_images/mermaid/deltas.mmd.png" width="70%" alt="Detla Changes"/></center>
 
 
 !SLIDE smbullets
@@ -62,15 +62,23 @@ Example:
 
 ~~~ENDSECTION~~~
 
-!SLIDE smbullets
+!SLIDE smbullets noprint
 # The three states
 
 * Working directory ("modified")
 * Staging area ("staged")
 * Git directory ("committed")
 
-<center><img src="../../_images/introduction/git_introduction_basics_03_three_states.png" alt="Basics 3 States"/></center>
+<center><img src="../../_images/mermaid/git-stages.mmd.png" alt="Git Stages"/></center>
+
+!SLIDE smbullets printonly
+# The three states
+
+* Working directory ("modified")
+* Staging area ("staged")
+* Git directory ("committed")
 
+<center><img src="../../_images/mermaid/git-stages.mmd.png" width="75%" alt="Git Stages"/></center>
 
 ~~~SECTION:notes~~~