feat(landing): hand-drawn pipeline SVG diagram; v0.1.12

2026-08-16 19:11:17 +04:00
parent 6f609eca4b
commit a0e73b0b7a
4 changed files with 138 additions and 4 deletions
@@ -0,0 +1,71 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 300" width="100%" role="img" aria-label="Схема пайплайна IoT">
+  <defs>
+    <style>
+      text { font-family: system-ui, "Segoe UI", Roboto, sans-serif; }
+      .mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
+    </style>
+    <marker id="arr" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
+      <path d="M0,0 L8,3 L0,6 Z" fill="#6b7280"/>
+    </marker>
+  </defs>
+
+  <!-- Подложка «ПЛАТФОРМА» -->
+  <text x="365" y="50" font-size="12" fill="#6b7280">ПЛАТФОРМА</text>
+  <rect x="335" y="60" width="818" height="144" rx="16" fill="none"
+        stroke="#bfdbfe" stroke-width="1.5" stroke-dasharray="6 4"/>
+
+  <!-- Стрелки -->
+  <line x1="211" y1="132" x2="353" y2="132" stroke="#6b7280" stroke-width="2" marker-end="url(#arr)"/>
+  <line x1="551" y1="132" x2="643" y2="132" stroke="#6b7280" stroke-width="2" marker-end="url(#arr)"/>
+  <line x1="841" y1="132" x2="933" y2="132" stroke="#6b7280" stroke-width="2" marker-end="url(#arr)"/>
+  <line x1="1131" y1="132" x2="1223" y2="132" stroke="#6b7280" stroke-width="2" marker-end="url(#arr)"/>
+
+  <!-- Ярлыки над стрелками -->
+  <rect x="232" y="100" width="104" height="22" rx="6" fill="#ffffff" stroke="#d1d5db"/>
+  <text x="284" y="115" font-size="12" fill="#1a1a1a" text-anchor="middle">MQTT over wss</text>
+
+  <rect x="574" y="100" width="50" height="22" rx="6" fill="#ffffff" stroke="#d1d5db"/>
+  <text x="599" y="115" font-size="12" fill="#1a1a1a" text-anchor="middle">бридж</text>
+
+  <rect x="847" y="100" width="84" height="22" rx="6" fill="#ffffff" stroke="#d1d5db"/>
+  <text x="889" y="115" font-size="12" fill="#1a1a1a" text-anchor="middle">потребитель</text>
+
+  <rect x="1157" y="100" width="43" height="22" rx="6" fill="#ffffff" stroke="#d1d5db"/>
+  <text x="1179" y="115" font-size="12" fill="#1a1a1a" text-anchor="middle">REST</text>
+
+  <!-- Подписи под стрелками -->
+  <text x="284" y="160" font-size="11" class="mono" fill="#6b7280" text-anchor="middle">{namespace}/</text>
+  <text x="284" y="176" font-size="11" class="mono" fill="#6b7280" text-anchor="middle">telemetry/{device_id}</text>
+
+  <text x="599" y="164" font-size="11" fill="#6b7280" text-anchor="middle">кладёт показания</text>
+  <text x="889" y="164" font-size="11" fill="#6b7280" text-anchor="middle">пишет в базу</text>
+  <text x="1179" y="164" font-size="11" fill="#6b7280" text-anchor="middle">чтение истории</text>
+
+  <!-- Блок 1: Устройство -->
+  <rect x="41" y="84" width="168" height="96" rx="12" fill="#ffffff" stroke="#d1d5db"/>
+  <text x="125" y="128" font-size="15" font-weight="600" fill="#1a1a1a" text-anchor="middle">Устройство</text>
+  <text x="125" y="152" font-size="11" class="mono" fill="#6b7280" text-anchor="middle">датчик · MQTT-клиент</text>
+
+  <!-- Блок 2: EMQX -->
+  <rect x="359" y="84" width="190" height="96" rx="12" fill="#eff6ff" stroke="#bfdbfe"/>
+  <text x="454" y="128" font-size="15" font-weight="600" fill="#2563eb" text-anchor="middle">EMQX</text>
+  <text x="454" y="152" font-size="11" class="mono" fill="#6b7280" text-anchor="middle">брокер · wss /mqtt</text>
+
+  <!-- Блок 3: Очередь -->
+  <rect x="649" y="84" width="190" height="96" rx="12" fill="#eff6ff" stroke="#bfdbfe"/>
+  <text x="744" y="128" font-size="15" font-weight="600" fill="#2563eb" text-anchor="middle">Очередь</text>
+  <text x="744" y="152" font-size="11" class="mono" fill="#6b7280" text-anchor="middle">iot-telemetry</text>
+
+  <!-- Блок 4: PostgreSQL -->
+  <rect x="939" y="84" width="190" height="96" rx="12" fill="#eff6ff" stroke="#bfdbfe"/>
+  <text x="1034" y="128" font-size="15" font-weight="600" fill="#2563eb" text-anchor="middle">PostgreSQL</text>
+  <text x="1034" y="152" font-size="11" class="mono" fill="#6b7280" text-anchor="middle">база на namespace</text>
+
+  <!-- Блок 5: API / Консоль -->
+  <rect x="1229" y="84" width="170" height="96" rx="12" fill="#ffffff" stroke="#d1d5db"/>
+  <text x="1314" y="128" font-size="15" font-weight="600" fill="#1a1a1a" text-anchor="middle">API / Консоль</text>
+  <text x="1314" y="152" font-size="11" class="mono" fill="#6b7280" text-anchor="middle">чтение истории</text>
+
+  <!-- Подвал -->
+  <text x="720" y="252" font-size="12" fill="#6b7280" text-anchor="middle">бридж и потребитель — части сервиса iot-service</text>
+</svg>