Replace textual specs with schematic diagrams
This commit is contained in:
Ruslan Bakiev
75
docs/public/diagrams/component-map.svg
Normal file
75
docs/public/diagrams/component-map.svg
Normal file
@@ -0,0 +1,75 @@
|
||||
<svg width="1400" height="920" viewBox="0 0 1400 920" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="1400" height="920" fill="#F6F7F9"/>
|
||||
<rect x="40" y="32" width="1320" height="856" rx="28" fill="white" stroke="#D9DEE7" stroke-width="2"/>
|
||||
<text x="80" y="88" fill="#111827" font-family="Arial, sans-serif" font-size="30" font-weight="700">Карта компонентов и слоев приложения</text>
|
||||
|
||||
<rect x="84" y="140" width="300" height="660" rx="24" fill="#F9FAFB" stroke="#CBD5E1" stroke-width="2"/>
|
||||
<text x="234" y="184" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="28" font-weight="700">UI и маршруты</text>
|
||||
<rect x="116" y="216" width="236" height="78" rx="16" fill="#EEF5FF" stroke="#8FB3E8" stroke-width="2"/>
|
||||
<text x="234" y="250" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">app/pages</text>
|
||||
<text x="234" y="276" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">маршруты клиентского и менеджерского контура</text>
|
||||
<rect x="116" y="324" width="236" height="78" rx="16" fill="#EEF5FF" stroke="#8FB3E8" stroke-width="2"/>
|
||||
<text x="234" y="358" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">app/components</text>
|
||||
<text x="234" y="384" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">catalog / orders / ui / bonus</text>
|
||||
<rect x="116" y="432" width="236" height="78" rx="16" fill="#EEF5FF" stroke="#8FB3E8" stroke-width="2"/>
|
||||
<text x="234" y="466" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">app/composables</text>
|
||||
<text x="234" y="492" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">presentation + client-side state</text>
|
||||
<rect x="116" y="540" width="236" height="78" rx="16" fill="#EEF5FF" stroke="#8FB3E8" stroke-width="2"/>
|
||||
<text x="234" y="574" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">middleware / plugins</text>
|
||||
<text x="234" y="600" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">auth, mini-app, sentry</text>
|
||||
|
||||
<rect x="444" y="140" width="300" height="660" rx="24" fill="#F9FAFB" stroke="#CBD5E1" stroke-width="2"/>
|
||||
<text x="594" y="184" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="28" font-weight="700">Контракт и transport</text>
|
||||
<rect x="476" y="216" width="236" height="78" rx="16" fill="#FCF5FF" stroke="#C8A6E5" stroke-width="2"/>
|
||||
<text x="594" y="250" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">graphql/operations</text>
|
||||
<text x="594" y="276" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">отдельный файл на документ</text>
|
||||
<rect x="476" y="324" width="236" height="78" rx="16" fill="#FCF5FF" stroke="#C8A6E5" stroke-width="2"/>
|
||||
<text x="594" y="358" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">generated.ts</text>
|
||||
<text x="594" y="384" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">typed documents + types</text>
|
||||
<rect x="476" y="432" width="236" height="78" rx="16" fill="#FCF5FF" stroke="#C8A6E5" stroke-width="2"/>
|
||||
<text x="594" y="466" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">Apollo client</text>
|
||||
<text x="594" y="492" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">typed query / mutation execution</text>
|
||||
<rect x="476" y="540" width="236" height="78" rx="16" fill="#FCF5FF" stroke="#C8A6E5" stroke-width="2"/>
|
||||
<text x="594" y="574" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">server/api/graphql</text>
|
||||
<text x="594" y="600" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">SSR-safe proxy to backend</text>
|
||||
|
||||
<rect x="804" y="140" width="260" height="660" rx="24" fill="#F9FAFB" stroke="#CBD5E1" stroke-width="2"/>
|
||||
<text x="934" y="184" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="28" font-weight="700">Backend logic</text>
|
||||
<rect x="836" y="216" width="196" height="78" rx="16" fill="#EFFBF5" stroke="#84D5A4" stroke-width="2"/>
|
||||
<text x="934" y="250" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">schema.graphql</text>
|
||||
<text x="934" y="276" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">контракт API</text>
|
||||
<rect x="836" y="324" width="196" height="78" rx="16" fill="#EFFBF5" stroke="#84D5A4" stroke-width="2"/>
|
||||
<text x="934" y="358" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">resolvers.js</text>
|
||||
<text x="934" y="384" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">основные сценарии</text>
|
||||
<rect x="836" y="432" width="196" height="78" rx="16" fill="#EFFBF5" stroke="#84D5A4" stroke-width="2"/>
|
||||
<text x="934" y="466" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">auth / access</text>
|
||||
<text x="934" y="492" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">токены, роли, guard logic</text>
|
||||
<rect x="836" y="540" width="196" height="78" rx="16" fill="#EFFBF5" stroke="#84D5A4" stroke-width="2"/>
|
||||
<text x="934" y="574" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">messenger layer</text>
|
||||
<text x="934" y="600" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">Telegram / MAX / mail</text>
|
||||
|
||||
<rect x="1124" y="140" width="200" height="660" rx="24" fill="#F9FAFB" stroke="#CBD5E1" stroke-width="2"/>
|
||||
<text x="1224" y="184" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="28" font-weight="700">Data</text>
|
||||
<rect x="1152" y="250" width="144" height="78" rx="16" fill="#FFF8E8" stroke="#F0C36B" stroke-width="2"/>
|
||||
<text x="1224" y="284" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">Prisma</text>
|
||||
<text x="1224" y="310" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">ORM</text>
|
||||
<rect x="1152" y="390" width="144" height="78" rx="16" fill="#FFF8E8" stroke="#F0C36B" stroke-width="2"/>
|
||||
<text x="1224" y="424" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">schema.prisma</text>
|
||||
<text x="1224" y="450" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">модель БД</text>
|
||||
<rect x="1152" y="530" width="144" height="78" rx="16" fill="#FFF8E8" stroke="#F0C36B" stroke-width="2"/>
|
||||
<text x="1224" y="564" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">PostgreSQL</text>
|
||||
<text x="1224" y="590" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">persistent data</text>
|
||||
|
||||
<line x1="384" y1="255" x2="476" y2="255" stroke="#6B7280" stroke-width="3"/>
|
||||
<polygon points="476,255 462,247 462,263" fill="#6B7280"/>
|
||||
<line x1="384" y1="471" x2="476" y2="471" stroke="#6B7280" stroke-width="3"/>
|
||||
<polygon points="476,471 462,463 462,479" fill="#6B7280"/>
|
||||
<line x1="744" y1="471" x2="836" y2="471" stroke="#6B7280" stroke-width="3"/>
|
||||
<polygon points="836,471 822,463 822,479" fill="#6B7280"/>
|
||||
<line x1="1032" y1="430" x2="1152" y2="429" stroke="#6B7280" stroke-width="3"/>
|
||||
<polygon points="1152,429 1138,421 1138,437" fill="#6B7280"/>
|
||||
<line x1="1224" y1="328" x2="1224" y2="390" stroke="#6B7280" stroke-width="3"/>
|
||||
<polygon points="1224,390 1216,376 1232,376" fill="#6B7280"/>
|
||||
<line x1="1224" y1="468" x2="1224" y2="530" stroke="#6B7280" stroke-width="3"/>
|
||||
<polygon points="1224,530 1216,516 1232,516" fill="#6B7280"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.1 KiB |
Reference in New Issue
Block a user