diff --git a/notes/pics/consumer-group.png b/notes/pics/consumer-group.png
index e3dafe24..061d806a 100644
Binary files a/notes/pics/consumer-group.png and b/notes/pics/consumer-group.png differ
diff --git a/tools/diagram/src/consumer-group.svg b/tools/diagram/src/consumer-group.svg
index 712f6a35..f8aa6f77 100644
--- a/tools/diagram/src/consumer-group.svg
+++ b/tools/diagram/src/consumer-group.svg
@@ -1,31 +1,31 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="620" height="330" viewBox="0 0 620 330">
   <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"/>
@@ -35,85 +35,85 @@
   <text x="215" y="64" class="b">Topic</text>
   <text x="310" y="78" class="c b">分区 0</text>
   <rect x="225" y="86" width="170" height="24" rx="12" fill="#FFFFFF" stroke="#BBBBBB" stroke-width="1.2"/>
-  <rect x="235" y="90" width="26.8" height="16" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
+  <rect x="235" y="90" width="26.8" height="16" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
   <text x="248.4" y="102" class="c sub"></text>
-  <rect x="265.8" y="90" width="26.8" height="16" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
+  <rect x="265.8" y="90" width="26.8" height="16" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
   <text x="279.2" y="102" class="c sub"></text>
-  <rect x="296.6" y="90" width="26.8" height="16" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
+  <rect x="296.6" y="90" width="26.8" height="16" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
   <text x="310" y="102" class="c sub"></text>
-  <rect x="327.4" y="90" width="26.8" height="16" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
+  <rect x="327.4" y="90" width="26.8" height="16" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
   <text x="340.8" y="102" class="c sub"></text>
-  <rect x="358.2" y="90" width="26.8" height="16" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
+  <rect x="358.2" y="90" width="26.8" height="16" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
   <text x="371.6" y="102" class="c sub"></text>
   <text x="310" y="138" class="c b">分区 1</text>
   <rect x="225" y="146" width="170" height="24" rx="12" fill="#FFFFFF" stroke="#BBBBBB" stroke-width="1.2"/>
-  <rect x="235" y="150" width="26.8" height="16" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
+  <rect x="235" y="150" width="26.8" height="16" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
   <text x="248.4" y="162" class="c sub"></text>
-  <rect x="265.8" y="150" width="26.8" height="16" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
+  <rect x="265.8" y="150" width="26.8" height="16" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
   <text x="279.2" y="162" class="c sub"></text>
-  <rect x="296.6" y="150" width="26.8" height="16" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
+  <rect x="296.6" y="150" width="26.8" height="16" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
   <text x="310" y="162" class="c sub"></text>
-  <rect x="327.4" y="150" width="26.8" height="16" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
+  <rect x="327.4" y="150" width="26.8" height="16" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
   <text x="340.8" y="162" class="c sub"></text>
-  <rect x="358.2" y="150" width="26.8" height="16" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
+  <rect x="358.2" y="150" width="26.8" height="16" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
   <text x="371.6" y="162" class="c sub"></text>
   <text x="310" y="198" class="c b">分区 2</text>
   <rect x="225" y="206" width="170" height="24" rx="12" fill="#FFFFFF" stroke="#BBBBBB" stroke-width="1.2"/>
-  <rect x="235" y="210" width="26.8" height="16" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
+  <rect x="235" y="210" width="26.8" height="16" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
   <text x="248.4" y="222" class="c sub"></text>
-  <rect x="265.8" y="210" width="26.8" height="16" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
+  <rect x="265.8" y="210" width="26.8" height="16" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
   <text x="279.2" y="222" class="c sub"></text>
-  <rect x="296.6" y="210" width="26.8" height="16" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
+  <rect x="296.6" y="210" width="26.8" height="16" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
   <text x="310" y="222" class="c sub"></text>
-  <rect x="327.4" y="210" width="26.8" height="16" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
+  <rect x="327.4" y="210" width="26.8" height="16" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
   <text x="340.8" y="222" class="c sub"></text>
