111 lines
6.1 KiB
XML
111 lines
6.1 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 640" role="img" aria-label="Architektura klasycznego CMS z bazą danych: aplikacja CMS z publicznym panelem admina działa non stop, obok baza danych i wolumen mediów; czytelnik dostaje strony renderowane na żądanie">
|
|
<defs>
|
|
<marker id="arrB" 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="#00004a"/>
|
|
</marker>
|
|
<filter id="softB" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feDropShadow dx="0" dy="2" stdDeviation="5" flood-color="#00004a" flood-opacity="0.10"/>
|
|
</filter>
|
|
<style>
|
|
.t { font-family: Inter, "Segoe UI", Arial, sans-serif; }
|
|
.box { fill: #ffffff; stroke: #00004a; stroke-width: 1.5; }
|
|
.sub { fill: #f5f5f5; stroke: #e2e5ee; stroke-width: 1; }
|
|
.ttl { font-weight: 700; font-size: 15.5px; fill: #00004a; letter-spacing: .04em; }
|
|
.cap { font-size: 12.5px; fill: #46536a; }
|
|
.lbl { font-size: 12px; fill: #46536a; paint-order: stroke; stroke: #ffffff; stroke-width: 4; }
|
|
.chipbg { fill: #e9ebf3; }
|
|
.chip { font-size: 11.5px; font-weight: 700; fill: #00004a; letter-spacing: .06em; }
|
|
.flow { stroke: #00004a; stroke-width: 1.8; fill: none; marker-end: url(#arrB); }
|
|
.pill { fill: #f5f5f5; stroke: #e2e5ee; }
|
|
.pilltxt { font-size: 12.5px; fill: #101228; }
|
|
</style>
|
|
</defs>
|
|
|
|
<!-- machine boundary (mirrors the static-demo diagram 1:1) -->
|
|
<rect x="340" y="40" width="830" height="570" rx="18" fill="#f8f9fc" stroke="#e2e5ee" stroke-width="1.5"/>
|
|
<text class="t" x="366" y="76" font-size="13" font-weight="700" fill="#00004a" letter-spacing=".18em">MASZYNA · CMS Z BAZĄ DANYCH</text>
|
|
<text class="t cap" x="366" y="96">np. WordPress, Strapi, Drupal — wspólny schemat tej klasy rozwiązań</text>
|
|
|
|
<!-- actor: redaktor -->
|
|
<g filter="url(#softB)">
|
|
<rect class="box" x="52" y="120" width="220" height="120" rx="16"/>
|
|
</g>
|
|
<circle cx="88" cy="156" r="11" fill="none" stroke="#00004a" stroke-width="1.8"/>
|
|
<path d="M72 186 q16 -18 32 0" fill="none" stroke="#00004a" stroke-width="1.8"/>
|
|
<text class="t ttl" x="116" y="162">Redaktor</text>
|
|
<text class="t cap" x="70" y="212">panel admina w przeglądarce</text>
|
|
<text class="t cap" x="70" y="228">logowanie do aplikacji</text>
|
|
|
|
<!-- actor: czytelnik -->
|
|
<g filter="url(#softB)">
|
|
<rect class="box" x="52" y="400" width="220" height="120" rx="16"/>
|
|
</g>
|
|
<circle cx="88" cy="436" r="11" fill="none" stroke="#00004a" stroke-width="1.8"/>
|
|
<path d="M72 466 q16 -18 32 0" fill="none" stroke="#00004a" stroke-width="1.8"/>
|
|
<text class="t ttl" x="116" y="442">Czytelnik</text>
|
|
<text class="t cap" x="70" y="492">publiczna strona portalu</text>
|
|
<text class="t cap" x="70" y="508">HTML składany na żądanie</text>
|
|
|
|
<!-- CMS application (tall box, always running) -->
|
|
<g filter="url(#softB)">
|
|
<rect class="box" x="400" y="120" width="320" height="400" rx="16"/>
|
|
</g>
|
|
<text class="t ttl" x="424" y="152">APLIKACJA CMS</text>
|
|
<rect class="chipbg" x="590" y="136" width="106" height="22" rx="11"/>
|
|
<text class="t chip" x="643" y="151" text-anchor="middle">NON STOP</text>
|
|
<rect class="sub" x="420" y="176" width="280" height="88" rx="12"/>
|
|
<text class="t" x="436" y="202" font-size="13.5" font-weight="700" fill="#101228">panel admina</text>
|
|
<text class="t cap" x="436" y="224">publiczny adres + logowanie</text>
|
|
<text class="t cap" x="436" y="242">z internetu</text>
|
|
<rect class="sub" x="420" y="278" width="280" height="88" rx="12"/>
|
|
<text class="t" x="436" y="304" font-size="13.5" font-weight="700" fill="#101228">renderowanie stron</text>
|
|
<text class="t cap" x="436" y="326">każde wejście czytelnika =</text>
|
|
<text class="t cap" x="436" y="344">praca aplikacji i bazy</text>
|
|
<rect class="sub" x="420" y="380" width="280" height="88" rx="12"/>
|
|
<text class="t" x="436" y="406" font-size="13.5" font-weight="700" fill="#101228">pluginy / rozszerzenia</text>
|
|
<text class="t cap" x="436" y="428">własny cykl aktualizacji</text>
|
|
<text class="t cap" x="436" y="446">i podatności</text>
|
|
|
|
<!-- database -->
|
|
<g filter="url(#softB)">
|
|
<rect class="box" x="790" y="120" width="340" height="185" rx="16"/>
|
|
</g>
|
|
<text class="t ttl" x="814" y="152">BAZA DANYCH</text>
|
|
<rect class="chipbg" x="972" y="136" width="106" height="22" rx="11"/>
|
|
<text class="t chip" x="1025" y="151" text-anchor="middle">NON STOP</text>
|
|
<text class="t cap" x="814" y="188">treść + konta użytkowników</text>
|
|
<text class="t cap" x="814" y="212">wymaga backupów i testów odtwarzania</text>
|
|
<text class="t cap" x="814" y="236">migracje schematu przy aktualizacjach</text>
|
|
<text class="t cap" x="814" y="266">historia zmian: zależnie od produktu,</text>
|
|
<text class="t cap" x="814" y="284">bywa funkcją płatną</text>
|
|
|
|
<!-- media volume -->
|
|
<g filter="url(#softB)">
|
|
<rect class="sub" x="790" y="400" width="340" height="120" rx="16"/>
|
|
</g>
|
|
<text class="t ttl" x="814" y="432">media/</text>
|
|
<rect class="chipbg" x="896" y="416" width="82" height="22" rx="11"/>
|
|
<text class="t chip" x="937" y="431" text-anchor="middle">WOLUMEN</text>
|
|
<text class="t cap" x="814" y="462">obrazy i pliki poza bazą</text>
|
|
<text class="t cap" x="814" y="480">osobny backup</text>
|
|
|
|
<!-- flows -->
|
|
<path class="flow" d="M272 180 H396"/>
|
|
<text class="t lbl" x="334" y="170" text-anchor="middle">logowanie do panelu</text>
|
|
|
|
<path class="flow" d="M400 460 H276"/>
|
|
<text class="t lbl" x="338" y="450" text-anchor="middle">HTML na żądanie</text>
|
|
|
|
<path class="flow" d="M720 212 H786"/>
|
|
<text class="t lbl" x="753" y="202" text-anchor="middle">SQL</text>
|
|
|
|
<path class="flow" d="M720 440 H786"/>
|
|
<text class="t lbl" x="753" y="430" text-anchor="middle">upload</text>
|
|
|
|
<!-- summary pills -->
|
|
<rect class="pill" x="380" y="552" width="360" height="36" rx="18"/>
|
|
<text class="t pilltxt" x="560" y="575" text-anchor="middle">2 procesy działają bez przerwy, także nocą</text>
|
|
<rect class="pill" x="770" y="552" width="360" height="36" rx="18"/>
|
|
<text class="t pilltxt" x="950" y="575" text-anchor="middle">aktualizacje bezpieczeństwa = stały obowiązek</text>
|
|
</svg>
|