102 lines
6.0 KiB
XML
102 lines
6.0 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" role="img" aria-label="Architecture of a database-backed CMS: one always-on application serves both the editor's admin panel and the reader's pages, backed by a database that needs backups and a separate media volume">
|
|
<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: 19px; fill: #00004a; letter-spacing: .04em; }
|
|
.act { font-weight: 700; font-size: 18px; fill: #00004a; }
|
|
.cap { font-size: 15px; fill: #46536a; }
|
|
.sml { font-size: 14px; fill: #46536a; }
|
|
.lbl { font-size: 14px; fill: #46536a; paint-order: stroke; stroke: #f8f9fc; stroke-width: 5; }
|
|
.chipbg { fill: #e9ebf3; }
|
|
.chip { font-size: 12.5px; font-weight: 700; fill: #00004a; letter-spacing: .06em; }
|
|
.flow { stroke: #00004a; stroke-width: 1.8; fill: none; marker-end: url(#arrB); }
|
|
.name { font-size: 16px; font-weight: 700; fill: #101228; }
|
|
.pill { fill: #f5f5f5; stroke: #e2e5ee; }
|
|
.pilltxt { font-size: 14px; fill: #101228; }
|
|
</style>
|
|
</defs>
|
|
|
|
<!-- actor: editor -->
|
|
<g filter="url(#softB)"><rect class="box" x="49" y="20" width="380" height="86" rx="16"/></g>
|
|
<circle cx="80" cy="48" r="11" fill="none" stroke="#00004a" stroke-width="1.8"/>
|
|
<path d="M64 78 q16 -18 32 0" fill="none" stroke="#00004a" stroke-width="1.8"/>
|
|
<text class="t act" x="108" y="54">Editor</text>
|
|
<text class="t sml" x="108" y="80">admin panel in the browser, signs in</text>
|
|
|
|
<!-- actor: reader -->
|
|
<g filter="url(#softB)"><rect class="box" x="395" y="20" width="380" height="86" rx="16"/></g>
|
|
<circle cx="426" cy="48" r="11" fill="none" stroke="#00004a" stroke-width="1.8"/>
|
|
<path d="M410 78 q16 -18 32 0" fill="none" stroke="#00004a" stroke-width="1.8"/>
|
|
<text class="t act" x="454" y="54">Reader</text>
|
|
<text class="t sml" x="454" y="80">the public portal, assembled live</text>
|
|
|
|
<!-- machine boundary (same vertical skeleton as the static diagram) -->
|
|
<rect x="30" y="158" width="740" height="560" rx="18" fill="#f8f9fc" stroke="#e2e5ee" stroke-width="1.5"/>
|
|
<text class="t" x="400" y="194" text-anchor="middle" font-size="14" font-weight="700" fill="#00004a" letter-spacing=".18em">MACHINE · DATABASE-BACKED CMS</text>
|
|
<text class="t sml" x="400" y="216" text-anchor="middle">WordPress, Strapi, Drupal and the like</text>
|
|
|
|
<path class="flow" d="M239 106 V232"/>
|
|
<text class="t lbl" x="253" y="150">sign in to the panel</text>
|
|
<path class="flow" d="M585 232 V110"/>
|
|
<text class="t lbl" x="599" y="150">HTML built per request</text>
|
|
|
|
<!-- the application: always on, serves everybody -->
|
|
<g filter="url(#softB)"><rect class="box" x="60" y="238" width="680" height="210" rx="16"/></g>
|
|
<text class="t ttl" x="88" y="278">CMS APPLICATION</text>
|
|
<rect class="chipbg" x="290" y="258" width="110" height="24" rx="12"/>
|
|
<text class="t chip" x="345" y="275" text-anchor="middle">ALWAYS ON</text>
|
|
<rect class="sub" x="84" y="298" width="204" height="130" rx="12"/>
|
|
<text class="t name" x="104" y="330">admin panel</text>
|
|
<text class="t cap" x="104" y="356">public address</text>
|
|
<text class="t cap" x="104" y="378">and login, open</text>
|
|
<text class="t cap" x="104" y="400">to the internet</text>
|
|
<rect class="sub" x="298" y="298" width="204" height="130" rx="12"/>
|
|
<text class="t name" x="318" y="330">page rendering</text>
|
|
<text class="t cap" x="318" y="356">every visit is</text>
|
|
<text class="t cap" x="318" y="378">work for the app</text>
|
|
<text class="t cap" x="318" y="400">and the database</text>
|
|
<rect class="sub" x="512" y="298" width="204" height="130" rx="12"/>
|
|
<text class="t name" x="532" y="330">plugins</text>
|
|
<text class="t cap" x="532" y="356">each with its own</text>
|
|
<text class="t cap" x="532" y="378">update cycle and</text>
|
|
<text class="t cap" x="532" y="400">its own bugs</text>
|
|
|
|
<path class="flow" d="M239 448 V504"/>
|
|
<text class="t lbl" x="253" y="484">upload</text>
|
|
<path class="flow" d="M585 448 V504"/>
|
|
<text class="t lbl" x="599" y="484">SQL</text>
|
|
|
|
<!-- media volume -->
|
|
<g filter="url(#softB)"><rect class="sub" x="60" y="508" width="310" height="170" rx="16"/></g>
|
|
<text class="t ttl" x="88" y="546">media/</text>
|
|
<rect class="chipbg" x="180" y="526" width="86" height="24" rx="12"/>
|
|
<text class="t chip" x="223" y="543" text-anchor="middle">VOLUME</text>
|
|
<text class="t cap" x="88" y="582">images and files</text>
|
|
<text class="t cap" x="88" y="606">outside the database</text>
|
|
<text class="t cap" x="88" y="630">backed up separately</text>
|
|
|
|
<!-- database -->
|
|
<g filter="url(#softB)"><rect class="box" x="430" y="508" width="310" height="170" rx="16"/></g>
|
|
<text class="t ttl" x="458" y="546">DATABASE</text>
|
|
<rect class="chipbg" x="590" y="526" width="110" height="24" rx="12"/>
|
|
<text class="t chip" x="645" y="543" text-anchor="middle">ALWAYS ON</text>
|
|
<text class="t cap" x="458" y="582">content and accounts</text>
|
|
<text class="t cap" x="458" y="606">backups and restore drills</text>
|
|
<text class="t cap" x="458" y="630">schema migrations</text>
|
|
<text class="t cap" x="458" y="654">on every upgrade</text>
|
|
|
|
<!-- summary pills -->
|
|
<rect class="pill" x="60" y="740" width="330" height="46" rx="23"/>
|
|
<text class="t pilltxt" x="225" y="768" text-anchor="middle">two processes run non stop, day and night</text>
|
|
<rect class="pill" x="410" y="740" width="330" height="46" rx="23"/>
|
|
<text class="t pilltxt" x="575" y="768" text-anchor="middle">security updates are a standing duty</text>
|
|
</svg>
|
