@wipal/agent-team 1.0.3 → 1.1.0

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.
Files changed (124) hide show
  1. package/.claude/commands/skills/discover.md +127 -0
  2. package/.claude/commands/skills/install.md +225 -0
  3. package/.claude/commands/skills/review.md +234 -0
  4. package/.claude/commands/utils/learn.md +142 -0
  5. package/.claude/commands/utils/retrospect.md +62 -0
  6. package/.claude/commands/utils/switch.md +113 -0
  7. package/.claude/commands/utils/sync.md +183 -0
  8. package/.claude/rules/common/general-rules.md +6 -0
  9. package/.claude/rules/role-rules/dev-be-rules.md +241 -0
  10. package/.claude/rules/role-rules/dev-fe-rules.md +76 -0
  11. package/.claude/skills/SKILL-INDEX.md +24 -5
  12. package/.claude/skills/core/knowledge-graph/SKILL.md +214 -0
  13. package/.claude/skills/core/sequential-thinking/SKILL.md +112 -0
  14. package/.claude/skills/core/sequential-thinking/references/advanced.md +122 -0
  15. package/.claude/skills/core/sequential-thinking/references/examples.md +274 -0
  16. package/.claude/skills/domain/architecture/c4-architecture/SKILL.md +314 -0
  17. package/.claude/skills/domain/architecture/c4-architecture/references/advanced-patterns.md +552 -0
  18. package/.claude/skills/domain/architecture/c4-architecture/references/c4-syntax.md +492 -0
  19. package/.claude/skills/domain/architecture/c4-architecture/references/common-mistakes.md +437 -0
  20. package/.claude/skills/domain/architecture/mermaid-diagrams/SKILL.md +238 -0
  21. package/.claude/skills/domain/architecture/mermaid-diagrams/references/advanced-features.md +556 -0
  22. package/.claude/skills/domain/architecture/mermaid-diagrams/references/architecture-diagrams.md +192 -0
  23. package/.claude/skills/domain/architecture/mermaid-diagrams/references/c4-diagrams.md +410 -0
  24. package/.claude/skills/domain/architecture/mermaid-diagrams/references/class-diagrams.md +361 -0
  25. package/.claude/skills/domain/architecture/mermaid-diagrams/references/erd-diagrams.md +510 -0
  26. package/.claude/skills/domain/architecture/mermaid-diagrams/references/flowcharts.md +450 -0
  27. package/.claude/skills/domain/architecture/mermaid-diagrams/references/sequence-diagrams.md +394 -0
  28. package/.claude/skills/domain/backend/testing-be/SKILL.md +121 -17
  29. package/.claude/skills/domain/design/design-system/SKILL.md +169 -0
  30. package/.claude/skills/domain/design/html-css-output/SKILL.md +253 -0
  31. package/.claude/skills/domain/design/mockup-creation/SKILL.md +230 -0
  32. package/.claude/skills/domain/design/responsive-design/SKILL.md +207 -0
  33. package/.claude/skills/domain/design/ui-design/SKILL.md +124 -0
  34. package/.claude/skills/domain/frontend/testing-fe/SKILL.md +143 -38
  35. package/.claude/skills/domain/frontend/ui-ux-pro-max/README.md +45 -0
  36. package/.claude/skills/domain/frontend/ui-ux-pro-max/SKILL.md +404 -0
  37. package/.claude/skills/domain/frontend/ui-ux-pro-max/data/charts.csv +26 -0
  38. package/.claude/skills/domain/frontend/ui-ux-pro-max/data/colors.csv +97 -0
  39. package/.claude/skills/domain/frontend/ui-ux-pro-max/data/icons.csv +101 -0
  40. package/.claude/skills/domain/frontend/ui-ux-pro-max/data/landing.csv +31 -0
  41. package/.claude/skills/domain/frontend/ui-ux-pro-max/data/products.csv +97 -0
  42. package/.claude/skills/domain/frontend/ui-ux-pro-max/data/react-performance.csv +45 -0
  43. package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/astro.csv +54 -0
  44. package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/flutter.csv +53 -0
  45. package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/html-tailwind.csv +56 -0
  46. package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/jetpack-compose.csv +53 -0
  47. package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/nextjs.csv +53 -0
  48. package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/nuxt-ui.csv +51 -0
  49. package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/nuxtjs.csv +59 -0
  50. package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/react-native.csv +52 -0
  51. package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/react.csv +54 -0
  52. package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/shadcn.csv +61 -0
  53. package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/svelte.csv +54 -0
  54. package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/swiftui.csv +51 -0
  55. package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/vue.csv +50 -0
  56. package/.claude/skills/domain/frontend/ui-ux-pro-max/data/styles.csv +68 -0
  57. package/.claude/skills/domain/frontend/ui-ux-pro-max/data/typography.csv +58 -0
  58. package/.claude/skills/domain/frontend/ui-ux-pro-max/data/ui-reasoning.csv +101 -0
  59. package/.claude/skills/domain/frontend/ui-ux-pro-max/data/ux-guidelines.csv +100 -0
  60. package/.claude/skills/domain/frontend/ui-ux-pro-max/data/web-interface.csv +31 -0
  61. package/.claude/skills/domain/frontend/ui-ux-pro-max/scripts/core.py +253 -0
  62. package/.claude/skills/domain/frontend/ui-ux-pro-max/scripts/design_system.py +1067 -0
  63. package/.claude/skills/domain/frontend/ui-ux-pro-max/scripts/search.py +114 -0
  64. package/.claude/skills/domain/product/requirements-clarity/SKILL.md +340 -0
  65. package/.claude/skills/skills-registry.yaml +103 -8
  66. package/README.md +107 -33
  67. package/README.npm.md +252 -0
  68. package/TUTORIAL.md +256 -0
  69. package/bin/agent-team.js +26 -7
  70. package/config/roles.yaml +107 -0
  71. package/docs/01-architecture.md +699 -0
  72. package/docs/02-setup-guide.md +634 -0
  73. package/docs/03-skills-guide.md +628 -0
  74. package/docs/04-workflows.md +792 -0
  75. package/docs/05-model-strategy.md +550 -0
  76. package/docs/06-extend-guide.md +1226 -0
  77. package/docs/07-quick-reference.md +578 -0
  78. package/docs/08-skills-discovery.md +342 -0
  79. package/docs/README.md +134 -0
  80. package/docs/rqm.md +560 -0
  81. package/package.json +10 -4
  82. package/scripts/postinstall.js +46 -0
  83. package/src/commands/add.js +131 -67
  84. package/src/commands/init.js +419 -9
  85. package/src/commands/list.js +20 -16
  86. package/src/commands/projects.js +127 -0
  87. package/src/commands/setup-hooks.js +261 -0
  88. package/src/index.js +0 -1
  89. package/src/utils/file-utils.js +147 -50
  90. package/src/utils/global-registry.js +224 -0
  91. package/templates/CLAUDE.md.tmpl +128 -20
  92. package/templates/MEMORY.md.tmpl +119 -0
  93. package/templates/agent.md.tmpl +205 -0
  94. package/templates/code/nestjs-controller.ts.tmpl +49 -0
  95. package/templates/code/nestjs-dto.ts.tmpl +63 -0
  96. package/templates/code/nestjs-service.ts.tmpl +45 -0
  97. package/templates/code/react-component.tsx.tmpl +24 -0
  98. package/templates/code/react-hook.ts.tmpl +54 -0
  99. package/templates/code/test.spec.ts.tmpl +50 -0
  100. package/templates/code/vue-component.vue.tmpl +49 -0
  101. package/templates/code/vue-composable.ts.tmpl +54 -0
  102. package/templates/knowledge.md.tmpl +152 -17
  103. package/templates/meeting-notes.md.tmpl +110 -0
  104. package/templates/memory/hooks.memory.json +50 -0
  105. package/templates/memory/settings.memory.json +16 -0
  106. package/templates/reports/bug-report.md.tmpl +164 -0
  107. package/templates/reports/code-review.md.tmpl +201 -0
  108. package/templates/reports/sprint-report.md.tmpl +218 -0
  109. package/templates/roles/ba.md +53 -0
  110. package/templates/roles/designer.md +82 -0
  111. package/templates/roles/dev-be.md +49 -0
  112. package/templates/roles/dev-fe.md +49 -0
  113. package/templates/roles/devops.md +53 -0
  114. package/templates/roles/pm.md +49 -0
  115. package/templates/roles/qa.md +53 -0
  116. package/templates/roles/sa.md +49 -0
  117. package/templates/roles/tech-lead.md +132 -0
  118. package/templates/skills/memory/memory-status.md +78 -0
  119. package/templates/skills/memory/recall.md +160 -0
  120. package/templates/skills/memory/reflect.md +168 -0
  121. package/templates/skills/memory/remember.md +105 -0
  122. package/templates/tasks/lessons.md.tmpl +77 -0
  123. package/templates/tasks/todo.md.tmpl +53 -0
  124. package/src/commands/switch.js +0 -53
