visualize git diff

.gitignore

@@ -12,3 +12,4 @@ img/staging-area.svg
 paper.html
 paper.pdf
 *.pdf
+img/staging-area-diff.svg

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

img/staging-area-diff.dot

+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"]
+}