diff --git a/.gitignore b/.gitignore
index 28b36ba92457a10c789387aa7e0aad46b5b71249..6a6bfcebd3c0000bed2b8b890bda52f41e8fcab6 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 e3993fcc354c46a12e9b749c97f5052fc4c3a412..bfcbaf573e3cefdb3871176128ccbf6826b8a675 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 0000000000000000000000000000000000000000..550bbbd3ec2a685ff4830b4ce6a3fd309647eefd
--- /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"]
+}