-  <rect x="358.2" y="210" width="26.8" height="16" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
+  <rect x="358.2" y="210" width="26.8" height="16" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
   <text x="371.6" y="222" class="c sub"></text>
   <rect x="20" y="46" width="160" height="214" rx="8" class="frame"/>
   <text x="30" y="64" class="b">消费者组 A</text>
   <rect x="440" y="46" width="160" height="214" rx="8" class="frame"/>
   <text x="450" y="64" class="b">消费者组 B</text>
-  <rect x="72" y="84" width="36" height="13" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
-  <circle cx="79" cy="90.5" r="2" fill="#7FB4D0"/>
-  <line x1="86" y1="90.5" x2="101" y2="90.5" stroke="#7FB4D0" stroke-width="1"/>
-  <rect x="72" y="100" width="36" height="13" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
-  <circle cx="79" cy="106.5" r="2" fill="#7FB4D0"/>
-  <line x1="86" y1="106.5" x2="101" y2="106.5" stroke="#7FB4D0" stroke-width="1"/>
+  <rect x="72" y="84" width="36" height="13" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
+  <circle cx="79" cy="90.5" r="2" fill="#7FB2D6"/>
+  <line x1="86" y1="90.5" x2="101" y2="90.5" stroke="#7FB2D6" stroke-width="1"/>
+  <rect x="72" y="100" width="36" height="13" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
+  <circle cx="79" cy="106.5" r="2" fill="#7FB2D6"/>
+  <line x1="86" y1="106.5" x2="101" y2="106.5" stroke="#7FB2D6" stroke-width="1"/>
   <text x="60" y="102" class="e b">A1</text>
-  <rect x="72" y="184" width="36" height="13" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
-  <circle cx="79" cy="190.5" r="2" fill="#7FB4D0"/>
-  <line x1="86" y1="190.5" x2="101" y2="190.5" stroke="#7FB4D0" stroke-width="1"/>
-  <rect x="72" y="200" width="36" height="13" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
-  <circle cx="79" cy="206.5" r="2" fill="#7FB4D0"/>
-  <line x1="86" y1="206.5" x2="101" y2="206.5" stroke="#7FB4D0" stroke-width="1"/>
+  <rect x="72" y="184" width="36" height="13" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
+  <circle cx="79" cy="190.5" r="2" fill="#7FB2D6"/>
+  <line x1="86" y1="190.5" x2="101" y2="190.5" stroke="#7FB2D6" stroke-width="1"/>
+  <rect x="72" y="200" width="36" height="13" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
+  <circle cx="79" cy="206.5" r="2" fill="#7FB2D6"/>
+  <line x1="86" y1="206.5" x2="101" y2="206.5" stroke="#7FB2D6" stroke-width="1"/>
   <text x="60" y="202" class="e b">A2</text>
-  <rect x="482" y="66" width="36" height="13" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
-  <circle cx="489" cy="72.5" r="2" fill="#7FB4D0"/>
-  <line x1="496" y1="72.5" x2="511" y2="72.5" stroke="#7FB4D0" stroke-width="1"/>
-  <rect x="482" y="82" width="36" height="13" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
-  <circle cx="489" cy="88.5" r="2" fill="#7FB4D0"/>
-  <line x1="496" y1="88.5" x2="511" y2="88.5" stroke="#7FB4D0" stroke-width="1"/>
+  <rect x="482" y="66" width="36" height="13" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
+  <circle cx="489" cy="72.5" r="2" fill="#7FB2D6"/>
+  <line x1="496" y1="72.5" x2="511" y2="72.5" stroke="#7FB2D6" stroke-width="1"/>
+  <rect x="482" y="82" width="36" height="13" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
+  <circle cx="489" cy="88.5" r="2" fill="#7FB2D6"/>
+  <line x1="496" y1="88.5" x2="511" y2="88.5" stroke="#7FB2D6" stroke-width="1"/>
   <text x="526" y="84" class="b">B1</text>
