@vpxa/aikit 0.1.57 → 0.1.59
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/packages/cli/dist/commands/init/templates.js +4 -0
- package/packages/present/dist/index.html +16 -16
- package/packages/server/dist/tools/present/tool.js +1 -1
- package/scaffold/general/skills/c4-architecture/SKILL.md +87 -1
- package/scaffold/general/skills/c4-architecture/references/html-design-system.md +337 -0
- package/scaffold/general/skills/c4-architecture/references/html-template.html +627 -0
- package/scaffold/general/skills/present/SKILL.md +180 -0
|
@@ -0,0 +1,627 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
<title>C4 Architecture HTML/SVG Template - AIKIT</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&display=swap" rel="stylesheet" />
|
|
10
|
+
<style>
|
|
11
|
+
:root {
|
|
12
|
+
--bg: #020617;
|
|
13
|
+
--panel: rgba(15, 23, 42, 0.86);
|
|
14
|
+
--panel-border: rgba(148, 163, 184, 0.2);
|
|
15
|
+
--panel-shadow: 0 24px 60px rgba(2, 6, 23, 0.55);
|
|
16
|
+
--text: #e2e8f0;
|
|
17
|
+
--muted: #94a3b8;
|
|
18
|
+
--soft: #cbd5e1;
|
|
19
|
+
--cyan-stroke: #22d3ee;
|
|
20
|
+
--cyan-fill: rgba(8, 51, 68, 0.4);
|
|
21
|
+
--emerald-stroke: #34d399;
|
|
22
|
+
--emerald-fill: rgba(6, 78, 59, 0.4);
|
|
23
|
+
--violet-stroke: #a78bfa;
|
|
24
|
+
--violet-fill: rgba(76, 29, 149, 0.4);
|
|
25
|
+
--amber-stroke: #fbbf24;
|
|
26
|
+
--amber-fill: rgba(120, 53, 15, 0.3);
|
|
27
|
+
--orange-stroke: #fb923c;
|
|
28
|
+
--orange-fill: rgba(251, 146, 60, 0.3);
|
|
29
|
+
--rose-stroke: #fb7185;
|
|
30
|
+
--rose-fill: rgba(136, 19, 55, 0.4);
|
|
31
|
+
--slate-stroke: #94a3b8;
|
|
32
|
+
--slate-fill: rgba(30, 41, 59, 0.5);
|
|
33
|
+
--sky-stroke: #38bdf8;
|
|
34
|
+
--sky-fill: rgba(12, 74, 110, 0.4);
|
|
35
|
+
--major-grid: rgba(148, 163, 184, 0.08);
|
|
36
|
+
--minor-grid: rgba(148, 163, 184, 0.04);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
* {
|
|
40
|
+
box-sizing: border-box;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
body {
|
|
44
|
+
margin: 0;
|
|
45
|
+
min-height: 100vh;
|
|
46
|
+
font-family: "JetBrains Mono", monospace;
|
|
47
|
+
color: var(--text);
|
|
48
|
+
background-color: var(--bg);
|
|
49
|
+
background-image:
|
|
50
|
+
linear-gradient(var(--major-grid) 1px, transparent 1px),
|
|
51
|
+
linear-gradient(90deg, var(--major-grid) 1px, transparent 1px),
|
|
52
|
+
linear-gradient(var(--minor-grid) 1px, transparent 1px),
|
|
53
|
+
linear-gradient(90deg, var(--minor-grid) 1px, transparent 1px);
|
|
54
|
+
background-size: 120px 120px, 120px 120px, 30px 30px, 30px 30px;
|
|
55
|
+
background-position: 0 0, 0 0, 0 0, 0 0;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.page {
|
|
59
|
+
width: min(100%, 1200px);
|
|
60
|
+
margin: 0 auto;
|
|
61
|
+
padding: 32px 20px 24px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.header {
|
|
65
|
+
display: flex;
|
|
66
|
+
align-items: center;
|
|
67
|
+
justify-content: space-between;
|
|
68
|
+
gap: 16px;
|
|
69
|
+
margin-bottom: 20px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.header-copy {
|
|
73
|
+
display: flex;
|
|
74
|
+
flex-direction: column;
|
|
75
|
+
gap: 8px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.eyebrow {
|
|
79
|
+
display: inline-flex;
|
|
80
|
+
align-items: center;
|
|
81
|
+
gap: 10px;
|
|
82
|
+
font-size: 10px;
|
|
83
|
+
color: var(--soft);
|
|
84
|
+
letter-spacing: 0.12em;
|
|
85
|
+
text-transform: uppercase;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.pulse-dot {
|
|
89
|
+
width: 10px;
|
|
90
|
+
height: 10px;
|
|
91
|
+
border-radius: 999px;
|
|
92
|
+
background: var(--cyan-stroke);
|
|
93
|
+
box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.7);
|
|
94
|
+
animation: pulse 1.8s infinite;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
h1 {
|
|
98
|
+
margin: 0;
|
|
99
|
+
font-size: clamp(24px, 4vw, 34px);
|
|
100
|
+
font-weight: 800;
|
|
101
|
+
line-height: 1.1;
|
|
102
|
+
color: #f8fafc;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.subtitle {
|
|
106
|
+
margin: 0;
|
|
107
|
+
font-size: 11px;
|
|
108
|
+
line-height: 1.6;
|
|
109
|
+
color: var(--muted);
|
|
110
|
+
max-width: 76ch;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.meta-chip {
|
|
114
|
+
padding: 10px 12px;
|
|
115
|
+
border: 1px solid var(--panel-border);
|
|
116
|
+
border-radius: 14px;
|
|
117
|
+
background: rgba(15, 23, 42, 0.72);
|
|
118
|
+
color: var(--soft);
|
|
119
|
+
font-size: 10px;
|
|
120
|
+
line-height: 1.5;
|
|
121
|
+
white-space: nowrap;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.diagram-card,
|
|
125
|
+
.legend-card,
|
|
126
|
+
.summary-card,
|
|
127
|
+
.footer {
|
|
128
|
+
border: 1px solid var(--panel-border);
|
|
129
|
+
border-radius: 22px;
|
|
130
|
+
background: var(--panel);
|
|
131
|
+
box-shadow: var(--panel-shadow);
|
|
132
|
+
backdrop-filter: blur(10px);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.diagram-card {
|
|
136
|
+
padding: 18px;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.diagram-frame {
|
|
140
|
+
border: 1px solid rgba(148, 163, 184, 0.18);
|
|
141
|
+
border-radius: 18px;
|
|
142
|
+
padding: 14px;
|
|
143
|
+
background: rgba(2, 6, 23, 0.65);
|
|
144
|
+
overflow: hidden;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
svg {
|
|
148
|
+
display: block;
|
|
149
|
+
width: 100%;
|
|
150
|
+
height: auto;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.boundary-label {
|
|
154
|
+
fill: #f8fafc;
|
|
155
|
+
font-size: 8px;
|
|
156
|
+
font-weight: 700;
|
|
157
|
+
letter-spacing: 0.08em;
|
|
158
|
+
text-transform: uppercase;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.arrow,
|
|
162
|
+
.arrow-dashed {
|
|
163
|
+
fill: none;
|
|
164
|
+
stroke: #cbd5e1;
|
|
165
|
+
stroke-width: 1.6;
|
|
166
|
+
marker-end: url(#arrowhead);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.arrow-dashed {
|
|
170
|
+
stroke-dasharray: 6 4;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.arrow-label {
|
|
174
|
+
fill: #cbd5e1;
|
|
175
|
+
font-size: 8px;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.node rect {
|
|
179
|
+
rx: 6;
|
|
180
|
+
stroke-width: 1.5;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.node .c4-tag {
|
|
184
|
+
fill: #f8fafc;
|
|
185
|
+
font-size: 7px;
|
|
186
|
+
letter-spacing: 0.08em;
|
|
187
|
+
text-transform: uppercase;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.node .node-title {
|
|
191
|
+
fill: #f8fafc;
|
|
192
|
+
font-size: 12px;
|
|
193
|
+
font-weight: 700;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.node .node-subtitle {
|
|
197
|
+
fill: #cbd5e1;
|
|
198
|
+
font-size: 9px;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.node .icon-slot {
|
|
202
|
+
fill: #e2e8f0;
|
|
203
|
+
font-size: 11px;
|
|
204
|
+
font-weight: 700;
|
|
205
|
+
text-anchor: middle;
|
|
206
|
+
dominant-baseline: middle;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.icon-use {
|
|
210
|
+
color: var(--muted);
|
|
211
|
+
opacity: 0.7;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.frontend .icon-use { color: var(--cyan-stroke); }
|
|
215
|
+
.backend .icon-use { color: var(--emerald-stroke); }
|
|
216
|
+
.data .icon-use { color: var(--violet-stroke); }
|
|
217
|
+
.infrastructure .icon-use { color: var(--amber-stroke); }
|
|
218
|
+
.messaging .icon-use { color: var(--orange-stroke); }
|
|
219
|
+
.security .icon-use { color: var(--rose-stroke); }
|
|
220
|
+
.external .icon-use { color: var(--slate-stroke); }
|
|
221
|
+
.monitoring .icon-use { color: var(--sky-stroke); }
|
|
222
|
+
|
|
223
|
+
.frontend rect { fill: var(--cyan-fill); stroke: var(--cyan-stroke); }
|
|
224
|
+
.backend rect { fill: var(--emerald-fill); stroke: var(--emerald-stroke); }
|
|
225
|
+
.data rect { fill: var(--violet-fill); stroke: var(--violet-stroke); }
|
|
226
|
+
.infrastructure rect { fill: var(--amber-fill); stroke: var(--amber-stroke); }
|
|
227
|
+
.messaging rect { fill: var(--orange-fill); stroke: var(--orange-stroke); }
|
|
228
|
+
.security rect { fill: var(--rose-fill); stroke: var(--rose-stroke); }
|
|
229
|
+
.external rect { fill: var(--slate-fill); stroke: var(--slate-stroke); }
|
|
230
|
+
.monitoring rect { fill: var(--sky-fill); stroke: var(--sky-stroke); }
|
|
231
|
+
|
|
232
|
+
.legend-card {
|
|
233
|
+
margin-top: 16px;
|
|
234
|
+
padding: 18px;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.legend-title {
|
|
238
|
+
margin: 0 0 14px;
|
|
239
|
+
font-size: 10px;
|
|
240
|
+
text-transform: uppercase;
|
|
241
|
+
letter-spacing: 0.12em;
|
|
242
|
+
color: var(--soft);
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.legend-grid {
|
|
246
|
+
display: grid;
|
|
247
|
+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
248
|
+
gap: 12px;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.legend-item {
|
|
252
|
+
padding: 12px;
|
|
253
|
+
border-radius: 16px;
|
|
254
|
+
border: 1px solid rgba(148, 163, 184, 0.16);
|
|
255
|
+
background: rgba(2, 6, 23, 0.4);
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.legend-item h3 {
|
|
259
|
+
margin: 0 0 8px;
|
|
260
|
+
font-size: 10px;
|
|
261
|
+
color: #f8fafc;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.legend-item p {
|
|
265
|
+
margin: 0;
|
|
266
|
+
font-size: 10px;
|
|
267
|
+
line-height: 1.5;
|
|
268
|
+
color: var(--muted);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.legend-item code {
|
|
272
|
+
color: var(--soft);
|
|
273
|
+
font-size: 10px;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.legend-swatch {
|
|
277
|
+
display: inline-block;
|
|
278
|
+
width: 10px;
|
|
279
|
+
height: 10px;
|
|
280
|
+
margin-right: 8px;
|
|
281
|
+
border-radius: 999px;
|
|
282
|
+
vertical-align: middle;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
.swatch-cyan { background: var(--cyan-stroke); }
|
|
286
|
+
.swatch-emerald { background: var(--emerald-stroke); }
|
|
287
|
+
.swatch-violet { background: var(--violet-stroke); }
|
|
288
|
+
.swatch-amber { background: var(--amber-stroke); }
|
|
289
|
+
.swatch-orange { background: var(--orange-stroke); }
|
|
290
|
+
.swatch-rose { background: var(--rose-stroke); }
|
|
291
|
+
.swatch-slate { background: var(--slate-stroke); }
|
|
292
|
+
.swatch-sky { background: var(--sky-stroke); }
|
|
293
|
+
|
|
294
|
+
.summary-grid {
|
|
295
|
+
display: grid;
|
|
296
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
297
|
+
gap: 16px;
|
|
298
|
+
margin-top: 18px;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.summary-card {
|
|
302
|
+
padding: 16px;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.summary-card h2 {
|
|
306
|
+
display: flex;
|
|
307
|
+
align-items: center;
|
|
308
|
+
gap: 10px;
|
|
309
|
+
margin: 0 0 10px;
|
|
310
|
+
font-size: 10px;
|
|
311
|
+
text-transform: uppercase;
|
|
312
|
+
letter-spacing: 0.12em;
|
|
313
|
+
color: var(--soft);
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.summary-card p {
|
|
317
|
+
margin: 0;
|
|
318
|
+
font-size: 10px;
|
|
319
|
+
line-height: 1.65;
|
|
320
|
+
color: var(--muted);
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.card-dot {
|
|
324
|
+
width: 10px;
|
|
325
|
+
height: 10px;
|
|
326
|
+
border-radius: 999px;
|
|
327
|
+
flex: 0 0 auto;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.card-dot.cyan { background: var(--cyan-stroke); }
|
|
331
|
+
.card-dot.emerald { background: var(--emerald-stroke); }
|
|
332
|
+
.card-dot.violet { background: var(--violet-stroke); }
|
|
333
|
+
.card-dot.amber { background: var(--amber-stroke); }
|
|
334
|
+
.card-dot.orange { background: var(--orange-stroke); }
|
|
335
|
+
.card-dot.rose { background: var(--rose-stroke); }
|
|
336
|
+
.card-dot.slate { background: var(--slate-stroke); }
|
|
337
|
+
.card-dot.sky { background: var(--sky-stroke); }
|
|
338
|
+
|
|
339
|
+
.footer {
|
|
340
|
+
margin-top: 18px;
|
|
341
|
+
padding: 14px 16px;
|
|
342
|
+
display: flex;
|
|
343
|
+
flex-wrap: wrap;
|
|
344
|
+
gap: 10px 16px;
|
|
345
|
+
justify-content: space-between;
|
|
346
|
+
font-size: 9px;
|
|
347
|
+
color: var(--muted);
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
@keyframes pulse {
|
|
351
|
+
0% {
|
|
352
|
+
box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.7);
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
70% {
|
|
356
|
+
box-shadow: 0 0 0 12px rgba(34, 211, 238, 0);
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
100% {
|
|
360
|
+
box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
@media (max-width: 900px) {
|
|
365
|
+
.header {
|
|
366
|
+
flex-direction: column;
|
|
367
|
+
align-items: flex-start;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.meta-chip {
|
|
371
|
+
white-space: normal;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
.summary-grid {
|
|
375
|
+
grid-template-columns: 1fr;
|
|
376
|
+
}
|
|
377
|
+
}
|
|
378
|
+
</style>
|
|
379
|
+
</head>
|
|
380
|
+
<body>
|
|
381
|
+
<main class="page">
|
|
382
|
+
<header class="header">
|
|
383
|
+
<div class="header-copy">
|
|
384
|
+
<div class="eyebrow">
|
|
385
|
+
<span class="pulse-dot"></span>
|
|
386
|
+
<span>C4 Architecture HTML/SVG Template</span>
|
|
387
|
+
</div>
|
|
388
|
+
<h1>System Architecture</h1>
|
|
389
|
+
<p class="subtitle">Self-contained architecture diagram template aligned to the centralized HTML/SVG design system for C4-style documentation, present blocks, and inline SVG rendering.</p>
|
|
390
|
+
</div>
|
|
391
|
+
<div class="meta-chip">viewBox 1000x680<br />JetBrains Mono<br />Single-source design tokens</div>
|
|
392
|
+
</header>
|
|
393
|
+
|
|
394
|
+
<section class="diagram-card" aria-labelledby="diagram-title">
|
|
395
|
+
<div class="diagram-frame">
|
|
396
|
+
<svg viewBox="0 0 1000 680" role="img" aria-labelledby="diagram-title diagram-desc">
|
|
397
|
+
<title id="diagram-title">C4 architecture diagram example</title>
|
|
398
|
+
<desc id="diagram-desc">Example architecture diagram with frontend, backend, data, infrastructure, messaging, security, external, and monitoring categories.</desc>
|
|
399
|
+
<defs>
|
|
400
|
+
<marker id="arrowhead" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">
|
|
401
|
+
<path d="M0,0 L8,4 L0,8 Z" fill="#cbd5e1"></path>
|
|
402
|
+
</marker>
|
|
403
|
+
|
|
404
|
+
<!-- Category Icons -->
|
|
405
|
+
<symbol id="icon-frontend" viewBox="0 0 16 16">
|
|
406
|
+
<rect x="1.5" y="1" width="13" height="10" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.2"/>
|
|
407
|
+
<line x1="1.5" y1="4" x2="14.5" y2="4" stroke="currentColor" stroke-width="0.8"/>
|
|
408
|
+
<circle cx="3.5" cy="2.5" r="0.6" fill="currentColor"/>
|
|
409
|
+
<circle cx="5.5" cy="2.5" r="0.6" fill="currentColor"/>
|
|
410
|
+
<line x1="6" y1="11" x2="6" y2="14" stroke="currentColor" stroke-width="1.2"/>
|
|
411
|
+
<line x1="10" y1="11" x2="10" y2="14" stroke="currentColor" stroke-width="1.2"/>
|
|
412
|
+
<line x1="4" y1="14" x2="12" y2="14" stroke="currentColor" stroke-width="1.2"/>
|
|
413
|
+
</symbol>
|
|
414
|
+
|
|
415
|
+
<symbol id="icon-backend" viewBox="0 0 16 16">
|
|
416
|
+
<rect x="2" y="0.5" width="12" height="4" rx="1" fill="none" stroke="currentColor" stroke-width="1.2"/>
|
|
417
|
+
<rect x="2" y="6" width="12" height="4" rx="1" fill="none" stroke="currentColor" stroke-width="1.2"/>
|
|
418
|
+
<rect x="2" y="11.5" width="12" height="4" rx="1" fill="none" stroke="currentColor" stroke-width="1.2"/>
|
|
419
|
+
<circle cx="11.5" cy="2.5" r="0.8" fill="currentColor"/>
|
|
420
|
+
<circle cx="11.5" cy="8" r="0.8" fill="currentColor"/>
|
|
421
|
+
<circle cx="11.5" cy="13.5" r="0.8" fill="currentColor"/>
|
|
422
|
+
</symbol>
|
|
423
|
+
|
|
424
|
+
<symbol id="icon-data" viewBox="0 0 16 16">
|
|
425
|
+
<ellipse cx="8" cy="3" rx="5.5" ry="2.2" fill="none" stroke="currentColor" stroke-width="1.2"/>
|
|
426
|
+
<path d="M2.5 3 V12" fill="none" stroke="currentColor" stroke-width="1.2"/>
|
|
427
|
+
<path d="M13.5 3 V12" fill="none" stroke="currentColor" stroke-width="1.2"/>
|
|
428
|
+
<ellipse cx="8" cy="12" rx="5.5" ry="2.2" fill="none" stroke="currentColor" stroke-width="1.2"/>
|
|
429
|
+
<path d="M2.5 7.5 C2.5 9.7 5 10.2 8 10.2 C11 10.2 13.5 9.7 13.5 7.5" fill="none" stroke="currentColor" stroke-width="0.8"/>
|
|
430
|
+
</symbol>
|
|
431
|
+
|
|
432
|
+
<symbol id="icon-infrastructure" viewBox="0 0 16 16">
|
|
433
|
+
<path d="M3.5 13 C1.2 13 0 11.3 0 9.5 C0 7.8 1 6.3 2.8 6 C3 3.5 5.2 1.5 8 1.5 C10.8 1.5 13 3.5 13.2 6 C15 6.3 16 7.8 16 9.5 C16 11.3 14.8 13 12.5 13 Z" fill="none" stroke="currentColor" stroke-width="1.2"/>
|
|
434
|
+
</symbol>
|
|
435
|
+
|
|
436
|
+
<symbol id="icon-messaging" viewBox="0 0 16 16">
|
|
437
|
+
<path d="M1 3 L8 8.5 L15 3" fill="none" stroke="currentColor" stroke-width="1.2"/>
|
|
438
|
+
<rect x="1" y="3" width="14" height="10" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.2"/>
|
|
439
|
+
</symbol>
|
|
440
|
+
|
|
441
|
+
<symbol id="icon-security" viewBox="0 0 16 16">
|
|
442
|
+
<path d="M8 0.8 L2 3.5 V7.5 C2 11.5 4.5 14 8 15.2 C11.5 14 14 11.5 14 7.5 V3.5 Z" fill="none" stroke="currentColor" stroke-width="1.2"/>
|
|
443
|
+
<polyline points="5.5 8 7.5 10 11 5.5" fill="none" stroke="currentColor" stroke-width="1.3"/>
|
|
444
|
+
</symbol>
|
|
445
|
+
|
|
446
|
+
<symbol id="icon-external" viewBox="0 0 16 16">
|
|
447
|
+
<circle cx="8" cy="8" r="6.5" fill="none" stroke="currentColor" stroke-width="1.2"/>
|
|
448
|
+
<ellipse cx="8" cy="8" rx="3" ry="6.5" fill="none" stroke="currentColor" stroke-width="0.8"/>
|
|
449
|
+
<line x1="1.5" y1="5.5" x2="14.5" y2="5.5" stroke="currentColor" stroke-width="0.8"/>
|
|
450
|
+
<line x1="1.5" y1="10.5" x2="14.5" y2="10.5" stroke="currentColor" stroke-width="0.8"/>
|
|
451
|
+
</symbol>
|
|
452
|
+
|
|
453
|
+
<symbol id="icon-monitoring" viewBox="0 0 16 16">
|
|
454
|
+
<polyline points="0.5 12 3.5 8 6 10 9 3 12 7 15.5 2" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
|
|
455
|
+
<line x1="0.5" y1="15" x2="15.5" y2="15" stroke="currentColor" stroke-width="1"/>
|
|
456
|
+
<line x1="0.5" y1="1" x2="0.5" y2="15" stroke="currentColor" stroke-width="1"/>
|
|
457
|
+
</symbol>
|
|
458
|
+
</defs>
|
|
459
|
+
|
|
460
|
+
<rect x="0" y="0" width="1000" height="680" rx="18" fill="rgba(2, 6, 23, 0.38)"></rect>
|
|
461
|
+
|
|
462
|
+
<rect x="54" y="86" width="612" height="472" rx="12" fill="transparent" stroke="#fbbf24" stroke-width="1.5" stroke-dasharray="8,4"></rect>
|
|
463
|
+
<text class="boundary-label" x="74" y="106">Application Region</text>
|
|
464
|
+
|
|
465
|
+
<rect x="708" y="118" width="228" height="194" rx="12" fill="transparent" stroke="#fb7185" stroke-width="1.5" stroke-dasharray="4,4"></rect>
|
|
466
|
+
<text class="boundary-label" x="728" y="138">Security Boundary</text>
|
|
467
|
+
|
|
468
|
+
<!-- CUSTOMIZATION: Add/remove arrows here -->
|
|
469
|
+
<path class="arrow" d="M190 182 H286"></path>
|
|
470
|
+
<text class="arrow-label" x="208" y="171">serves shell assets</text>
|
|
471
|
+
|
|
472
|
+
<path class="arrow" d="M470 208 H530"></path>
|
|
473
|
+
<text class="arrow-label" x="476" y="197">calls</text>
|
|
474
|
+
|
|
475
|
+
<path class="arrow-dashed" d="M655 210 H708"></path>
|
|
476
|
+
<text class="arrow-label" x="656" y="197">auth flow</text>
|
|
477
|
+
|
|
478
|
+
<path class="arrow" d="M615 270 V344"></path>
|
|
479
|
+
<text class="arrow-label" x="626" y="312">reads and writes</text>
|
|
480
|
+
|
|
481
|
+
<path class="arrow" d="M470 450 H530"></path>
|
|
482
|
+
<text class="arrow-label" x="482" y="439">publishes domain events</text>
|
|
483
|
+
|
|
484
|
+
<path class="arrow" d="M635 450 H730"></path>
|
|
485
|
+
<text class="arrow-label" x="650" y="439">exports metrics</text>
|
|
486
|
+
|
|
487
|
+
<path class="arrow" d="M850 250 V350"></path>
|
|
488
|
+
<text class="arrow-label" x="862" y="305">webhook callback</text>
|
|
489
|
+
|
|
490
|
+
<!-- CUSTOMIZATION: Add/remove component boxes here -->
|
|
491
|
+
<g class="node infrastructure">
|
|
492
|
+
<rect x="70" y="150" width="120" height="60"></rect>
|
|
493
|
+
<text class="c4-tag" x="84" y="166"><<Deployment_Node>></text>
|
|
494
|
+
<text class="node-title" x="84" y="184">CDN Edge</text>
|
|
495
|
+
<text class="node-subtitle" x="84" y="198">Infrastructure / CDN</text>
|
|
496
|
+
<use href="#icon-infrastructure" class="icon-use" x="168" y="154" width="16" height="16"/>
|
|
497
|
+
</g>
|
|
498
|
+
|
|
499
|
+
<g class="node frontend">
|
|
500
|
+
<rect x="286" y="150" width="184" height="60"></rect>
|
|
501
|
+
<text class="c4-tag" x="300" y="166"><<Container>></text>
|
|
502
|
+
<text class="node-title" x="300" y="184">Customer SPA</text>
|
|
503
|
+
<text class="node-subtitle" x="300" y="198">Frontend / React PWA</text>
|
|
504
|
+
<use href="#icon-frontend" class="icon-use" x="448" y="154" width="16" height="16"/>
|
|
505
|
+
</g>
|
|
506
|
+
|
|
507
|
+
<g class="node backend">
|
|
508
|
+
<rect x="530" y="180" width="186" height="60"></rect>
|
|
509
|
+
<text class="c4-tag" x="544" y="196"><<Container>></text>
|
|
510
|
+
<text class="node-title" x="544" y="214">Orders API</text>
|
|
511
|
+
<text class="node-subtitle" x="544" y="228">Backend / API Service</text>
|
|
512
|
+
<use href="#icon-backend" class="icon-use" x="694" y="184" width="16" height="16"/>
|
|
513
|
+
</g>
|
|
514
|
+
|
|
515
|
+
<g class="node security">
|
|
516
|
+
<rect x="730" y="164" width="184" height="60"></rect>
|
|
517
|
+
<text class="c4-tag" x="744" y="180"><<System_Ext>></text>
|
|
518
|
+
<text class="node-title" x="744" y="198">Identity Provider</text>
|
|
519
|
+
<text class="node-subtitle" x="744" y="212">Security / Auth Provider</text>
|
|
520
|
+
<use href="#icon-security" class="icon-use" x="892" y="168" width="16" height="16"/>
|
|
521
|
+
</g>
|
|
522
|
+
|
|
523
|
+
<g class="node security">
|
|
524
|
+
<rect x="730" y="240" width="184" height="60"></rect>
|
|
525
|
+
<text class="c4-tag" x="744" y="256"><<System_Ext>></text>
|
|
526
|
+
<text class="node-title" x="744" y="274">API Gateway</text>
|
|
527
|
+
<text class="node-subtitle" x="744" y="288">Security / Gateway</text>
|
|
528
|
+
<use href="#icon-security" class="icon-use" x="892" y="244" width="16" height="16"/>
|
|
529
|
+
</g>
|
|
530
|
+
|
|
531
|
+
<g class="node data">
|
|
532
|
+
<rect x="530" y="344" width="186" height="60"></rect>
|
|
533
|
+
<text class="c4-tag" x="544" y="360"><<ContainerDb>></text>
|
|
534
|
+
<text class="node-title" x="544" y="378">Orders DB</text>
|
|
535
|
+
<text class="node-subtitle" x="544" y="392">Data / Relational DB</text>
|
|
536
|
+
<use href="#icon-data" class="icon-use" x="694" y="348" width="16" height="16"/>
|
|
537
|
+
</g>
|
|
538
|
+
|
|
539
|
+
<g class="node messaging">
|
|
540
|
+
<rect x="530" y="420" width="186" height="60"></rect>
|
|
541
|
+
<text class="c4-tag" x="544" y="436"><<ContainerQueue>></text>
|
|
542
|
+
<text class="node-title" x="544" y="454">Event Bus</text>
|
|
543
|
+
<text class="node-subtitle" x="544" y="468">Messaging / Pub/Sub</text>
|
|
544
|
+
<use href="#icon-messaging" class="icon-use" x="694" y="424" width="16" height="16"/>
|
|
545
|
+
</g>
|
|
546
|
+
|
|
547
|
+
<g class="node external">
|
|
548
|
+
<rect x="760" y="350" width="154" height="60"></rect>
|
|
549
|
+
<text class="c4-tag" x="774" y="366"><<System_Ext>></text>
|
|
550
|
+
<text class="node-title" x="774" y="384">Payment SaaS</text>
|
|
551
|
+
<text class="node-subtitle" x="774" y="398">External / Provider</text>
|
|
552
|
+
<use href="#icon-external" class="icon-use" x="892" y="354" width="16" height="16"/>
|
|
553
|
+
</g>
|
|
554
|
+
|
|
555
|
+
<g class="node monitoring">
|
|
556
|
+
<rect x="760" y="420" width="154" height="60"></rect>
|
|
557
|
+
<text class="c4-tag" x="774" y="436"><<Container>></text>
|
|
558
|
+
<text class="node-title" x="774" y="454">Metrics Stack</text>
|
|
559
|
+
<text class="node-subtitle" x="774" y="468">Monitoring / Metrics</text>
|
|
560
|
+
<use href="#icon-monitoring" class="icon-use" x="892" y="424" width="16" height="16"/>
|
|
561
|
+
</g>
|
|
562
|
+
</svg>
|
|
563
|
+
</div>
|
|
564
|
+
</section>
|
|
565
|
+
|
|
566
|
+
<section class="legend-card" aria-labelledby="legend-title">
|
|
567
|
+
<h2 class="legend-title" id="legend-title">Legend</h2>
|
|
568
|
+
<div class="legend-grid">
|
|
569
|
+
<!-- CUSTOMIZATION: Update legend categories here -->
|
|
570
|
+
<article class="legend-item">
|
|
571
|
+
<h3><span class="legend-swatch swatch-cyan"></span>Frontend</h3>
|
|
572
|
+
<p><code><<Container>></code> for SPA, Mobile App, Static Site, Micro-frontend, PWA, and Desktop App.</p>
|
|
573
|
+
</article>
|
|
574
|
+
<article class="legend-item">
|
|
575
|
+
<h3><span class="legend-swatch swatch-emerald"></span>Backend</h3>
|
|
576
|
+
<p><code><<Container>></code> for API Service, Worker/Job, BFF, Microservice, Serverless Function, and gRPC Service.</p>
|
|
577
|
+
</article>
|
|
578
|
+
<article class="legend-item">
|
|
579
|
+
<h3><span class="legend-swatch swatch-violet"></span>Data</h3>
|
|
580
|
+
<p><code><<ContainerDb>></code> for Relational DB, Document DB, Key-Value Store, Cache, Search Engine, Data Warehouse, Graph DB, and Time-Series DB.</p>
|
|
581
|
+
</article>
|
|
582
|
+
<article class="legend-item">
|
|
583
|
+
<h3><span class="legend-swatch swatch-amber"></span>Infrastructure</h3>
|
|
584
|
+
<p><code><<Deployment_Node>></code> for CDN, Load Balancer, DNS, Object Storage, Container Registry, Reverse Proxy, and Service Mesh.</p>
|
|
585
|
+
</article>
|
|
586
|
+
<article class="legend-item">
|
|
587
|
+
<h3><span class="legend-swatch swatch-orange"></span>Messaging</h3>
|
|
588
|
+
<p><code><<ContainerQueue>></code> for Message Queue, Event Bus, Stream, Pub/Sub, and Webhook.</p>
|
|
589
|
+
</article>
|
|
590
|
+
<article class="legend-item">
|
|
591
|
+
<h3><span class="legend-swatch swatch-rose"></span>Security</h3>
|
|
592
|
+
<p><code><<System_Ext>></code> or boundary for Auth Provider, API Gateway, WAF, Secret Manager, Certificate Manager, and Identity Provider.</p>
|
|
593
|
+
</article>
|
|
594
|
+
<article class="legend-item">
|
|
595
|
+
<h3><span class="legend-swatch swatch-slate"></span>External</h3>
|
|
596
|
+
<p><code><<System_Ext>></code> for Third-party API, SaaS, Legacy System, Partner Service, and Payment Provider.</p>
|
|
597
|
+
</article>
|
|
598
|
+
<article class="legend-item">
|
|
599
|
+
<h3><span class="legend-swatch swatch-sky"></span>Monitoring</h3>
|
|
600
|
+
<p><code><<Container>></code> for Logging, Metrics, Tracing, Alerting, and APM.</p>
|
|
601
|
+
</article>
|
|
602
|
+
</div>
|
|
603
|
+
</section>
|
|
604
|
+
|
|
605
|
+
<section class="summary-grid" aria-label="Architecture summary cards">
|
|
606
|
+
<article class="summary-card">
|
|
607
|
+
<h2><span class="card-dot cyan"></span>Frontend Path</h2>
|
|
608
|
+
<p>The entry path routes through a CDN edge into a React PWA container, preserving a clear frontend classification with C4 container labeling and room for per-subtype icons in the top-right box area.</p>
|
|
609
|
+
</article>
|
|
610
|
+
<article class="summary-card">
|
|
611
|
+
<h2><span class="card-dot emerald"></span>Service Core</h2>
|
|
612
|
+
<p>The API service writes to a relational database and publishes events to the event bus, demonstrating standard, vertical, and labeled connectors while keeping arrows beneath component layers.</p>
|
|
613
|
+
</article>
|
|
614
|
+
<article class="summary-card">
|
|
615
|
+
<h2><span class="card-dot rose"></span>Security Edge</h2>
|
|
616
|
+
<p>A dashed rose boundary isolates identity and gateway capabilities, while an external payment provider and monitoring stack show how non-core systems stay visually distinct from platform containers.</p>
|
|
617
|
+
</article>
|
|
618
|
+
</section>
|
|
619
|
+
|
|
620
|
+
<footer class="footer">
|
|
621
|
+
<span>Generator: HTML/SVG C4 reference template</span>
|
|
622
|
+
<span>Layout: header, main SVG, legend, 3 summary cards, footer metadata</span>
|
|
623
|
+
<span>Colors and typography: synchronized with html-design-system.md</span>
|
|
624
|
+
</footer>
|
|
625
|
+
</main>
|
|
626
|
+
</body>
|
|
627
|
+
</html>
|