@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.
- package/.claude/commands/skills/discover.md +127 -0
- package/.claude/commands/skills/install.md +225 -0
- package/.claude/commands/skills/review.md +234 -0
- package/.claude/commands/utils/learn.md +142 -0
- package/.claude/commands/utils/retrospect.md +62 -0
- package/.claude/commands/utils/switch.md +113 -0
- package/.claude/commands/utils/sync.md +183 -0
- package/.claude/rules/common/general-rules.md +6 -0
- package/.claude/rules/role-rules/dev-be-rules.md +241 -0
- package/.claude/rules/role-rules/dev-fe-rules.md +76 -0
- package/.claude/skills/SKILL-INDEX.md +24 -5
- package/.claude/skills/core/knowledge-graph/SKILL.md +214 -0
- package/.claude/skills/core/sequential-thinking/SKILL.md +112 -0
- package/.claude/skills/core/sequential-thinking/references/advanced.md +122 -0
- package/.claude/skills/core/sequential-thinking/references/examples.md +274 -0
- package/.claude/skills/domain/architecture/c4-architecture/SKILL.md +314 -0
- package/.claude/skills/domain/architecture/c4-architecture/references/advanced-patterns.md +552 -0
- package/.claude/skills/domain/architecture/c4-architecture/references/c4-syntax.md +492 -0
- package/.claude/skills/domain/architecture/c4-architecture/references/common-mistakes.md +437 -0
- package/.claude/skills/domain/architecture/mermaid-diagrams/SKILL.md +238 -0
- package/.claude/skills/domain/architecture/mermaid-diagrams/references/advanced-features.md +556 -0
- package/.claude/skills/domain/architecture/mermaid-diagrams/references/architecture-diagrams.md +192 -0
- package/.claude/skills/domain/architecture/mermaid-diagrams/references/c4-diagrams.md +410 -0
- package/.claude/skills/domain/architecture/mermaid-diagrams/references/class-diagrams.md +361 -0
- package/.claude/skills/domain/architecture/mermaid-diagrams/references/erd-diagrams.md +510 -0
- package/.claude/skills/domain/architecture/mermaid-diagrams/references/flowcharts.md +450 -0
- package/.claude/skills/domain/architecture/mermaid-diagrams/references/sequence-diagrams.md +394 -0
- package/.claude/skills/domain/backend/testing-be/SKILL.md +121 -17
- package/.claude/skills/domain/design/design-system/SKILL.md +169 -0
- package/.claude/skills/domain/design/html-css-output/SKILL.md +253 -0
- package/.claude/skills/domain/design/mockup-creation/SKILL.md +230 -0
- package/.claude/skills/domain/design/responsive-design/SKILL.md +207 -0
- package/.claude/skills/domain/design/ui-design/SKILL.md +124 -0
- package/.claude/skills/domain/frontend/testing-fe/SKILL.md +143 -38
- package/.claude/skills/domain/frontend/ui-ux-pro-max/README.md +45 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/SKILL.md +404 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/data/charts.csv +26 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/data/colors.csv +97 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/data/icons.csv +101 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/data/landing.csv +31 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/data/products.csv +97 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/data/react-performance.csv +45 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/astro.csv +54 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/flutter.csv +53 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/html-tailwind.csv +56 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/jetpack-compose.csv +53 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/nextjs.csv +53 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/nuxt-ui.csv +51 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/nuxtjs.csv +59 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/react-native.csv +52 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/react.csv +54 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/shadcn.csv +61 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/svelte.csv +54 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/swiftui.csv +51 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/vue.csv +50 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/data/styles.csv +68 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/data/typography.csv +58 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/data/ui-reasoning.csv +101 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/data/ux-guidelines.csv +100 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/data/web-interface.csv +31 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/scripts/core.py +253 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/scripts/design_system.py +1067 -0
- package/.claude/skills/domain/frontend/ui-ux-pro-max/scripts/search.py +114 -0
- package/.claude/skills/domain/product/requirements-clarity/SKILL.md +340 -0
- package/.claude/skills/skills-registry.yaml +103 -8
- package/README.md +107 -33
- package/README.npm.md +252 -0
- package/TUTORIAL.md +256 -0
- package/bin/agent-team.js +26 -7
- package/config/roles.yaml +107 -0
- package/docs/01-architecture.md +699 -0
- package/docs/02-setup-guide.md +634 -0
- package/docs/03-skills-guide.md +628 -0
- package/docs/04-workflows.md +792 -0
- package/docs/05-model-strategy.md +550 -0
- package/docs/06-extend-guide.md +1226 -0
- package/docs/07-quick-reference.md +578 -0
- package/docs/08-skills-discovery.md +342 -0
- package/docs/README.md +134 -0
- package/docs/rqm.md +560 -0
- package/package.json +10 -4
- package/scripts/postinstall.js +46 -0
- package/src/commands/add.js +131 -67
- package/src/commands/init.js +419 -9
- package/src/commands/list.js +20 -16
- package/src/commands/projects.js +127 -0
- package/src/commands/setup-hooks.js +261 -0
- package/src/index.js +0 -1
- package/src/utils/file-utils.js +147 -50
- package/src/utils/global-registry.js +224 -0
- package/templates/CLAUDE.md.tmpl +128 -20
- package/templates/MEMORY.md.tmpl +119 -0
- package/templates/agent.md.tmpl +205 -0
- package/templates/code/nestjs-controller.ts.tmpl +49 -0
- package/templates/code/nestjs-dto.ts.tmpl +63 -0
- package/templates/code/nestjs-service.ts.tmpl +45 -0
- package/templates/code/react-component.tsx.tmpl +24 -0
- package/templates/code/react-hook.ts.tmpl +54 -0
- package/templates/code/test.spec.ts.tmpl +50 -0
- package/templates/code/vue-component.vue.tmpl +49 -0
- package/templates/code/vue-composable.ts.tmpl +54 -0
- package/templates/knowledge.md.tmpl +152 -17
- package/templates/meeting-notes.md.tmpl +110 -0
- package/templates/memory/hooks.memory.json +50 -0
- package/templates/memory/settings.memory.json +16 -0
- package/templates/reports/bug-report.md.tmpl +164 -0
- package/templates/reports/code-review.md.tmpl +201 -0
- package/templates/reports/sprint-report.md.tmpl +218 -0
- package/templates/roles/ba.md +53 -0
- package/templates/roles/designer.md +82 -0
- package/templates/roles/dev-be.md +49 -0
- package/templates/roles/dev-fe.md +49 -0
- package/templates/roles/devops.md +53 -0
- package/templates/roles/pm.md +49 -0
- package/templates/roles/qa.md +53 -0
- package/templates/roles/sa.md +49 -0
- package/templates/roles/tech-lead.md +132 -0
- package/templates/skills/memory/memory-status.md +78 -0
- package/templates/skills/memory/recall.md +160 -0
- package/templates/skills/memory/reflect.md +168 -0
- package/templates/skills/memory/remember.md +105 -0
- package/templates/tasks/lessons.md.tmpl +77 -0
- package/templates/tasks/todo.md.tmpl +53 -0
- 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
|