From 25c5cc21058cc045b5db2d9c0eb5029c53c419e9 Mon Sep 17 00:00:00 2001
From: Christian Krause <christian.krause@idiv.de>
Date: Fri, 20 Jan 2023 07:40:15 +0100
Subject: [PATCH] visualize git diff

---
 .gitignore                |  1 +
 basics.html               | 11 ++---------
 img/staging-area-diff.dot | 10 ++++++++++
 3 files changed, 13 insertions(+), 9 deletions(-)
 create mode 100644 img/staging-area-diff.dot

diff --git a/.gitignore b/.gitignore
index 28b36ba..6a6bfce 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,3 +12,4 @@ img/staging-area.svg
 paper.html
 paper.pdf
 *.pdf
+img/staging-area-diff.svg
diff --git a/basics.html b/basics.html
index e3993fc..bfcbaf5 100644
--- a/basics.html
+++ b/basics.html
@@ -584,18 +584,11 @@
               `rm` and that does something entirely different
           </section>
 
-          <section id="cli-git-diff-1" data-markdown>
+          <section id="cli-git-diff" data-markdown>
             ## command line
             ### show changes
 
-            ```bash
-            # from staging area to current working copy
-            git diff
-
-            # show contents of staging area, i.e.
-            # from last commit to staging area
-            git diff --staged
-            ```
+            ![git diff](img/staging-area-diff.svg)
 
             notes:
             - users should do this in a terminal with demo by us
diff --git a/img/staging-area-diff.dot b/img/staging-area-diff.dot
new file mode 100644
index 0000000..550bbbd
--- /dev/null
+++ b/img/staging-area-diff.dot
@@ -0,0 +1,10 @@
+digraph {
+    node [shape = "box", style = "filled,rounded"]
+
+    workdir[label = "working directory\n(changes not staged for commit)", color = lightskyblue]
+    stage[label = "staging area\n(changes to be committed)", color = orchid]
+    repo[label = "repository\n(tracked content)", color = limegreen]
+
+    workdir -> stage [label = "git diff"]
+    stage -> repo [label = "git diff --staged"]
+}
-- 
GitLab