@@ -0,0 +1,552 @@
1
+ # Advanced C4 Architecture Patterns
2
+
3
+ This guide covers advanced patterns for documenting complex architectures including microservices, event-driven systems, deployments, and API documentation.
4
+
5
+ ## Microservices Architecture
6
+
7
+ ### Single Team Ownership
8
+
9
+ When one team owns all microservices, model them as **containers** within a single system:
10
+
11
+ ```mermaid
12
+ C4Container
13
+ title E-commerce Platform - Single Team
14
+
15
+ Person(customer, "Customer", "Online shopper")
16
+
17
+ System_Ext(payment, "Stripe", "Payments")
18
+ System_Ext(shipping, "FedEx", "Shipping")
19
+
20
+ System_Boundary(platform, "E-commerce Platform") {
21
+ Container(gateway, "API Gateway", "Kong", "Routing, auth, rate limiting")
22
+
23
+ Container(orderSvc, "Order Service", "Node.js", "Order processing")
24
+ ContainerDb(orderDb, "Order DB", "PostgreSQL", "Orders")
25
+
26
+ Container(productSvc, "Product Service", "Go", "Product catalog")
27
+ ContainerDb(productDb, "Product DB", "MongoDB", "Products")
28
+
29
+ Container(userSvc, "User Service", "Java", "Authentication")
30
+ ContainerDb(userDb, "User DB", "PostgreSQL", "Users")
31
+ ContainerDb(cache, "Cache", "Redis", "Sessions")
32
+ }
33
+
34
+ Rel(customer, gateway, "API requests", "HTTPS")
35
+ Rel(gateway, orderSvc, "Routes", "HTTP")
36
+ Rel(gateway, productSvc, "Routes", "HTTP")
37
+ Rel(gateway, userSvc, "Routes", "HTTP")
38
+
39
+ Rel(orderSvc, orderDb, "Persists", "SQL")
40
+ Rel(productSvc, productDb, "Persists", "MongoDB")
41
+ Rel(userSvc, userDb, "Persists", "SQL")
42
+ Rel(userSvc, cache, "Caches", "Redis")
43
+
44
+ Rel(orderSvc, payment, "Charges", "REST")
45
+ Rel(orderSvc, shipping, "Ships", "REST")
46
+ ```
47
+
48
+ ### Multi-Team Ownership
49
+
50
+ When separate teams own microservices, **promote each to a software system**:
51
+
52
+ ```mermaid
53
+ C4Context
54
+ title E-commerce Platform - Multi-Team
55
+
56
+ Person(customer, "Customer", "Online shopper")
57
+ Person(admin, "Admin", "Store manager")
58
+
59
+ Enterprise_Boundary(company, "Acme Corp") {
60
+ System(orderSystem, "Order System", "Team Alpha - Order lifecycle")
61
+ System(productSystem, "Product System", "Team Beta - Catalog management")
62
+ System(userSystem, "User System", "Team Gamma - Identity & auth")
63
+ System(analyticsSystem, "Analytics System", "Team Delta - Business intelligence")
64
+ }
65
+
66
+ System_Ext(payment, "Stripe", "Payment processing")
67
+ System_Ext(warehouse, "Warehouse System", "Fulfillment partner")
68
+
69
+ Rel(customer, orderSystem, "Places orders")
70
+ Rel(customer, productSystem, "Browses products")
71
+ Rel(admin, productSystem, "Manages catalog")
72
+ Rel(admin, analyticsSystem, "Views reports")
73
+
74
+ Rel(orderSystem, userSystem, "Authenticates")
75
+ Rel(orderSystem, productSystem, "Checks inventory")
76
+ Rel(orderSystem, payment, "Processes payments")
77
+ Rel(orderSystem, warehouse, "Fulfills orders")
78
+ Rel(analyticsSystem, orderSystem, "Aggregates data")
79
+ ```
80
+
81
+ Each team then creates their own Container diagram:
82
+
83
+ ```mermaid
84
+ C4Container
85
+ title Order System - Team Alpha
86
+
87
+ System_Ext(productSystem, "Product System", "Inventory checks")
88
+ System_Ext(userSystem, "User System", "Authentication")
89
+ System_Ext(payment, "Stripe", "Payments")
90
+
91
+ Container_Boundary(orderSystem, "Order System") {
92
+ Container(orderApi, "Order API", "Spring Boot", "REST endpoints")
93
+ Container(orderWorker, "Order Worker", "Spring Boot", "Async processing")
94
+ ContainerDb(orderDb, "Order DB", "PostgreSQL", "Order data")
95
+ ContainerQueue(orderQueue, "Order Queue", "RabbitMQ", "Processing queue")
96
+ }
97
+
98
+ Rel(orderApi, orderDb, "Reads/writes", "JDBC")
99
+ Rel(orderApi, orderQueue, "Publishes", "AMQP")
100
+ Rel(orderWorker, orderQueue, "Consumes", "AMQP")
101
+ Rel(orderWorker, orderDb, "Updates", "JDBC")
102
+
103
+ Rel(orderApi, userSystem, "Validates tokens", "REST")
104
+ Rel(orderApi, productSystem, "Reserves stock", "REST")
105
+ Rel(orderWorker, payment, "Charges", "REST")
106
+ ```
107
+
108
+ ## Event-Driven Architecture
109
+
110
+ ### Showing Individual Topics
111
+
112
+ Always model message topics/queues as separate containers:
113
+
114
+ ```mermaid
115
+ C4Container
116
+ title Order Processing - Event-Driven
117
+
118
+ Container(orderSvc, "Order Service", "Java", "Creates orders")
119
+ Container(inventorySvc, "Inventory Service", "Go", "Manages stock")
120
+ Container(paymentSvc, "Payment Service", "Node.js", "Processes payments")
121
+ Container(shippingSvc, "Shipping Service", "Python", "Creates shipments")
122
+ Container(notificationSvc, "Notification Service", "Python", "Sends alerts")
123
+
124
+ ContainerQueue(orderCreated, "order.created", "Kafka", "New order events")
125
+ ContainerQueue(stockReserved, "inventory.reserved", "Kafka", "Stock reservation events")
126
+ ContainerQueue(paymentComplete, "payment.completed", "Kafka", "Payment events")
127
+ ContainerQueue(orderShipped, "order.shipped", "Kafka", "Shipment events")
128
+
129
+ Rel(orderSvc, orderCreated, "Publishes", "Avro")
130
+
131
+ Rel(inventorySvc, orderCreated, "Consumes", "Avro")
132
+ Rel(inventorySvc, stockReserved, "Publishes", "Avro")
133
+
134
+ Rel(paymentSvc, stockReserved, "Consumes", "Avro")
135
+ Rel(paymentSvc, paymentComplete, "Publishes", "Avro")
136
+
137
+ Rel(shippingSvc, paymentComplete, "Consumes", "Avro")
138
+ Rel(shippingSvc, orderShipped, "Publishes", "Avro")
139
+
140
+ Rel(notificationSvc, orderCreated, "Consumes", "Avro")
141
+ Rel(notificationSvc, paymentComplete, "Consumes", "Avro")
142
+ Rel(notificationSvc, orderShipped, "Consumes", "Avro")
143
+
144
+ Rel(orderSvc, paymentComplete, "Consumes", "Avro")
145
+ Rel(orderSvc, orderShipped, "Consumes", "Avro")
146
+
147
+ UpdateLayoutConfig($c4ShapeInRow="4")
148
+ ```
149
+
150
+ ### Event Flow with Dynamic Diagram
151
+
152
+ Use Dynamic diagrams to show the sequence of events:
153
+
154
+ ```mermaid
155
+ C4Dynamic
156
+ title Order Processing Flow
157
+
158
+ Container(orderSvc, "Order Service", "Java")
159
+ Container(inventorySvc, "Inventory Service", "Go")
160
+ Container(paymentSvc, "Payment Service", "Node.js")
161
+ Container(shippingSvc, "Shipping Service", "Python")
162
+
163
+ ContainerQueue(orderCreated, "order.created", "Kafka")
164
+ ContainerQueue(stockReserved, "inventory.reserved", "Kafka")
165
+ ContainerQueue(paymentComplete, "payment.completed", "Kafka")
166
+
167
+ Rel(orderSvc, orderCreated, "1. Publishes order", "Avro")
168
+ Rel(inventorySvc, orderCreated, "2. Consumes order", "Avro")
169
+ Rel(inventorySvc, stockReserved, "3. Publishes reservation", "Avro")
170
+ Rel(paymentSvc, stockReserved, "4. Consumes reservation", "Avro")
171
+ Rel(paymentSvc, paymentComplete, "5. Publishes payment", "Avro")
172
+ Rel(shippingSvc, paymentComplete, "6. Consumes payment", "Avro")
173
+ ```
174
+
175
+ ### CQRS Pattern
176
+
177
+ ```mermaid
178
+ C4Container
179
+ title CQRS Architecture
180
+
181
+ Person(user, "User", "Application user")
182
+
183
+ Container_Boundary(app, "Application") {
184
+ Container(commandApi, "Command API", "Java", "Write operations")
185
+ Container(queryApi, "Query API", "Node.js", "Read operations")
186
+
187
+ ContainerDb(writeDb, "Write DB", "PostgreSQL", "Source of truth")
188
+ ContainerDb(readDb, "Read DB", "Elasticsearch", "Query-optimized")
189
+
190
+ ContainerQueue(events, "Domain Events", "Kafka", "State changes")
191
+ Container(projector, "Projector", "Java", "Updates read model")
192
+ }
193
+
194
+ Rel(user, commandApi, "Commands", "HTTPS")
195
+ Rel(user, queryApi, "Queries", "HTTPS")
196
+
197
+ Rel(commandApi, writeDb, "Writes", "JDBC")
198
+ Rel(commandApi, events, "Publishes", "Avro")
199
+
200
+ Rel(projector, events, "Consumes", "Avro")
201
+ Rel(projector, readDb, "Updates", "REST")
202
+
203
+ Rel(queryApi, readDb, "Queries", "REST")
204
+ ```
205
+
206
+ ## Deployment Patterns
207
+
208
+ ### AWS Production Deployment
209
+
210
+ ```mermaid
211
+ C4Deployment
212
+ title Production - AWS us-east-1
213
+
214
+ Deployment_Node(route53, "Route 53", "DNS") {
215
+ Container(dns, "DNS", "AWS", "api.example.com")
216
+ }
217
+
218
+ Deployment_Node(cloudfront, "CloudFront", "CDN") {
219
+ Container(cdn, "CDN", "AWS", "Static asset caching")
220
+ }
221
+
222
+ Deployment_Node(vpc, "VPC", "10.0.0.0/16") {
223
+
224
+ Deployment_Node(public, "Public Subnets", "Multi-AZ") {
225
+ Deployment_Node(alb, "ALB", "Application LB") {
226
+ Container(lb, "Load Balancer", "AWS ALB", "TLS termination, routing")
227
+ }
228
+ }
229
+
230
+ Deployment_Node(private, "Private Subnets", "Multi-AZ") {
231
+
232
+ Deployment_Node(ecs, "ECS Cluster", "Fargate") {
233
+ Container(api1, "API", "Node.js", "Instance 1")
234
+ Container(api2, "API", "Node.js", "Instance 2")
235
+ Container(worker1, "Worker", "Python", "Instance 1")
236
+ }
237
+
238
+ Deployment_Node(rds, "RDS", "db.r5.xlarge") {
239
+ ContainerDb(primary, "Primary", "PostgreSQL 14", "Multi-AZ")
240
+ }
241
+
242
+ Deployment_Node(elasticache, "ElastiCache", "cache.r5.large") {
243
+ ContainerDb(redis, "Redis", "Redis 7", "Cluster mode")
244
+ }
245
+ }
246
+ }
247
+
248
+ Rel(dns, cdn, "Routes to", "HTTPS")
249
+ Rel(cdn, lb, "Forwards", "HTTPS")
250
+ Rel(lb, api1, "Routes", "HTTP")
251
+ Rel(lb, api2, "Routes", "HTTP")
252
+ Rel(api1, primary, "Queries", "JDBC")
253
+ Rel(api2, primary, "Queries", "JDBC")
254
+ Rel(api1, redis, "Caches", "Redis")
255
+ Rel(worker1, primary, "Processes", "JDBC")
256
+ ```
257
+
258
+ ### Kubernetes Deployment
259
+
260
+ ```mermaid
261
+ C4Deployment
262
+ title Production - Kubernetes
263
+
264
+ Deployment_Node(ingress, "Ingress Controller", "nginx") {
265
+ Container(nginx, "Nginx", "nginx-ingress", "TLS, routing")
266
+ }
267
+
268
+ Deployment_Node(cluster, "Kubernetes Cluster", "EKS 1.28") {
269
+
270
+ Deployment_Node(nsApp, "app namespace", "Application") {
271
+
272
+ Deployment_Node(apiDeploy, "api-deployment", "3 replicas") {
273
+ Container(api, "API Pod", "Node.js 20", "REST API")
274
+ }
275
+
276
+ Deployment_Node(workerDeploy, "worker-deployment", "2 replicas") {
277
+ Container(worker, "Worker Pod", "Python 3.11", "Background jobs")
278
+ }
279
+ }
280
+
281
+ Deployment_Node(nsData, "data namespace", "Databases") {
282
+
283
+ Deployment_Node(pgStateful, "postgres-statefulset", "HA") {
284
+ ContainerDb(pg, "PostgreSQL", "PostgreSQL 15", "Primary + Replica")
285
+ }
286
+
287
+ Deployment_Node(redisStateful, "redis-statefulset", "Cluster") {
288
+ ContainerDb(redis, "Redis", "Redis 7", "3 node cluster")
289
+ }
290
+ }
291
+ }
292
+
293
+ Rel(nginx, api, "Routes /api/*", "HTTP")
294
+ Rel(api, pg, "Queries", "JDBC")
295
+ Rel(api, redis, "Caches", "Redis")
296
+ Rel(worker, pg, "Processes", "JDBC")
297
+ ```
298
+
299
+ ### Multi-Region Deployment
300
+
301
+ ```mermaid
302
+ C4Deployment
303
+ title Multi-Region Active-Active
304
+
305
+ Deployment_Node(globalLB, "Global Load Balancer", "AWS Global Accelerator") {
306
+ Container(glb, "GLB", "AWS", "Geographic routing")
307
+ }
308
+
309
+ Deployment_Node(usEast, "US-East-1", "Primary Region") {
310
+ Deployment_Node(usEcs, "ECS Cluster", "Fargate") {
311
+ Container(usApi, "API", "Node.js", "US instances")
312
+ }
313
+ Deployment_Node(usRds, "RDS", "Multi-AZ") {
314
+ ContainerDb(usPrimary, "Primary DB", "PostgreSQL", "Write leader")
315
+ }
316
+ }
317
+
318
+ Deployment_Node(euWest, "EU-West-1", "Secondary Region") {
319
+ Deployment_Node(euEcs, "ECS Cluster", "Fargate") {
320
+ Container(euApi, "API", "Node.js", "EU instances")
321
+ }
322
+ Deployment_Node(euRds, "RDS", "Read Replica") {
323
+ ContainerDb(euReplica, "Replica DB", "PostgreSQL", "Read replica")
324
+ }
325
+ }
326
+
327
+ Rel(glb, usApi, "US traffic", "HTTPS")
328
+ Rel(glb, euApi, "EU traffic", "HTTPS")
329
+ Rel(usApi, usPrimary, "Reads/writes", "JDBC")
330
+ Rel(euApi, euReplica, "Reads", "JDBC")
331
+ Rel(euApi, usPrimary, "Writes", "JDBC")
332
+ Rel(usPrimary, euReplica, "Replicates", "Streaming")
333
+ ```
334
+
335
+ ## API Documentation Patterns
336
+
337
+ ### API Gateway Pattern
338
+
339
+ ```mermaid
340
+ C4Container
341
+ title API Gateway Architecture
342
+
343
+ Person(mobile, "Mobile User", "iOS/Android app user")
344
+ Person(web, "Web User", "Browser user")
345
+ Person(partner, "Partner", "Third-party integration")
346
+
347
+ Container(mobileApp, "Mobile App", "React Native", "Native mobile client")
348
+ Container(webApp, "Web App", "React", "SPA client")
349
+
350
+ Container_Boundary(apiPlatform, "API Platform") {
351
+ Container(gateway, "API Gateway", "Kong", "Auth, rate limit, routing")
352
+ Container(bff, "BFF", "Node.js", "Backend for frontend")
353
+
354
+ Container(userApi, "User API", "Java", "User management")
355
+ Container(orderApi, "Order API", "Go", "Order processing")
356
+ Container(productApi, "Product API", "Python", "Product catalog")
357
+ }
358
+
359
+ System_Ext(auth0, "Auth0", "Identity provider")
360
+
361
+ Rel(mobile, mobileApp, "Uses")
362
+ Rel(web, webApp, "Uses")
363
+ Rel(partner, gateway, "API calls", "REST/HTTPS")
364
+
365
+ Rel(mobileApp, bff, "GraphQL", "HTTPS")
366
+ Rel(webApp, bff, "GraphQL", "HTTPS")
367
+
368
+ Rel(bff, gateway, "REST calls", "HTTP")
369
+ Rel(gateway, auth0, "Validates tokens", "HTTPS")
370
+
371
+ Rel(gateway, userApi, "Routes /users/*", "HTTP")
372
+ Rel(gateway, orderApi, "Routes /orders/*", "HTTP")
373
+ Rel(gateway, productApi, "Routes /products/*", "HTTP")
374
+ ```
375
+
376
+ ### API Component Detail
377
+
378
+ ```mermaid
379
+ C4Component
380
+ title Order API - Component Diagram
381
+
382
+ Container(gateway, "API Gateway", "Kong")
383
+ ContainerDb(db, "Order DB", "PostgreSQL")
384
+ ContainerQueue(events, "Order Events", "Kafka")
385
+ System_Ext(payment, "Payment Service", "Stripe")
386
+
387
+ Container_Boundary(orderApi, "Order API") {
388
+ Component(controller, "Order Controller", "Spring MVC", "REST endpoints")
389
+ Component(validator, "Request Validator", "Bean Validation", "Input validation")
390
+ Component(service, "Order Service", "Spring Service", "Business logic")
391
+ Component(paymentClient, "Payment Client", "Feign", "Stripe integration")
392
+ Component(repository, "Order Repository", "Spring Data JPA", "Data access")
393
+ Component(publisher, "Event Publisher", "Spring Kafka", "Event publishing")
394
+ }
395
+
396
+ Rel(gateway, controller, "HTTP requests", "JSON")
397
+ Rel(controller, validator, "Validates")
398
+ Rel(controller, service, "Delegates")
399
+ Rel(service, paymentClient, "Charges")
400
+ Rel(service, repository, "Persists")
401
+ Rel(service, publisher, "Publishes events")
402
+
403
+ Rel(paymentClient, payment, "REST", "HTTPS")
404
+ Rel(repository, db, "JDBC", "SQL")
405
+ Rel(publisher, events, "Produces", "Avro")
406
+ ```
407
+
408
+ ## Supplementary Diagram Patterns
409
+
410
+ ### Authentication Flow (Dynamic)
411
+
412
+ ```mermaid
413
+ C4Dynamic
414
+ title OAuth2 Authorization Code Flow
415
+
416
+ Container(spa, "SPA", "React", "Web application")
417
+ Container(api, "API", "Node.js", "Resource server")
418
+ System_Ext(auth0, "Auth0", "Authorization server")
419
+ ContainerDb(db, "User DB", "PostgreSQL", "User data")
420
+
421
+ Rel(spa, auth0, "1. Redirect to /authorize")
422
+ Rel(auth0, spa, "2. Redirect with auth code")
423
+ Rel(spa, api, "3. Exchange code for tokens", "HTTPS")
424
+ Rel(api, auth0, "4. POST /oauth/token", "HTTPS")
425
+ Rel(api, spa, "5. Return access + refresh tokens")
426
+ Rel(spa, api, "6. API request with access token", "HTTPS")
427
+ Rel(api, db, "7. Fetch user data", "SQL")
428
+ ```
429
+
430
+ ### Error Handling Flow
431
+
432
+ ```mermaid
433
+ C4Dynamic
434
+ title Error Handling - Circuit Breaker
435
+
436
+ Container(api, "API", "Node.js")
437
+ Container(circuitBreaker, "Circuit Breaker", "Resilience4j")
438
+ System_Ext(payment, "Payment Service", "Stripe")
439
+ ContainerDb(fallback, "Fallback Cache", "Redis")
440
+
441
+ Rel(api, circuitBreaker, "1. Request payment")
442
+ Rel(circuitBreaker, payment, "2. Forward request", "HTTPS")
443
+ Rel(payment, circuitBreaker, "3a. Success response")
444
+ Rel(circuitBreaker, api, "4a. Return success")
445
+
446
+ Rel(payment, circuitBreaker, "3b. Timeout/Error")
447
+ Rel(circuitBreaker, fallback, "4b. Check cached response")
448
+ Rel(circuitBreaker, api, "5b. Return fallback or error")
449
+ ```
450
+
451
+ ## Architecture Decision Record Integration
452
+
453
+ Link C4 diagrams to Architecture Decision Records (ADRs):
454
+
455
+ ### ADR Reference in Diagrams
456
+
457
+ ```mermaid
458
+ C4Container
459
+ title System Architecture
460
+ %% See ADR-001 for API Gateway selection
461
+ %% See ADR-002 for database choice
462
+ %% See ADR-003 for event-driven approach
463
+
464
+ Container(gateway, "API Gateway", "Kong", "ADR-001: Selected for plugin ecosystem")
465
+ Container(api, "Order API", "Spring Boot", "Order processing")
466
+ ContainerDb(db, "Order DB", "PostgreSQL", "ADR-002: ACID compliance required")
467
+ ContainerQueue(events, "Events", "Kafka", "ADR-003: Event sourcing pattern")
468
+
469
+ Rel(gateway, api, "Routes", "HTTP")
470
+ Rel(api, db, "Persists", "JDBC")
471
+ Rel(api, events, "Publishes", "Avro")
472
+ ```
473
+
474
+ ### Directory Structure
475
+
476
+ Organize C4 diagrams with ADRs:
477
+
478
+ ```
479
+ docs/
480
+ ├── architecture/
481
+ │ ├── c4-context.md
482
+ │ ├── c4-containers.md
483
+ │ ├── c4-components-order-api.md
484
+ │ ├── c4-deployment-production.md
485
+ │ └── c4-dynamic-auth-flow.md
486
+ └── decisions/
487
+ ├── 001-api-gateway-selection.md
488
+ ├── 002-database-selection.md
489
+ ├── 003-event-driven-architecture.md
490
+ └── template.md
491
+ ```
492
+
493
+ ## System Landscape Diagram
494
+
495
+ For enterprise-level views showing multiple systems:
496
+
497
+ ```mermaid
498
+ C4Context
499
+ title Enterprise System Landscape
500
+
501
+ Person(customer, "Customer", "External customer")
502
+ Person(employee, "Employee", "Internal staff")
503
+ Person(partner, "Partner", "Business partner")
504
+
505
+ Enterprise_Boundary(enterprise, "Acme Corporation") {
506
+
507
+ Boundary(customerFacing, "Customer-Facing", "External") {
508
+ System(ecommerce, "E-commerce Platform", "Online store")
509
+ System(mobile, "Mobile App", "Customer mobile experience")
510
+ System(support, "Support Portal", "Customer service")
511
+ }
512
+
513
+ Boundary(internal, "Internal Systems", "Operations") {
514
+ System(erp, "ERP System", "SAP - Finance & operations")
515
+ System(crm, "CRM System", "Salesforce - Customer data")
516
+ System(analytics, "Analytics Platform", "Business intelligence")
517
+ }
518
+
519
+ Boundary(integration, "Integration Layer", "Middleware") {
520
+ System(esb, "Integration Hub", "MuleSoft - API management")
521
+ System(etl, "Data Pipeline", "Airflow - Data processing")
522
+ }
523
+ }
524
+
525
+ System_Ext(payment, "Payment Gateway", "Stripe")
526
+ System_Ext(shipping, "Shipping Provider", "FedEx")
527
+ System_Ext(warehouse, "Warehouse System", "3PL Partner")
528
+
529
+ Rel(customer, ecommerce, "Shops online")
530
+ Rel(customer, mobile, "Uses app")
531
+ Rel(customer, support, "Gets help")
532
+ Rel(employee, erp, "Manages operations")
533
+ Rel(employee, crm, "Manages customers")
534
+ Rel(partner, esb, "API integration")
535
+
536
+ Rel(ecommerce, esb, "API calls")
537
+ Rel(esb, erp, "Syncs orders")
538
+ Rel(esb, crm, "Syncs customers")
539
+ Rel(esb, payment, "Processes payments")
540
+ Rel(esb, shipping, "Creates shipments")
541
+ Rel(etl, analytics, "Feeds data")
542
+ ```
543
+
544
+ ## Best Practices Summary
545
+
546
+ 1. **Choose abstraction based on ownership**: Single team = containers, Multi-team = systems
547
+ 2. **Show individual message topics**: Not a single "Kafka" or "RabbitMQ" box
548
+ 3. **Use deployment diagrams for infrastructure**: Keep container diagrams logical
549
+ 4. **Create dynamic diagrams for complex flows**: Authentication, payment, error handling
550
+ 5. **Link to ADRs**: Document why decisions were made
551
+ 6. **Use system landscape for enterprise views**: Show all systems and their relationships
552
+ 7. **Keep diagrams focused**: One concern per diagram, split when complex