- Get link
- X
- Other Apps
SOURCE CODE
<html lang="en">
<head>
<meta charset="utf-8"></meta>
<title>Headless CMS Architecture</title>
<meta content="width=device-width, initial-scale=1" name="viewport"></meta>
<style>
svg { max-width: 720px; height: auto; font: 14px system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.box { fill: #fff; stroke: #444; stroke-width: 2; rx: 8; }
.label { text-anchor: middle; dominant-baseline: middle; }
.edge { stroke: #444; stroke-width: 2; fill: none; }
</style>
</head>
<body>
<svg aria-label="Headless CMS flows to Website (SSG) and Webhook Server, which flows to Blogger API" role="img" viewbox="0 0 720 300">
<rect class="box" height="48" width="160" x="280" y="20"></rect>
<text class="label" x="360" y="44">Headless CMS</text>
<rect class="box" height="48" width="160" x="80" y="140"></rect>
<text class="label" x="160" y="164">Website (SSG)</text>
<rect class="box" height="48" width="160" x="480" y="140"></rect>
<text class="label" x="560" y="164">Webhook Server</text>
<rect class="box" height="48" width="160" x="480" y="240"></rect>
<text class="label" x="560" y="264">Blogger API</text>
<path class="edge" d="M360,68 V104 H160 v36"></path>
<path class="edge" d="M360,68 V104 H560 v36"></path>
<path class="edge" d="M560,188 v52"></path>
</svg>
</body>
</html>
CODE EXPLANATION
This SVG code creates a Headless CMS Architecture diagram showing how different components interact. Let me break down what each part does:
SVG Structure and Styling
· ViewBox: 0 0 720 300 - Sets the coordinate system (720px wide, 300px tall)
· CSS Classes:
· .box: White rectangles with dark borders and rounded corners (rx: 8)
· .label: Centers text both horizontally and vertically
· .edge: Dark lines for connections (2px thick)
The Four Components (Rectangles + Text)
1. Headless CMS (top center)
· Position: x=280, y=20 (160×48px rectangle)
· Label centered at x=360, y=44
2. Website (SSG) (bottom left)
· Position: x=80, y=140
· Label centered at x=160, y=164
· SSG = Static Site Generator
3. Webhook Server (bottom middle)
· Position: x=480, y=140
· Label centered at x=560, y=164
4. Blogger API (bottom right)
· Position: x=480, y=240
· Label centered at x=560, y=264
The Connections (Path elements)
1. CMS → Website (left arrow)
· M360,68 V104 H160 v36
· Starts at CMS bottom (360,68)
· Goes down, then left to Website
2. CMS → Webhook Server (right arrow)
· M360,68 V104 H560 v36
· Starts at CMS bottom
· Goes down, then right to Webhook Server
3. Webhook Server → Blogger API (vertical arrow)
· M560,188 v52
· Straight line down from Webhook Server to Blogger API
Architecture Flow Explained
This diagram illustrates:
· Content flows from the Headless CMS to both:
1. A Website built with Static Site Generation (SSG)
2. A Webhook Server that triggers actions
· The Webhook Server then communicates with the Blogger API (likely to publish or sync content to Blogger)
The SVG is well-structured for accessibility with proper aria-label and role="img" attributes, making it screen-reader friendly.
Comments