LEARN HOW to
CODE SVG DIAGRAM
SOURCE CODE and EXPLANATION of SOURCE CODE

on
Headless CMS Architecture Headless CMS Website (SSG) Webhook Server Blogger API

headless-cms-architecture.html 


<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"
    >

      <!-- Headless CMS Box -->

      <rect
        class="box"
        height="48"
        width="160"
        x="280"
        y="20"
      ></rect>

      <text
        class="label"
        x="360"
        y="44"
      >
        Headless CMS
      </text>

      <!-- Website (SSG) -->

      <rect
        class="box"
        height="48"
        width="160"
        x="80"
        y="140"
      ></rect>

      <text
        class="label"
        x="160"
        y="164"
      >
        Website (SSG)
      </text>

      <!-- Webhook Server -->

      <rect
        class="box"
        height="48"
        width="160"
        x="480"
        y="140"
      ></rect>

      <text
        class="label"
        x="560"
        y="164"
      >
        Webhook Server
      </text>

      <!-- Blogger API -->

      <rect
        class="box"
        height="48"
        width="160"
        x="480"
        y="240"
      ></rect>

      <text
        class="label"
        x="560"
        y="264"
      >
        Blogger API
      </text>

      <!-- Connection Paths -->

      <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 that visually explains how content flows between systems and services.

SVG Structure and Styling

• ViewBox: 0 0 720 300 defines the SVG coordinate system.
• Reusable CSS classes style the architecture components.
  • .box → White rectangles with borders and rounded corners.
  • .label → Centers text labels inside components.
  • .edge → Creates connection lines between architecture blocks.

The Four Components

1. Headless CMS
• Position: x=280, y=20
• Rectangle size: 160 × 48
2. Website (SSG)
• Positioned on the lower-left side.
• SSG means Static Site Generator.
3. Webhook Server
• Handles automation and integrations.
• Positioned at: x=480, y=140
4. Blogger API
• Receives requests from the Webhook Server.
• Positioned below the Webhook Server.

The Connections

<path d="M360,68 V104 H160 v36" />

Explanation:

1. M360,68
M = Move To
Moves the cursor to coordinate:
x = 360
y = 68
(No line drawn yet)

2. V104
V = Vertical Line To
Draws a vertical line to:
y = 104
x remains 360

From: (360,68)
To:   (360,104)

3. H160
H = Horizontal Line To
Draws a horizontal line to:
x = 160
y remains 104

From: (360,104)
To:   (160,104)

4. v36
Lowercase v = relative vertical movement
Moves 36 units downward from current position.

Current position:
(160,104)

After movement:
(160,140)

From: (160,104)
To:   (160,140)

Final Path Shape:

Start at (360,68)
│
│
▼
(360,104) ───────────────► (160,104)
                               │
                               │
                               ▼
                          (160,140)

Absolute vs Relative Commands

Uppercase commands = absolute coordinates
M, V, H

Lowercase commands = relative movement
v

Example:
V104 = go exactly to y = 104
v36 = move 36 units from current position
CMS → Website
• Path: M360,68 V104 H160 v36
• Moves downward and then left to the Website block.
CMS → Webhook Server
• Path: M360,68 V104 H560 v36
• Connects the CMS to the Webhook Server.
Webhook Server → Blogger API
• Path: M560,188 v52
• Draws a vertical connection downward.

Architecture Flow Explained

  • Content originates from the Headless CMS.
  • The CMS sends content to a Static Site Generator.
  • A webhook process automates communication with external systems.
  • The Blogger API receives publishing or synchronization requests.
The SVG includes role="img" and aria-label attributes, making the diagram accessible to screen readers.

Comments

Post a Comment