From 29bd80824b09ee64076272da0f3818e7a80900a3 Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Sat, 14 Mar 2026 12:10:35 -0400
Subject: [PATCH] Improve workflow diagram with LR layout and docs styling

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/images/plan-implement-readme.svg | 87 +++++++++++++++------------
 1 file changed, 47 insertions(+), 40 deletions(-)

diff --git a/docs/images/plan-implement-readme.svg b/docs/images/plan-implement-readme.svg
index 78674c3d7..e22a12ffa 100644
--- a/docs/images/plan-implement-readme.svg
+++ b/docs/images/plan-implement-readme.svg
@@ -4,92 +4,99 @@
 <!-- Generated by graphviz version 14.1.3 (20260303.0454)
  -->
 <!-- Title: PlanImplement Pages: 1 -->
-<svg width="151pt" height="443pt"
- viewBox="0.00 0.00 151.00 443.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 438.5)">
+<svg width="674pt" height="44pt"
+ viewBox="0.00 0.00 674.00 44.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<style>
+  @media (prefers-color-scheme: dark) {
+    [fill="#1a1a1a"] { fill: #e5e5e5; }
+    [fill="#666666"] { fill: #aaaaaa; }
+    [stroke="#666666"] { stroke: #aaaaaa; }
+    [stroke="#999999"] { stroke: #777777; }
+  }
+</style>
+<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 40.25)">
 <title>PlanImplement</title>
-<polygon fill="white" stroke="none" points="-4,4 -4,-438.5 147.41,-438.5 147.41,4 -4,4"/>
 <!-- start -->
 <g id="node1" class="node">
 <title>start</title>
-<polygon fill="none" stroke="black" points="71.71,-434.5 31.66,-416.5 71.71,-398.5 111.76,-416.5 71.71,-434.5"/>
-<polyline fill="none" stroke="black" points="42.6,-421.42 42.6,-411.58"/>
-<polyline fill="none" stroke="black" points="60.76,-403.42 82.65,-403.42"/>
-<polyline fill="none" stroke="black" points="100.81,-411.58 100.81,-421.42"/>
-<polyline fill="none" stroke="black" points="82.65,-429.58 60.76,-429.58"/>
-<text xml:space="preserve" text-anchor="middle" x="71.71" y="-411.45" font-family="Times,serif" font-size="14.00">Start</text>
+<polygon fill="none" stroke="#357f9e" points="35.26,-36.12 0,-18.13 35.26,-0.13 70.52,-18.12 35.26,-36.12"/>
+<polyline fill="none" stroke="#357f9e" points="10.69,-23.58 10.69,-12.67"/>
+<polyline fill="none" stroke="#357f9e" points="24.57,-5.58 45.95,-5.58"/>
+<polyline fill="none" stroke="#357f9e" points="59.83,-12.67 59.83,-23.58"/>
+<polyline fill="none" stroke="#357f9e" points="45.95,-30.67 24.57,-30.67"/>
+<text xml:space="preserve" text-anchor="middle" x="35.26" y="-13.1" font-family="Helvetica,sans-Serif" font-size="12.00" fill="#1a1a1a">Start</text>
 </g>
 <!-- plan -->
 <g id="node3" class="node">
 <title>plan</title>
-<ellipse fill="none" stroke="black" cx="71.71" cy="-343.5" rx="27.3" ry="18"/>
-<text xml:space="preserve" text-anchor="middle" x="71.71" y="-338.45" font-family="Times,serif" font-size="14.00">Plan</text>
+<path fill="none" stroke="#357f9e" d="M149.52,-36.12C149.52,-36.12 119.52,-36.12 119.52,-36.12 113.52,-36.12 107.52,-30.12 107.52,-24.12 107.52,-24.12 107.52,-12.12 107.52,-12.12 107.52,-6.12 113.52,-0.12 119.52,-0.12 119.52,-0.12 149.52,-0.12 149.52,-0.12 155.52,-0.12 161.52,-6.12 161.52,-12.12 161.52,-12.12 161.52,-24.13 161.52,-24.13 161.52,-30.12 155.52,-36.12 149.52,-36.12"/>
+<text xml:space="preserve" text-anchor="middle" x="134.52" y="-13.1" font-family="Helvetica,sans-Serif" font-size="12.00" fill="#1a1a1a">Plan</text>
 </g>
 <!-- start&#45;&gt;plan -->
 <g id="edge1" class="edge">
 <title>start&#45;&gt;plan</title>
-<path fill="none" stroke="black" d="M71.71,-398.31C71.71,-390.73 71.71,-381.6 71.71,-373.04"/>
-<polygon fill="black" stroke="black" points="75.21,-373.04 71.71,-363.04 68.21,-373.04 75.21,-373.04"/>
+<path fill="none" stroke="#666666" d="M71.37,-18.12C79.34,-18.12 87.84,-18.12 95.91,-18.12"/>
+<polygon fill="#666666" stroke="#666666" points="95.8,-21.63 105.8,-18.13 95.8,-14.63 95.8,-21.63"/>
 </g>
 <!-- exit -->
 <g id="node2" class="node">
 <title>exit</title>
-<polygon fill="none" stroke="black" points="90.96,-38.5 52.46,-38.5 52.46,0 90.96,0 90.96,-38.5"/>
-<polyline fill="none" stroke="black" points="64.46,-38.5 52.46,-26.5"/>
-<polyline fill="none" stroke="black" points="52.46,-12 64.46,0"/>
-<polyline fill="none" stroke="black" points="78.96,0 90.96,-12"/>
-<polyline fill="none" stroke="black" points="90.96,-26.5 78.96,-38.5"/>
-<text xml:space="preserve" text-anchor="middle" x="71.71" y="-14.2" font-family="Times,serif" font-size="14.00">Exit</text>
+<polygon fill="none" stroke="#357f9e" points="666.18,-36.25 629.93,-36.25 629.93,0 666.18,0 666.18,-36.25"/>
+<polyline fill="none" stroke="#357f9e" points="641.93,-36.25 629.93,-24.25"/>
+<polyline fill="none" stroke="#357f9e" points="629.93,-12 641.93,0"/>
+<polyline fill="none" stroke="#357f9e" points="654.18,0 666.18,-12"/>
+<polyline fill="none" stroke="#357f9e" points="666.18,-24.25 654.18,-36.25"/>
+<text xml:space="preserve" text-anchor="middle" x="648.05" y="-13.1" font-family="Helvetica,sans-Serif" font-size="12.00" fill="#1a1a1a">Exit</text>
 </g>
 <!-- approve -->
 <g id="node4" class="node">
 <title>approve</title>
-<polygon fill="none" stroke="black" points="143.41,-255 107.56,-273 35.85,-273 0,-255 35.85,-237 107.56,-237 143.41,-255"/>
-<text xml:space="preserve" text-anchor="middle" x="71.71" y="-249.95" font-family="Times,serif" font-size="14.00">Approve Plan</text>
+<polygon fill="none" stroke="#357f9e" points="353.68,-18.12 322.33,-36.12 259.62,-36.12 228.27,-18.13 259.62,-0.13 322.33,-0.12 353.68,-18.12"/>
+<text xml:space="preserve" text-anchor="middle" x="290.98" y="-13.1" font-family="Helvetica,sans-Serif" font-size="12.00" fill="#1a1a1a">Approve Plan</text>
 </g>
 <!-- plan&#45;&gt;approve -->
 <g id="edge2" class="edge">
 <title>plan&#45;&gt;approve</title>
-<path fill="none" stroke="black" d="M70.51,-325.06C70.18,-319.46 69.87,-313.22 69.71,-307.5 69.5,-300.17 69.5,-298.33 69.71,-291 69.76,-288.94 69.84,-286.82 69.93,-284.69"/>
-<polygon fill="black" stroke="black" points="73.42,-285.12 70.44,-274.95 66.43,-284.76 73.42,-285.12"/>
+<path fill="none" stroke="#666666" d="M161.72,-18.12C176.76,-18.12 196.47,-18.12 215.91,-18.12"/>
+<polygon fill="#666666" stroke="#666666" points="215.77,-21.63 225.77,-18.13 215.77,-14.63 215.77,-21.63"/>
 </g>
 <!-- approve&#45;&gt;plan -->
 <g id="edge4" class="edge">
 <title>approve&#45;&gt;plan</title>
-<path fill="none" stroke="black" d="M71.71,-273.35C71.71,-285.06 71.71,-300.79 71.71,-314.28"/>
-<polygon fill="black" stroke="black" points="68.21,-313.9 71.71,-323.9 75.21,-313.9 68.21,-313.9"/>
-<text xml:space="preserve" text-anchor="middle" x="100.96" y="-294.2" font-family="Times,serif" font-size="14.00">[R] Revise</text>
+<path fill="none" stroke="#666666" d="M247.15,-6.91C226.65,-3 201.77,-0.36 179.52,-3.88 177.32,-4.22 175.08,-4.66 172.83,-5.17"/>
+<polygon fill="#666666" stroke="#666666" points="171.93,-1.79 163.18,-7.77 173.75,-8.55 171.93,-1.79"/>
+<text xml:space="preserve" text-anchor="middle" x="194.9" y="-5.62" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#666666">Revise</text>
 </g>
 <!-- implement -->
-<g id="node5" class="node coding">
+<g id="node5" class="node">
 <title>implement</title>
-<ellipse fill="none" stroke="black" cx="71.71" cy="-166.5" rx="51.86" ry="18"/>
-<text xml:space="preserve" text-anchor="middle" x="71.71" y="-161.45" font-family="Times,serif" font-size="14.00">Implement</text>
+<path fill="none" stroke="#357f9e" d="M485.18,-36.12C485.18,-36.12 437.68,-36.12 437.68,-36.12 431.68,-36.12 425.68,-30.12 425.68,-24.12 425.68,-24.12 425.68,-12.12 425.68,-12.12 425.68,-6.12 431.68,-0.12 437.68,-0.12 437.68,-0.12 485.18,-0.12 485.18,-0.12 491.18,-0.12 497.18,-6.12 497.18,-12.12 497.18,-12.12 497.18,-24.13 497.18,-24.13 497.18,-30.12 491.18,-36.12 485.18,-36.12"/>
+<text xml:space="preserve" text-anchor="middle" x="461.43" y="-13.1" font-family="Helvetica,sans-Serif" font-size="12.00" fill="#1a1a1a">Implement</text>
 </g>
 <!-- approve&#45;&gt;implement -->
 <g id="edge3" class="edge">
 <title>approve&#45;&gt;implement</title>
-<path fill="none" stroke="black" d="M71.71,-236.91C71.71,-225.26 71.71,-209.55 71.71,-196.02"/>
-<polygon fill="black" stroke="black" points="75.21,-196.36 71.71,-186.36 68.21,-196.36 75.21,-196.36"/>
-<text xml:space="preserve" text-anchor="middle" x="106.21" y="-205.7" font-family="Times,serif" font-size="14.00">[A] Approve</text>
+<path fill="none" stroke="#666666" d="M354.22,-18.12C374,-18.12 395.51,-18.12 413.97,-18.12"/>
+<polygon fill="#666666" stroke="#666666" points="413.81,-21.63 423.81,-18.13 413.81,-14.63 413.81,-21.63"/>
+<text xml:space="preserve" text-anchor="middle" x="389.68" y="-19.88" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#666666">Approve</text>
 </g>
 <!-- simplify -->
-<g id="node6" class="node coding">
+<g id="node6" class="node">
 <title>simplify</title>
-<ellipse fill="none" stroke="black" cx="71.71" cy="-93.5" rx="43.67" ry="18"/>
-<text xml:space="preserve" text-anchor="middle" x="71.71" y="-88.45" font-family="Times,serif" font-size="14.00">Simplify</text>
+<path fill="none" stroke="#357f9e" d="M580.93,-36.12C580.93,-36.12 546.18,-36.12 546.18,-36.12 540.18,-36.12 534.18,-30.12 534.18,-24.12 534.18,-24.12 534.18,-12.12 534.18,-12.12 534.18,-6.12 540.18,-0.12 546.18,-0.12 546.18,-0.12 580.93,-0.12 580.93,-0.12 586.93,-0.12 592.93,-6.12 592.93,-12.12 592.93,-12.12 592.93,-24.13 592.93,-24.13 592.93,-30.12 586.93,-36.12 580.93,-36.12"/>
+<text xml:space="preserve" text-anchor="middle" x="563.55" y="-13.1" font-family="Helvetica,sans-Serif" font-size="12.00" fill="#1a1a1a">Simplify</text>
 </g>
 <!-- implement&#45;&gt;simplify -->
 <g id="edge5" class="edge">
 <title>implement&#45;&gt;simplify</title>
-<path fill="none" stroke="black" d="M71.71,-148.31C71.71,-140.73 71.71,-131.6 71.71,-123.04"/>
-<polygon fill="black" stroke="black" points="75.21,-123.04 71.71,-113.04 68.21,-123.04 75.21,-123.04"/>
+<path fill="none" stroke="#666666" d="M497.45,-18.12C505.5,-18.12 514.12,-18.12 522.37,-18.12"/>
+<polygon fill="#666666" stroke="#666666" points="522.17,-21.63 532.17,-18.13 522.17,-14.63 522.17,-21.63"/>
 </g>
 <!-- simplify&#45;&gt;exit -->
 <g id="edge6" class="edge">
 <title>simplify&#45;&gt;exit</title>
-<path fill="none" stroke="black" d="M71.71,-75.01C71.71,-67.57 71.71,-58.69 71.71,-50.25"/>
-<polygon fill="black" stroke="black" points="75.21,-50.36 71.71,-40.36 68.21,-50.36 75.21,-50.36"/>
+<path fill="none" stroke="#666666" d="M593.41,-18.12C601.43,-18.12 610.14,-18.12 618.17,-18.12"/>
+<polygon fill="#666666" stroke="#666666" points="618.13,-21.63 628.13,-18.13 618.13,-14.63 618.13,-21.63"/>
 </g>
 </g>
 </svg>