This is an automated email from the ASF dual-hosted git repository.
guoqqqi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git
The following commit(s) were added to refs/heads/master by this push:
new 5952a4e8026 feat(homepage): redraw the architecture diagram and keep
its source (#2094)
5952a4e8026 is described below
commit 5952a4e8026150eb97a3fc527b47283d0752c13c
Author: Shreemaan Abhishek <[email protected]>
AuthorDate: Wed Aug 26 15:30:44 2026 +0800
feat(homepage): redraw the architecture diagram and keep its source (#2094)
---
next/README.md | 1 +
next/public/img/architecture.svg | 165 ++++++++++++++++++++-
next/src/components/HomePage.astro | 2 +-
next/src/styles/global.css | 7 +-
website/i18n/zh/code.json | 12 --
website/src/assets/images/PatternGrouped-min.svg | 1 -
.../assets/images/infographs/Architecture-min.svg | 1 -
7 files changed, 170 insertions(+), 19 deletions(-)
diff --git a/next/README.md b/next/README.md
index 5b25b40b8df..ffbfdd687ab 100644
--- a/next/README.md
+++ b/next/README.md
@@ -19,6 +19,7 @@ Prototype rebuild of
[apisix.apache.org](https://apisix.apache.org) as a **fully
- `src/pages/` — routes; `/zh/**` mirrors are thin wrappers passing
`locale="zh"`.
- `scripts/generate-sitemaps.mjs` — emits `sitemap.xml` + `zh/sitemap.xml`
post-build.
- `scripts/check-parity.mjs` — asserts every URL in the live sitemaps exists
in `dist/` (exact, case-sensitive string comparison).
+- `public/img/architecture.svg` — the homepage architecture diagram,
hand-authored on a 1200x738 grid. Edit the file directly; boxes and the wires
landing on them share one coordinate space.
## Build
diff --git a/next/public/img/architecture.svg b/next/public/img/architecture.svg
index 169949b76a6..63d01788a86 100644
--- a/next/public/img/architecture.svg
+++ b/next/public/img/architecture.svg
@@ -1 +1,164 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 1713 996"><g
class="architecture"><path fill="#E2ECFF" stroke="#343A40" d="M732
137h993v866H732zm-719 0h700v866H13z"/><path d="m157 464 471-1v324l-469-1"
fill="#FD7E14"/><path d="M159 463c163 2 328 2 467-1l-467 1zm0
0h468-468zm469-1c2 80 1 160-3 323l3-323zm-2 1c3 80 2 160 0 322V463zm1 323c-112
0-223 1-468-1l468 1zm0-1H159h468zm-468 0c-1-73-3-142-2-321l2 321zm0 0-1-322z"
fill="#FD7E14"/><path d="M628 463v-1 1zm0 324v1h1v-1h- [...]
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 1200 738" width="1200"
height="738" fill="none" role="img">
+ <title>Apache APISIX architecture</title>
+ <!--
+ Homepage architecture diagram. Hand-authored: edit this file directly.
+
+ Geometry is absolute, so a box and the wire landing on it share one
+ coordinate space; move a box and you must move its wire. Text is live
+ <text> in the system sans stack, so labels take the viewer's font
+ metrics. Keep boxes wider than their labels need.
+ -->
+ <style>
+ text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
Helvetica, Arial, sans-serif; }
+ .caption { font-size: 15px; font-weight: 700; letter-spacing: 1.8px; }
+ .node-label { font-size: 20px; fill: #1c1e21; }
+ .card-title { font-size: 26px; font-weight: 700; }
+ .card-sub { font-size: 15px; }
+ .chip-label { font-size: 18px; fill: #1c1e21; }
+ .panel { fill: #f7f8fa; stroke: #ebeef2; }
+ .node { fill: #fff; stroke: #e3e7ec; filter: url(#node-shadow); }
+ .card-bg { fill: #fff; }
+ .red-band { fill: #fceded; }
+ .red-line { stroke: #f3c9c7; }
+ .blue-band { fill: #e8f0fb; }
+ .blue-line { stroke: #cfe0f5; }
+ .chip { fill: #fff; }
+ </style>
+
+ <defs>
+ <filter id="node-shadow" x="-20%" y="-40%" width="140%" height="200%">
+ <feDropShadow dx="0" dy="4" stdDeviation="5" flood-color="#101827"
flood-opacity=".07" />
+ </filter>
+ <!-- userSpaceOnUse keeps the head a fixed size regardless of stroke-width;
+ refX at the tip puts the point exactly on the path's last vertex -->
+ <marker id="head-gray" markerUnits="userSpaceOnUse" markerWidth="11"
markerHeight="11" refX="11" refY="5.5" orient="auto">
+ <path d="M0 0 L11 5.5 L0 11 z" fill="#8a939e" />
+ </marker>
+ <marker id="head-blue" markerUnits="userSpaceOnUse" markerWidth="11"
markerHeight="11" refX="11" refY="5.5" orient="auto">
+ <path d="M0 0 L11 5.5 L0 11 z" fill="#1a5da8" />
+ </marker>
+ <marker id="head-red" markerUnits="userSpaceOnUse" markerWidth="11"
markerHeight="11" refX="11" refY="5.5" orient="auto">
+ <path d="M0 0 L11 5.5 L0 11 z" fill="#d63b36" />
+ </marker>
+ </defs>
+
+ <rect width="1200" height="738" fill="#fff" />
+
+ <rect class="panel" x="24.5" y="24.5" width="559" height="689" rx="24" />
+ <rect class="panel" x="616.5" y="24.5" width="559" height="689" rx="24" />
+
+ <circle cx="57.5" cy="53" r="5.5" fill="#d63b36" />
+ <text class="caption" x="75" y="58.4" fill="#a32d2d">DATA PLANE</text>
+ <circle cx="649.5" cy="53" r="5.5" fill="#1a5da8" />
+ <text class="caption" x="667" y="58.4" fill="#175ba1">CONTROL PLANE</text>
+
+ <!-- data plane -->
+ <rect class="node" x="164.5" y="92.5" width="279" height="53" rx="12" />
+ <text class="node-label" x="304" y="126.1" text-anchor="middle">Client /
service</text>
+
+ <g>
+ <rect class="card-bg" x="52" y="190" width="504" height="276" rx="16" />
+ <path class="red-band" d="M52 206a16 16 0 0 1 16-16h472a16 16 0 0 1 16
16v64H52z" />
+ <text class="card-title" x="304" y="228.2" text-anchor="middle"
fill="#b8342f">Apache APISIX</text>
+ <text class="card-sub" x="304" y="252.9" text-anchor="middle"
fill="#a3564f">Hot-reloadable plugin pipeline</text>
+
+ <g class="chip red-line">
+ <rect x="66.5" y="284.5" width="149.67" height="47" rx="10" />
+ <rect x="229.17" y="284.5" width="149.67" height="47" rx="10" />
+ <rect x="391.83" y="284.5" width="149.67" height="47" rx="10" />
+ <rect x="66.5" y="344.5" width="149.67" height="47" rx="10" />
+ <rect x="229.17" y="344.5" width="149.67" height="47" rx="10" />
+ <rect x="391.83" y="344.5" width="149.67" height="47" rx="10" />
+ <rect x="66.5" y="404.5" width="149.67" height="47" rx="10" />
+ <rect x="229.17" y="404.5" width="149.67" height="47" rx="10" />
+ <rect x="391.83" y="404.5" width="149.67" height="47" rx="10" />
+ </g>
+ <g class="chip-label" text-anchor="middle">
+ <text x="141.33" y="314.4">Rate limit</text>
+ <text x="304" y="314.4">Auth</text>
+ <text x="466.67" y="314.4">Security</text>
+ <text x="141.33" y="374.4">Logging</text>
+ <text x="304" y="374.4">Tracing</text>
+ <text x="466.67" y="374.4">Traffic split</text>
+ <text x="141.33" y="434.4">Transformation</text>
+ <text x="304" y="434.4">Custom plugin</text>
+ <text x="466.67" y="434.4">100+ more</text>
+ </g>
+ <rect class="red-line" x="52.5" y="190.5" width="503" height="275" rx="16"
/>
+ </g>
+
+ <g class="node-label" text-anchor="middle">
+ <rect class="node" x="52.5" y="544.5" width="159" height="59" rx="12" />
+ <rect class="node" x="224.5" y="544.5" width="159" height="59" rx="12" />
+ <rect class="node" x="396.5" y="544.5" width="159" height="59" rx="12" />
+ <text x="132" y="581.1">Partner APIs</text>
+ <text x="304" y="581.1">Private APIs</text>
+ <text x="476" y="581.1">Public APIs</text>
+ </g>
+
+ <!-- control plane -->
+ <rect class="node" x="756.5" y="92.5" width="279" height="53" rx="12" />
+ <text class="node-label" x="896" y="126.1" text-anchor="middle">Admin</text>
+
+ <g>
+ <rect class="card-bg" x="644" y="178" width="504" height="154" rx="16" />
+ <path class="blue-band" d="M644 194a16 16 0 0 1 16-16h472a16 16 0 0 1 16
16v64H644z" />
+ <text class="card-title" x="896" y="216.2" text-anchor="middle"
fill="#175ba1">Dashboard</text>
+ <text class="card-sub" x="896" y="240.9" text-anchor="middle"
fill="#3d6c9e">Configure routes and plugins</text>
+ <rect class="chip blue-line" x="796.5" y="272.5" width="199" height="45"
rx="10" />
+ <text class="chip-label" x="896" y="301.4" text-anchor="middle">Manager
API</text>
+ <rect class="blue-line" x="644.5" y="178.5" width="503" height="153"
rx="16" />
+ </g>
+
+ <g>
+ <rect class="card-bg" x="644" y="358" width="504" height="158" rx="16" />
+ <path class="blue-band" d="M644 374a16 16 0 0 1 16-16h472a16 16 0 0 1 16
16v64H644z" />
+ <text class="card-title" x="896" y="396.2" text-anchor="middle"
fill="#175ba1">etcd cluster</text>
+ <text class="card-sub" x="896" y="420.9" text-anchor="middle"
fill="#3d6c9e">Configuration store</text>
+ <g class="chip blue-line">
+ <rect x="658.5" y="452.5" width="149.67" height="49" rx="10" />
+ <rect x="821.17" y="452.5" width="149.67" height="49" rx="10" />
+ <rect x="983.83" y="452.5" width="149.67" height="49" rx="10" />
+ </g>
+ <g class="chip-label" text-anchor="middle">
+ <text x="733.33" y="483.4">etcd</text>
+ <text x="896" y="483.4">etcd</text>
+ <text x="1058.67" y="483.4">etcd</text>
+ </g>
+ <rect class="blue-line" x="644.5" y="358.5" width="503" height="157"
rx="16" />
+ </g>
+
+ <g>
+ <rect class="card-bg" x="644" y="530" width="504" height="158" rx="16" />
+ <path class="blue-band" d="M644 546a16 16 0 0 1 16-16h472a16 16 0 0 1 16
16v64H644z" />
+ <text class="card-title" x="896" y="568.2" text-anchor="middle"
fill="#175ba1">Observability</text>
+ <text class="card-sub" x="896" y="592.9" text-anchor="middle"
fill="#3d6c9e">Metrics, traces, and logs</text>
+ <g class="chip blue-line">
+ <rect x="658.5" y="624.5" width="199" height="49" rx="10" />
+ <rect x="870.5" y="624.5" width="139" height="49" rx="10" />
+ <rect x="1022.5" y="624.5" width="111" height="49" rx="10" />
+ </g>
+ <g class="chip-label" text-anchor="middle">
+ <text x="758" y="655.4">Apache SkyWalking</text>
+ <text x="940" y="655.4">Prometheus</text>
+ <text x="1078" y="655.4">Grafana</text>
+ </g>
+ <rect class="blue-line" x="644.5" y="530.5" width="503" height="157"
rx="16" />
+ </g>
+
+ <g stroke="#8a939e" stroke-width="2.5" stroke-linecap="round"
stroke-linejoin="round">
+ <path d="M304 146 V190" marker-end="url(#head-gray)" />
+ <path d="M896 146 V178" marker-end="url(#head-gray)" />
+ <path d="M896 332 V358" marker-end="url(#head-gray)" />
+ <!-- fan-out bus under APISIX: trunk + rail carry no head, the drops do -->
+ <path d="M304 470 V500 M132 500 H476" />
+ <path d="M132 500 V544" marker-end="url(#head-gray)" />
+ <path d="M304 500 V544" marker-end="url(#head-gray)" />
+ <path d="M476 500 V544" marker-end="url(#head-gray)" />
+ </g>
+
+ <!-- etcd pushes config into the gateway -->
+ <path d="M644 398 H556" stroke="#1a5da8" stroke-width="2.5"
stroke-linecap="round" marker-end="url(#head-blue)" />
+ <!-- the gateway emits telemetry -->
+ <path d="M556 452 H600 V572 H644" stroke="#d63b36" stroke-width="2.5"
stroke-linecap="round" stroke-linejoin="round" marker-end="url(#head-red)" />
+</svg>
diff --git a/next/src/components/HomePage.astro
b/next/src/components/HomePage.astro
index af32921b4e8..fb7be926089 100644
--- a/next/src/components/HomePage.astro
+++ b/next/src/components/HomePage.astro
@@ -196,7 +196,7 @@ const SOFTWARE_APPLICATION_SCHEMA = {
'Requests flow through a hot-reloadable plugin pipeline; etcd
distributes configuration across the cluster in real time, with no restarts.',
'请求流经可热加载的插件流水线；etcd 将配置实时分发到整个集群，无需重启。')}</p>
<figure class="arch-visual reveal">
- <img src="/img/architecture.svg" alt={t(locale, 'Apache APISIX
architecture diagram', 'Apache APISIX 架构图')} loading="lazy" width="1713"
height="996" />
+ <img src="/img/architecture.svg" alt={t(locale, 'Apache APISIX
architecture diagram', 'Apache APISIX 架构图')} loading="lazy" width="1200"
height="738" />
<figcaption>{t(locale,
'Apache APISIX is based on NGINX and etcd. Compared with traditional
API Gateways, APISIX has features like dynamic routing and hot-loading plugins,
etc.',
'Apache APISIX 基于 NGINX 与 etcd，相较于传统的 API
网关，它提供了动态路由、插件热加载等诸多能力。')}</figcaption>
diff --git a/next/src/styles/global.css b/next/src/styles/global.css
index 1346c96a0c8..2850048bb6f 100644
--- a/next/src/styles/global.css
+++ b/next/src/styles/global.css
@@ -402,11 +402,12 @@ section.endcta.alt { background: transparent; padding:
4rem 1rem 0; }
.arch-visual { max-width: 980px; margin: 2rem auto 0; background: #fff;
border: 1px solid rgba(16,24,39,.06); border-radius: 16px; padding:
clamp(1.25rem, 3vw, 2.5rem); box-shadow: 0 1px 2px rgb(0 0 0 / 4%), 0 12px 32px
rgb(0 0 0 / 10%); }
.arch-visual img { width: 100%; max-width: 100%; height: auto; display: block;
margin-inline: auto; }
.arch-visual figcaption { max-width: 34rem; margin: 1rem auto 0; text-align:
center; font-size: .95rem; color: var(--color-text-soft); }
-/* On phones the 1713px-wide diagram would shrink below legibility (~14%);
- let it pan horizontally at >=37% scale instead. */
+/* The diagram is authored 1200 px wide. On phones let it pan horizontally
+ rather than shrink past the point where labels stop being readable;
+ 720px is the narrowest that still holds the plugin grid legible. */
@media (max-width: 700px) {
.arch-visual { overflow-x: auto; -webkit-overflow-scrolling: touch; }
- .arch-visual img { min-width: 640px; }
+ .arch-visual img { min-width: 720px; }
}
.pillar-section { background: #fff8f6; }
.pillar-section + .pillar-section { border-top: 1px solid #f2e8e4; }
diff --git a/website/i18n/zh/code.json b/website/i18n/zh/code.json
index cb0c70542bc..8bd000d1184 100644
--- a/website/i18n/zh/code.json
+++ b/website/i18n/zh/code.json
@@ -107,18 +107,6 @@
"message": "阅读博客",
"description": "Read Blog"
},
- "architecture.component.title.name": {
- "message": "适用于超大规模、复杂的业务系统",
- "description": "Building for large-scale, high value systems"
- },
- "architecture.component.title.subtitle": {
- "message": "Apache APISIX 作为云原生架构的开源 API 网关，可以为海量 API
和微服务提供安全可靠的动态、高性能、可扩展的管理平台。",
- "description": "Apache APISIX lets you build Cloud-Native Microservices
API gateways, delivering the ultimate performance, security, open source and
scalable platform for all your APIs and microservices."
- },
- "architecture.component.card.caption": {
- "message": "Apache APISIX 基于 NGINX 与 etcd，相较于传统的 API
网关，它提供了动态路由、插件热加载等诸多能力。",
- "description": "Apache APISIX is based on NGINX and etcd. Compared with
traditional API gateways, APISIX has dynamic routing and hot-loading plugins"
- },
"features.component.why.title": {
"message": "为什么选择 APISIX API 网关？"
},
diff --git a/website/src/assets/images/PatternGrouped-min.svg
b/website/src/assets/images/PatternGrouped-min.svg
deleted file mode 100644
index 567e4f74b29..00000000000
--- a/website/src/assets/images/PatternGrouped-min.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 1680 361" fill="none"
xmlns="http://www.w3.org/2000/svg";><g class="PatternGrouped"><g
class="Paths"><path class="p27" d="M-60 360c476.78 0 384.27-115.24
899.5-115.24M1739 1.25c-492.79 0-378.93 156.23-899.5 156.23"
stroke="#00EFC6"/><path class="p26" d="M-60 347.51c477.34 0 384.09-105.81
899.5-105.81M1739 16.39c-492.12 0-379.16 144.78-899.5 144.78"
stroke="#0DE2CA"/><path class="p25" d="M-60 335.06c477.89 0 383.9-96.38
899.5-96.38M1739 [...]
\ No newline at end of file
diff --git a/website/src/assets/images/infographs/Architecture-min.svg
b/website/src/assets/images/infographs/Architecture-min.svg
deleted file mode 100644
index 169949b76a6..00000000000
--- a/website/src/assets/images/infographs/Architecture-min.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 1713 996"><g
class="architecture"><path fill="#E2ECFF" stroke="#343A40" d="M732
137h993v866H732zm-719 0h700v866H13z"/><path d="m157 464 471-1v324l-469-1"
fill="#FD7E14"/><path d="M159 463c163 2 328 2 467-1l-467 1zm0
0h468-468zm469-1c2 80 1 160-3 323l3-323zm-2 1c3 80 2 160 0 322V463zm1 323c-112
0-223 1-468-1l468 1zm0-1H159h468zm-468 0c-1-73-3-142-2-321l2 321zm0 0-1-322z"
fill="#FD7E14"/><path d="M628 463v-1 1zm0 324v1h1v-1h- [...]
\ No newline at end of file
