diff --git a/notes/pics/trapping-rain-water.png b/notes/pics/trapping-rain-water.png
index 4aa666ab..54c654e4 100644
Binary files a/notes/pics/trapping-rain-water.png and b/notes/pics/trapping-rain-water.png differ
diff --git a/tools/diagram/src/trapping-rain-water.svg b/tools/diagram/src/trapping-rain-water.svg
index 809b073a..d03ade2d 100644
--- a/tools/diagram/src/trapping-rain-water.svg
+++ b/tools/diagram/src/trapping-rain-water.svg
@@ -1,31 +1,31 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="600" height="290" viewBox="0 0 600 290">
   <style>
-    text { font-family: "PingFang SC", "Microsoft YaHei", Helvetica, Arial, sans-serif; fill: #666; font-size: 12px; }
-    .title { font-weight: bold; font-size: 15px; fill: #777; text-anchor: middle; }
+    text { font-family: "PingFang SC", "Microsoft YaHei", Helvetica, Arial, sans-serif; fill: #3F3F3F; font-size: 12px; }
+    .title { font-weight: bold; font-size: 15px; fill: #333; text-anchor: middle; }
     .b { font-weight: bold; }
     .c { text-anchor: middle; }
     .e { text-anchor: end; }
     .note { fill: #C0605A; }
     .ok { fill: #6A9F68; }
-    .sub { font-size: 11px; fill: #888; }
+    .sub { font-size: 11px; fill: #6E6E6E; }
     .mono { font-family: Menlo, Consolas, monospace; }
-    .arrow { stroke: #666; stroke-width: 1.3; fill: none; marker-end: url(#a); }
+    .arrow { stroke: #555; stroke-width: 1.1; fill: none; marker-end: url(#a); }
     .red { stroke: #C0605A; marker-end: url(#r); }
     .green { stroke: #6A9F68; marker-end: url(#g); }
     .dash { stroke-dasharray: 5 4; }
-    .line { stroke: #666; stroke-width: 1.3; fill: none; }
+    .line { stroke: #555; stroke-width: 1.1; fill: none; }
     .frame { fill: none; stroke: #999; stroke-width: 1; stroke-dasharray: 4 3; }
     .shadow { fill: #DADADA; }
   </style>
   <defs>
     <marker id="a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
-      <path d="M1,1 L9,5 L1,9" fill="none" stroke="#666" stroke-width="1.6"/>
+      <path d="M1,1.5 L9.5,5 L1,8.5 z" fill="#555"/>
     </marker>
     <marker id="r" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
-      <path d="M1,1 L9,5 L1,9" fill="none" stroke="#C0605A" stroke-width="1.6"/>
+      <path d="M1,1.5 L9.5,5 L1,8.5 z" fill="#C0605A"/>
     </marker>
     <marker id="g" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
-      <path d="M1,1 L9,5 L1,9" fill="none" stroke="#6A9F68" stroke-width="1.6"/>
+      <path d="M1,1.5 L9.5,5 L1,8.5 z" fill="#6A9F68"/>
     </marker>
   </defs>
   <rect width="100%" height="100%" fill="#FFFFFF"/>
@@ -34,23 +34,23 @@
   <text x="78" y="246" class="c sub">0</text>
   <rect x="98" y="190" width="36" height="40" fill="#9E9E9E"/>
   <text x="116" y="246" class="c sub">1</text>
-  <rect x="136" y="190" width="36" height="40" fill="#D6EEF8"/>
+  <rect x="136" y="190" width="36" height="40" fill="#DCEEFC" stroke="#9CC4E2"/>
   <text x="154" y="246" class="c sub">2</text>
   <rect x="174" y="150" width="36" height="80" fill="#9E9E9E"/>
   <text x="192" y="246" class="c sub">3</text>
-  <rect x="212" y="150" width="36" height="40" fill="#D6EEF8"/>
+  <rect x="212" y="150" width="36" height="40" fill="#DCEEFC" stroke="#9CC4E2"/>
   <rect x="212" y="190" width="36" height="40" fill="#9E9E9E"/>
   <text x="230" y="246" class="c sub">4</text>
-  <rect x="250" y="150" width="36" height="80" fill="#D6EEF8"/>
+  <rect x="250" y="150" width="36" height="80" fill="#DCEEFC" stroke="#9CC4E2"/>
   <text x="268" y="246" class="c sub">5</text>
-  <rect x="288" y="150" width="36" height="40" fill="#D6EEF8"/>
+  <rect x="288" y="150" width="36" height="40" fill="#DCEEFC" stroke="#9CC4E2"/>
   <rect x="288" y="190" width="36" height="40" fill="#9E9E9E"/>
   <text x="306" y="246" class="c sub">6</text>
   <rect x="326" y="110" width="36" height="120" fill="#9E9E9E"/>
   <text x="344" y="246" class="c sub">7</text>
   <rect x="364" y="150" width="36" height="80" fill="#9E9E9E"/>
   <text x="382" y="246" class="c sub">8</text>
-  <rect x="402" y="150" width="36" height="40" fill="#D6EEF8"/>
+  <rect x="402" y="150" width="36" height="40" fill="#DCEEFC" stroke="#9CC4E2"/>
   <rect x="402" y="190" width="36" height="40" fill="#9E9E9E"/>
   <text x="420" y="246" class="c sub">9</text>
   <rect x="440" y="150" width="36" height="80" fill="#9E9E9E"/>