docs: больше наглядности (схемы + скриншот)

Made-with: Cursor
This commit is contained in:
Андрей Бобырев
2026-04-26 17:06:12 +03:00
parent bf504f4b28
commit ee031b09dd
5 changed files with 131 additions and 0 deletions

69
docs/tunnel-diagram.svg Normal file
View File

@@ -0,0 +1,69 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="520" viewBox="0 0 1200 520">
<defs>
<style>
.bg{fill:#0d1117}
.card{fill:#161b22;stroke:#30363d;stroke-width:2}
.txt{fill:#e6edf3;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
.mut{fill:#8b949e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
.ttl{font-size:26px;font-weight:800}
.h{font-size:18px;font-weight:700}
.p{font-size:15px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace}
.accent{fill:#1f6feb}
.ok{fill:#3fb950}
.arrow{stroke:#1f6feb;stroke-width:4;fill:none;marker-end:url(#m)}
.arrow2{stroke:#3fb950;stroke-width:4;fill:none;marker-end:url(#m2)}
</style>
<marker id="m" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#1f6feb"/>
</marker>
<marker id="m2" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#3fb950"/>
</marker>
</defs>
<rect class="bg" x="0" y="0" width="1200" height="520"/>
<text class="txt ttl" x="40" y="60">Схема работы (серый IP → доступ через VPS)</text>
<text class="mut p" x="40" y="92">Роутер сам подключается к VPS по WireGuard, и VPS видит роутер как «локальный» IP 10.99.0.X.</text>
<!-- PC -->
<rect class="card" x="40" y="150" rx="16" ry="16" width="320" height="260"/>
<text class="txt h" x="70" y="195">Ваш ПК / телефон</text>
<text class="mut p" x="70" y="225">Открываете панель:</text>
<text class="txt p mono" x="70" y="255">http://10.99.0.X:2001</text>
<text class="mut p" x="70" y="290">(если туннель включён)</text>
<text class="mut p" x="70" y="335">Или дома в LAN:</text>
<text class="txt p mono" x="70" y="365">http://192.168.88.1:2001</text>
<!-- VPS -->
<rect class="card" x="440" y="150" rx="16" ry="16" width="320" height="260"/>
<text class="txt h" x="470" y="195">VPS (белый IP)</text>
<text class="mut p" x="470" y="225">WireGuard сервер:</text>
<text class="txt p mono" x="470" y="255">wg0 10.99.0.1</text>
<text class="mut p" x="470" y="295">Порт:</text>
<text class="txt p mono" x="520" y="295">UDP 51820</text>
<text class="mut p" x="470" y="335">Проверка:</text>
<text class="txt p mono" x="470" y="365">ping 10.99.0.X</text>
<!-- Router -->
<rect class="card" x="840" y="150" rx="16" ry="16" width="320" height="260"/>
<text class="txt h" x="870" y="195">Роутер Keenetic (Entware)</text>
<text class="mut p" x="870" y="225">WireGuard клиент:</text>
<text class="txt p mono" x="870" y="255">wg0 10.99.0.X</text>
<rect x="870" y="285" rx="12" ry="12" width="260" height="44" fill="#0b1220" stroke="#30363d" stroke-width="2"/>
<circle cx="892" cy="307" r="8" class="ok"/>
<text class="txt p" x="910" y="312">keenetic_ssh-web :2001</text>
<rect x="870" y="342" rx="12" ry="12" width="260" height="44" fill="#0b1220" stroke="#30363d" stroke-width="2"/>
<circle cx="892" cy="364" r="8" class="accent"/>
<text class="txt p" x="910" y="369">SSH :22</text>
<!-- Arrows -->
<path class="arrow" d="M 360 280 C 400 280, 410 280, 440 280"/>
<path class="arrow2" d="M 760 280 C 800 280, 810 280, 840 280"/>
<text class="mut p" x="505" y="140">WireGuard туннель</text>
<text class="mut p mono" x="515" y="118">10.99.0.0/24</text>
</svg>

After

Width:  |  Height:  |  Size: 3.6 KiB