Convert ASCII diagrams to inline SVG; restore hero color

docs/.vitepress/theme/custom.css

@@ -0,0 +1,3 @@
+:root {
+  --vp-home-hero-name-color: #10b981;
+}

docs/.vitepress/theme/index.ts

@@ -1,5 +1,6 @@
 import DefaultTheme from 'vitepress/theme'
 import SIP002Generator from './components/SIP002Generator.vue'
+import './custom.css'
 
 export default {
   ...DefaultTheme,

docs/doc/aead.md

@@ -51,9 +51,20 @@ AE_decrypt(key, nonce, ciphertext, tag) => message
 
 An AEAD encrypted TCP stream starts with a randomly generated salt to derive the per-session subkey, followed by any number of encrypted chunks. Each chunk has the following structure:
 
-```
-[encrypted payload length][length tag][encrypted payload][payload tag]
-```
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 40" style="display:block;margin:1em auto;width:100%;height:auto;max-width:720px" role="img" aria-label="AEAD TCP chunk: encrypted payload length, length tag, encrypted payload, payload tag">
+  <g fill="none" stroke="currentColor">
+    <rect x="10" y="5" width="700" height="30" rx="3"/>
+    <line x1="230" y1="5" x2="230" y2="35"/>
+    <line x1="330" y1="5" x2="330" y2="35"/>
+    <line x1="570" y1="5" x2="570" y2="35"/>
+  </g>
+  <g fill="currentColor" font-family="ui-monospace,SFMono-Regular,Menlo,Consolas,monospace" font-size="13" text-anchor="middle">
+    <text x="120" y="24">encrypted payload length</text>
+    <text x="280" y="24">length tag</text>
+    <text x="450" y="24">encrypted payload</text>
+    <text x="640" y="24">payload tag</text>
+  </g>
+</svg>
 
 Payload length is a 2-byte big-endian unsigned integer capped at 0x3FFF. The higher two bits are reserved and must be set to zero. Payload is therefore limited to 16*1024 - 1 bytes. 
 
@@ -64,9 +75,18 @@ The first AEAD encrypt/decrypt operation uses a counting nonce starting from 0.
 
 An AEAD encrypted UDP packet has the following structure
 
-```
-[salt][encrypted payload][tag]
-```
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 40" style="display:block;margin:1em auto;width:100%;height:auto;max-width:500px" role="img" aria-label="AEAD UDP packet: salt, encrypted payload, tag">
+  <g fill="none" stroke="currentColor">
+    <rect x="10" y="5" width="480" height="30" rx="3"/>
+    <line x1="110" y1="5" x2="110" y2="35"/>
+    <line x1="390" y1="5" x2="390" y2="35"/>
+  </g>
+  <g fill="currentColor" font-family="ui-monospace,SFMono-Regular,Menlo,Consolas,monospace" font-size="13" text-anchor="middle">
+    <text x="60" y="24">salt</text>
+    <text x="250" y="24">encrypted payload</text>
+    <text x="440" y="24">tag</text>
+  </g>
+</svg>
 
 The salt is used to derive the per-session subkey and must be generated randomly to ensure uniqueness. Each UDP packet is encrypted/decrypted independently, using the derived subkey and a nonce with all zero bytes.
 

docs/doc/sip003.md

@@ -4,17 +4,33 @@
 
 The plugin of shadowsocks is very similar to the [Pluggable Transport](https://gitweb.torproject.org/torspec.git/tree/pt-spec.txt) plugins from Tor project. Unlike the SOCKS5 proxy design in PT, every SIP003 plugin works as a tunnel (or called local port forwarding). This design aims to avoid per-connection arguments in PT, leading to much easier implementation.
 
-```
-+------------+                    +---------------------------+
-|  SS Client +-- Local Loopback --+  Plugin Client (Tunnel)   +--+
-+------------+                    +---------------------------+  |
-                                                                 |
-            Public Internet (Obfuscated/Transformed traffic) ==> |
-                                                                 |
-+------------+                    +---------------------------+  |
-|  SS Server +-- Local Loopback --+  Plugin Server (Tunnel)   +--+
-+------------+                    +---------------------------+
-```
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 280" style="display:block;margin:1em auto;width:100%;height:auto;max-width:720px" role="img" aria-label="SIP003 plugin architecture: SS client and SS server each connect via local loopback to a plugin client/server tunnel, with obfuscated public internet traffic between the two plugin endpoints">
+  <defs>
+    <marker id="sip003-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0,0 L10,5 L0,10 z" fill="currentColor"/>
+    </marker>
+  </defs>
+  <g fill="none" stroke="currentColor">
+    <rect x="20" y="20" width="140" height="50" rx="4"/>
+    <rect x="290" y="20" width="260" height="50" rx="4"/>
+    <rect x="20" y="210" width="140" height="50" rx="4"/>
+    <rect x="290" y="210" width="260" height="50" rx="4"/>
+    <line x1="160" y1="45" x2="290" y2="45"/>
+    <line x1="160" y1="235" x2="290" y2="235"/>
+    <path d="M550 45 L620 45 L620 235 L550 235" stroke-dasharray="0"/>
+    <line x1="620" y1="140" x2="690" y2="140" marker-end="url(#sip003-arr)"/>
+  </g>
+  <g fill="currentColor" font-family="ui-monospace,SFMono-Regular,Menlo,Consolas,monospace" font-size="13" text-anchor="middle">
+    <text x="90" y="50">SS Client</text>
+    <text x="420" y="50">Plugin Client (Tunnel)</text>
+    <text x="90" y="240">SS Server</text>
+    <text x="420" y="240">Plugin Server (Tunnel)</text>
+    <text x="225" y="38" font-size="11">Local Loopback</text>
+    <text x="225" y="228" font-size="11">Local Loopback</text>
+    <text x="360" y="135" font-size="12">Public Internet</text>
+    <text x="360" y="152" font-size="11" opacity="0.75">(Obfuscated / Transformed traffic)</text>
+  </g>
+</svg>
 
 ## Life cycle of a plugin