-  <rect x="482" y="114" width="36" height="13" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
-  <circle cx="489" cy="120.5" r="2" fill="#7FB4D0"/>
-  <line x1="496" y1="120.5" x2="511" y2="120.5" stroke="#7FB4D0" stroke-width="1"/>
-  <rect x="482" y="130" width="36" height="13" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
-  <circle cx="489" cy="136.5" r="2" fill="#7FB4D0"/>
-  <line x1="496" y1="136.5" x2="511" y2="136.5" stroke="#7FB4D0" stroke-width="1"/>
+  <rect x="482" y="114" width="36" height="13" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
+  <circle cx="489" cy="120.5" r="2" fill="#7FB2D6"/>
+  <line x1="496" y1="120.5" x2="511" y2="120.5" stroke="#7FB2D6" stroke-width="1"/>
+  <rect x="482" y="130" width="36" height="13" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
+  <circle cx="489" cy="136.5" r="2" fill="#7FB2D6"/>
+  <line x1="496" y1="136.5" x2="511" y2="136.5" stroke="#7FB2D6" stroke-width="1"/>
   <text x="526" y="132" class="b">B2</text>
-  <rect x="482" y="162" width="36" height="13" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
-  <circle cx="489" cy="168.5" r="2" fill="#7FB4D0"/>
-  <line x1="496" y1="168.5" x2="511" y2="168.5" stroke="#7FB4D0" stroke-width="1"/>
-  <rect x="482" y="178" width="36" height="13" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
-  <circle cx="489" cy="184.5" r="2" fill="#7FB4D0"/>
-  <line x1="496" y1="184.5" x2="511" y2="184.5" stroke="#7FB4D0" stroke-width="1"/>
+  <rect x="482" y="162" width="36" height="13" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
+  <circle cx="489" cy="168.5" r="2" fill="#7FB2D6"/>
+  <line x1="496" y1="168.5" x2="511" y2="168.5" stroke="#7FB2D6" stroke-width="1"/>
+  <rect x="482" y="178" width="36" height="13" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
+  <circle cx="489" cy="184.5" r="2" fill="#7FB2D6"/>
+  <line x1="496" y1="184.5" x2="511" y2="184.5" stroke="#7FB2D6" stroke-width="1"/>
   <text x="526" y="180" class="b">B3</text>
-  <rect x="482" y="210" width="36" height="13" rx="3" fill="#E6E6E6" stroke="#B5B5B5" stroke-width="1.2"/>
-  <circle cx="489" cy="216.5" r="2" fill="#B5B5B5"/>
-  <line x1="496" y1="216.5" x2="511" y2="216.5" stroke="#B5B5B5" stroke-width="1"/>
-  <rect x="482" y="226" width="36" height="13" rx="3" fill="#E6E6E6" stroke="#B5B5B5" stroke-width="1.2"/>
-  <circle cx="489" cy="232.5" r="2" fill="#B5B5B5"/>
-  <line x1="496" y1="232.5" x2="511" y2="232.5" stroke="#B5B5B5" stroke-width="1"/>
+  <rect x="482" y="210" width="36" height="13" rx="3" fill="#EAE9E7" stroke="#BFBEBA" stroke-width="1.2"/>
+  <circle cx="489" cy="216.5" r="2" fill="#BFBEBA"/>
+  <line x1="496" y1="216.5" x2="511" y2="216.5" stroke="#BFBEBA" stroke-width="1"/>
+  <rect x="482" y="226" width="36" height="13" rx="3" fill="#EAE9E7" stroke="#BFBEBA" stroke-width="1.2"/>
+  <circle cx="489" cy="232.5" r="2" fill="#BFBEBA"/>
+  <line x1="496" y1="232.5" x2="511" y2="232.5" stroke="#BFBEBA" stroke-width="1"/>
   <text x="526" y="228" class="sub">B4（空闲）</text>
   <line x1="223" y1="98" x2="112" y2="96" class="arrow "/>
   <line x1="223" y1="158" x2="112" y2="104" class="arrow "/>