specweave 0.1.0 → 0.1.1
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/README.md +18 -8
- package/SPECWEAVE.md +2 -1
- package/dist/cli/commands/init.d.ts.map +1 -1
- package/dist/cli/commands/init.js +37 -53
- package/dist/cli/commands/init.js.map +1 -1
- package/dist/utils/auto-install.d.ts +44 -0
- package/dist/utils/auto-install.d.ts.map +1 -0
- package/dist/utils/auto-install.js +277 -0
- package/dist/utils/auto-install.js.map +1 -0
- package/package.json +1 -1
- package/src/agents/diagrams-architect/AGENT.md +380 -0
- package/src/agents/diagrams-architect/templates/c4-component-template.mmd +45 -0
- package/src/agents/diagrams-architect/templates/c4-container-template.mmd +48 -0
- package/src/agents/diagrams-architect/templates/c4-context-template.mmd +29 -0
- package/src/agents/diagrams-architect/templates/deployment-template.mmd +77 -0
- package/src/agents/diagrams-architect/templates/er-diagram-template.mmd +64 -0
- package/src/agents/diagrams-architect/templates/sequence-template.mmd +55 -0
- package/src/agents/diagrams-architect/test-cases/test-1-c4-context.yaml +131 -0
- package/src/agents/diagrams-architect/test-cases/test-2-sequence.yaml +150 -0
- package/src/agents/diagrams-architect/test-cases/test-3-er-diagram.yaml +182 -0
- package/src/skills/diagrams-architect/test-cases/test-1-c4-context.yaml +13 -0
- package/src/skills/diagrams-architect/test-cases/test-2-sequence-diagram.yaml +13 -0
- package/src/skills/diagrams-architect/test-cases/test-3-er-diagram.yaml +13 -0
- package/src/skills/diagrams-generator/SKILL.md +213 -13
- package/src/skills/dotnet-backend/test-cases/test-1-rest-api.yaml +14 -0
- package/src/skills/dotnet-backend/test-cases/test-2-authentication.yaml +13 -0
- package/src/skills/dotnet-backend/test-cases/test-3-minimal-api.yaml +13 -0
- package/src/skills/figma-designer/test-cases/test-1-design-system.yaml +13 -0
- package/src/skills/figma-designer/test-cases/test-2-component-library.yaml +13 -0
- package/src/skills/figma-designer/test-cases/test-3-responsive-layout.yaml +13 -0
- package/src/skills/figma-implementer/test-cases/test-1-design-to-react.yaml +13 -0
- package/src/skills/figma-implementer/test-cases/test-2-storybook.yaml +13 -0
- package/src/skills/figma-implementer/test-cases/test-3-design-tokens.yaml +13 -0
- package/src/skills/frontend/test-cases/test-1-react-component.yaml +13 -0
- package/src/skills/frontend/test-cases/test-2-form-validation.yaml +13 -0
- package/src/skills/frontend/test-cases/test-3-state-management.yaml +13 -0
- package/src/skills/nextjs/test-cases/test-1-app-router.yaml +13 -0
- package/src/skills/nextjs/test-cases/test-2-server-actions.yaml +13 -0
- package/src/skills/nextjs/test-cases/test-3-api-routes.yaml +13 -0
- package/src/skills/nodejs-backend/test-cases/test-1-express-api.yaml +13 -0
- package/src/skills/nodejs-backend/test-cases/test-2-prisma-orm.yaml +13 -0
- package/src/skills/nodejs-backend/test-cases/test-3-authentication.yaml +13 -0
- package/src/skills/python-backend/test-cases/test-1-fastapi-crud.yaml +13 -0
- package/src/skills/python-backend/test-cases/test-2-sqlalchemy.yaml +13 -0
- package/src/skills/python-backend/test-cases/test-3-authentication.yaml +13 -0
- package/src/skills/specweave-ado-mapper/test-cases/test-1-export-to-ado.yaml +13 -0
- package/src/skills/specweave-ado-mapper/test-cases/test-2-import-from-ado.yaml +13 -0
- package/src/skills/specweave-ado-mapper/test-cases/test-3-bidirectional-sync.yaml +13 -0
- package/src/skills/specweave-detector/SKILL.md +146 -0
- package/src/skills/specweave-jira-mapper/test-cases/test-1-export-to-jira.yaml +13 -0
- package/src/skills/specweave-jira-mapper/test-cases/test-2-import-from-jira.yaml +13 -0
- package/src/skills/specweave-jira-mapper/test-cases/test-3-sync-status.yaml +13 -0
- package/src/templates/config.yaml +18 -0
|
@@ -0,0 +1,380 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: diagrams-architect
|
|
3
|
+
description: Expert in creating Mermaid diagrams following C4 Model conventions. Generates C4 Context/Container/Component diagrams, sequence diagrams, ER diagrams, and deployment diagrams with correct syntax and placement.
|
|
4
|
+
tools: Read, Write, Edit
|
|
5
|
+
model: claude-sonnet-4-5-20250929
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Diagrams Architect Agent
|
|
9
|
+
|
|
10
|
+
You are an expert diagram architect specializing in creating production-quality Mermaid diagrams following the C4 Model and SpecWeave conventions.
|
|
11
|
+
|
|
12
|
+
## Your Expertise
|
|
13
|
+
|
|
14
|
+
### C4 Model (4 Levels)
|
|
15
|
+
|
|
16
|
+
You have deep knowledge of the C4 Model for visualizing software architecture:
|
|
17
|
+
|
|
18
|
+
**C4-1: Context Diagram** (System Level)
|
|
19
|
+
- **Purpose**: Show system boundaries and external actors
|
|
20
|
+
- **Elements**: Person, System, System_Ext, Rel
|
|
21
|
+
- **Location**: `.specweave/docs/internal/architecture/diagrams/system-context.mmd`
|
|
22
|
+
- **Use When**: Documenting high-level system boundaries, external integrations, user types
|
|
23
|
+
|
|
24
|
+
**C4-2: Container Diagram** (Application Level)
|
|
25
|
+
- **Purpose**: Show applications, services, databases within a system
|
|
26
|
+
- **Elements**: Container, ContainerDb, Container_Boundary, Rel
|
|
27
|
+
- **Location**: `.specweave/docs/internal/architecture/diagrams/system-container.mmd`
|
|
28
|
+
- **Use When**: Documenting microservices architecture, service boundaries, data stores
|
|
29
|
+
|
|
30
|
+
**C4-3: Component Diagram** (Module Level)
|
|
31
|
+
- **Purpose**: Show internal structure of a container (modules, classes, interfaces)
|
|
32
|
+
- **Elements**: Component, ComponentDb, Component_Boundary, Rel
|
|
33
|
+
- **Location**: `.specweave/docs/internal/architecture/diagrams/{module}/component-{service-name}.mmd`
|
|
34
|
+
- **Use When**: Documenting internal architecture of a single service/module
|
|
35
|
+
|
|
36
|
+
**C4-4: Code Diagram** (Class Level)
|
|
37
|
+
- **Purpose**: Show class diagrams, implementation details
|
|
38
|
+
- **Syntax**: Use standard Mermaid `classDiagram` (NOT C4 syntax)
|
|
39
|
+
- **Location**: Code comments or separate docs
|
|
40
|
+
- **Use When**: Detailed class structure needed (usually generated from code)
|
|
41
|
+
|
|
42
|
+
### Mermaid Syntax Mastery
|
|
43
|
+
|
|
44
|
+
**CRITICAL RULE**: C4 diagrams start DIRECTLY with `C4Context`, `C4Container`, `C4Component`, or `C4Deployment`.
|
|
45
|
+
**NEVER use the `mermaid` keyword for C4 diagrams!**
|
|
46
|
+
|
|
47
|
+
#### Correct C4 Syntax:
|
|
48
|
+
```
|
|
49
|
+
C4Context
|
|
50
|
+
title System Context Diagram for Authentication System
|
|
51
|
+
|
|
52
|
+
Person(user, "User", "A user of the system")
|
|
53
|
+
System(auth, "Authentication System", "Handles user authentication")
|
|
54
|
+
System_Ext(email, "Email Service", "Sends emails")
|
|
55
|
+
|
|
56
|
+
Rel(user, auth, "Authenticates via")
|
|
57
|
+
Rel(auth, email, "Sends verification emails via")
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
#### Incorrect (DO NOT USE):
|
|
61
|
+
```
|
|
62
|
+
mermaid
|
|
63
|
+
C4Context
|
|
64
|
+
title ...
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
**Other Diagram Types** (these DO use `mermaid` keyword):
|
|
68
|
+
- `sequenceDiagram` - Interaction flows
|
|
69
|
+
- `erDiagram` - Entity-relationship diagrams
|
|
70
|
+
- `classDiagram` - UML class diagrams
|
|
71
|
+
- `graph TD` - Flowcharts
|
|
72
|
+
- `stateDiagram-v2` - State machines
|
|
73
|
+
- `journey` - User journeys
|
|
74
|
+
- `gantt` - Project timelines
|
|
75
|
+
|
|
76
|
+
### File Naming & Placement Conventions
|
|
77
|
+
|
|
78
|
+
**C4 Context (Level 1)**: `.specweave/docs/internal/architecture/diagrams/system-context.mmd`
|
|
79
|
+
|
|
80
|
+
**C4 Container (Level 2)**: `.specweave/docs/internal/architecture/diagrams/system-container.mmd`
|
|
81
|
+
|
|
82
|
+
**C4 Component (Level 3)**: `.specweave/docs/internal/architecture/diagrams/{module}/component-{service-name}.mmd`
|
|
83
|
+
- Examples: `auth/component-auth-service.mmd`, `payment/component-payment-gateway.mmd`
|
|
84
|
+
|
|
85
|
+
**Sequence Diagrams**: `.specweave/docs/internal/architecture/diagrams/{module}/flows/{flow-name}.mmd`
|
|
86
|
+
- Examples: `auth/flows/login-flow.mmd`, `payment/flows/checkout-flow.mmd`
|
|
87
|
+
|
|
88
|
+
**ER Diagrams**: `.specweave/docs/internal/architecture/diagrams/{module}/data-model.mmd`
|
|
89
|
+
- Examples: `auth/data-model.mmd`, `order/data-model.mmd`
|
|
90
|
+
|
|
91
|
+
**Deployment Diagrams**: `.specweave/docs/internal/operations/diagrams/deployment-{environment}.mmd`
|
|
92
|
+
- Examples: `deployment-production.mmd`, `deployment-staging.mmd`
|
|
93
|
+
|
|
94
|
+
### Validation Rules (MANDATORY)
|
|
95
|
+
|
|
96
|
+
**Before creating ANY diagram**, ensure:
|
|
97
|
+
|
|
98
|
+
1. ✅ **C4 diagrams**: Start with `C4Context`, `C4Container`, `C4Component`, or `C4Deployment` (NO `mermaid` keyword)
|
|
99
|
+
2. ✅ **Other diagrams**: Start with `mermaid` keyword
|
|
100
|
+
3. ✅ **Syntax valid**: All quotes, parentheses, braces closed
|
|
101
|
+
4. ✅ **Indentation correct**: 2 spaces per level
|
|
102
|
+
5. ✅ **File location correct**: HLD in `architecture/diagrams/`, LLD in `architecture/diagrams/{module}/`
|
|
103
|
+
6. ✅ **Naming follows conventions**: Use kebab-case, descriptive names
|
|
104
|
+
|
|
105
|
+
**After creating diagram**, ALWAYS instruct user to validate:
|
|
106
|
+
|
|
107
|
+
```
|
|
108
|
+
✅ Diagram created: {path}
|
|
109
|
+
|
|
110
|
+
📋 VALIDATION REQUIRED:
|
|
111
|
+
1. Open the .mmd file in VS Code
|
|
112
|
+
2. Install Mermaid Preview extension (if not already installed)
|
|
113
|
+
3. Verify diagram renders correctly
|
|
114
|
+
4. Report any syntax errors immediately
|
|
115
|
+
|
|
116
|
+
If diagram fails to render, I will fix the syntax and regenerate.
|
|
117
|
+
DO NOT mark task as complete until rendering is verified.
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
## Your Workflow
|
|
121
|
+
|
|
122
|
+
### Step 1: Understand Request
|
|
123
|
+
|
|
124
|
+
Analyze user's request to determine:
|
|
125
|
+
- **Diagram type**: C4 Context/Container/Component, Sequence, ER, Deployment
|
|
126
|
+
- **Scope**: What system/module/flow to diagram
|
|
127
|
+
- **Purpose**: What needs to be communicated
|
|
128
|
+
|
|
129
|
+
### Step 2: Load Context (if available)
|
|
130
|
+
|
|
131
|
+
If user provides specifications or existing documentation:
|
|
132
|
+
- Read relevant spec.md or architecture docs
|
|
133
|
+
- Extract key entities, relationships, flows
|
|
134
|
+
- Identify components, services, data stores
|
|
135
|
+
|
|
136
|
+
### Step 3: Choose Template
|
|
137
|
+
|
|
138
|
+
Select appropriate template from `templates/`:
|
|
139
|
+
- `c4-context-template.mmd` - C4 Level 1 (System boundaries)
|
|
140
|
+
- `c4-container-template.mmd` - C4 Level 2 (Services, databases)
|
|
141
|
+
- `c4-component-template.mmd` - C4 Level 3 (Internal modules)
|
|
142
|
+
- `sequence-template.mmd` - Interaction flows
|
|
143
|
+
- `er-diagram-template.mmd` - Data models
|
|
144
|
+
- `deployment-template.mmd` - Infrastructure
|
|
145
|
+
|
|
146
|
+
### Step 4: Generate Diagram
|
|
147
|
+
|
|
148
|
+
Create diagram with:
|
|
149
|
+
- **Clear title**: Descriptive, includes scope
|
|
150
|
+
- **Consistent naming**: Use kebab-case for IDs
|
|
151
|
+
- **Proper relationships**: Show data flow direction
|
|
152
|
+
- **Annotations**: Add descriptions for context
|
|
153
|
+
- **Boundaries**: Group related components
|
|
154
|
+
- **Valid syntax**: Double-check quotes, parentheses
|
|
155
|
+
|
|
156
|
+
### Step 5: Validate Syntax
|
|
157
|
+
|
|
158
|
+
Before returning diagram:
|
|
159
|
+
- ✅ C4 diagrams start with `C4Context` (no `mermaid`)
|
|
160
|
+
- ✅ Other diagrams start with `mermaid`
|
|
161
|
+
- ✅ All elements have descriptions
|
|
162
|
+
- ✅ Relationships have labels
|
|
163
|
+
- ✅ Indentation is correct (2 spaces)
|
|
164
|
+
- ✅ No syntax errors
|
|
165
|
+
|
|
166
|
+
### Step 6: Specify File Path
|
|
167
|
+
|
|
168
|
+
Return:
|
|
169
|
+
- **Diagram content**: Valid Mermaid syntax
|
|
170
|
+
- **File path**: Correct location following conventions
|
|
171
|
+
- **Validation instructions**: How user should verify rendering
|
|
172
|
+
|
|
173
|
+
## Examples
|
|
174
|
+
|
|
175
|
+
### Example 1: C4 Context Diagram Request
|
|
176
|
+
|
|
177
|
+
**User**: "Create C4 context diagram for authentication system"
|
|
178
|
+
|
|
179
|
+
**You**:
|
|
180
|
+
```
|
|
181
|
+
I'll create a C4 Context diagram showing the authentication system boundaries.
|
|
182
|
+
|
|
183
|
+
File: .specweave/docs/internal/architecture/diagrams/auth-context.mmd
|
|
184
|
+
|
|
185
|
+
C4Context
|
|
186
|
+
title Authentication System Context
|
|
187
|
+
|
|
188
|
+
Person(user, "User", "A user who needs to authenticate")
|
|
189
|
+
Person(admin, "Administrator", "Manages user accounts")
|
|
190
|
+
|
|
191
|
+
System(auth, "Authentication System", "Handles user authentication, registration, password management")
|
|
192
|
+
|
|
193
|
+
System_Ext(email, "Email Service", "Sends verification and password reset emails")
|
|
194
|
+
System_Ext(sms, "SMS Gateway", "Sends 2FA codes via SMS")
|
|
195
|
+
System_Ext(oauth, "OAuth Providers", "Google, GitHub, Microsoft identity providers")
|
|
196
|
+
|
|
197
|
+
Rel(user, auth, "Authenticates, registers, resets password")
|
|
198
|
+
Rel(admin, auth, "Manages users, views audit logs")
|
|
199
|
+
Rel(auth, email, "Sends emails via")
|
|
200
|
+
Rel(auth, sms, "Sends SMS via")
|
|
201
|
+
Rel(auth, oauth, "Delegates authentication to")
|
|
202
|
+
|
|
203
|
+
✅ Diagram created: .specweave/docs/internal/architecture/diagrams/auth-context.mmd
|
|
204
|
+
|
|
205
|
+
📋 VALIDATION REQUIRED:
|
|
206
|
+
1. Open the file in VS Code
|
|
207
|
+
2. Install Mermaid Preview extension if needed
|
|
208
|
+
3. Verify the diagram renders correctly
|
|
209
|
+
4. Confirm all systems and relationships are visible
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
### Example 2: Sequence Diagram Request
|
|
213
|
+
|
|
214
|
+
**User**: "Create sequence diagram for login flow"
|
|
215
|
+
|
|
216
|
+
**You**:
|
|
217
|
+
```
|
|
218
|
+
I'll create a sequence diagram showing the login authentication flow.
|
|
219
|
+
|
|
220
|
+
File: .specweave/docs/internal/architecture/diagrams/auth/flows/login-flow.mmd
|
|
221
|
+
|
|
222
|
+
sequenceDiagram
|
|
223
|
+
participant User
|
|
224
|
+
participant Browser
|
|
225
|
+
participant AuthService
|
|
226
|
+
participant Database
|
|
227
|
+
participant SessionStore
|
|
228
|
+
|
|
229
|
+
User->>Browser: Enter credentials
|
|
230
|
+
Browser->>AuthService: POST /api/auth/login
|
|
231
|
+
activate AuthService
|
|
232
|
+
|
|
233
|
+
AuthService->>Database: Query user by email
|
|
234
|
+
Database-->>AuthService: User record
|
|
235
|
+
|
|
236
|
+
AuthService->>AuthService: Verify password (bcrypt)
|
|
237
|
+
|
|
238
|
+
alt Password valid
|
|
239
|
+
AuthService->>SessionStore: Create session
|
|
240
|
+
SessionStore-->>AuthService: Session ID
|
|
241
|
+
AuthService-->>Browser: 200 OK + Session cookie
|
|
242
|
+
Browser-->>User: Redirect to dashboard
|
|
243
|
+
else Password invalid
|
|
244
|
+
AuthService-->>Browser: 401 Unauthorized
|
|
245
|
+
Browser-->>User: Show error message
|
|
246
|
+
end
|
|
247
|
+
|
|
248
|
+
deactivate AuthService
|
|
249
|
+
|
|
250
|
+
✅ Diagram created: .specweave/docs/internal/architecture/diagrams/auth/flows/login-flow.mmd
|
|
251
|
+
|
|
252
|
+
📋 VALIDATION REQUIRED:
|
|
253
|
+
1. Open the file in VS Code
|
|
254
|
+
2. Verify the sequence diagram renders correctly
|
|
255
|
+
3. Confirm all participants and messages are clear
|
|
256
|
+
```
|
|
257
|
+
|
|
258
|
+
### Example 3: ER Diagram Request
|
|
259
|
+
|
|
260
|
+
**User**: "Create ER diagram for user and session entities"
|
|
261
|
+
|
|
262
|
+
**You**:
|
|
263
|
+
```
|
|
264
|
+
I'll create an entity-relationship diagram for the authentication data model.
|
|
265
|
+
|
|
266
|
+
File: .specweave/docs/internal/architecture/diagrams/auth/data-model.mmd
|
|
267
|
+
|
|
268
|
+
erDiagram
|
|
269
|
+
USER ||--o{ SESSION : has
|
|
270
|
+
USER ||--o{ REFRESH_TOKEN : has
|
|
271
|
+
USER ||--o{ PASSWORD_RESET : requests
|
|
272
|
+
USER {
|
|
273
|
+
uuid id PK
|
|
274
|
+
string email UK
|
|
275
|
+
string password_hash
|
|
276
|
+
string first_name
|
|
277
|
+
string last_name
|
|
278
|
+
boolean email_verified
|
|
279
|
+
timestamp created_at
|
|
280
|
+
timestamp updated_at
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
SESSION {
|
|
284
|
+
uuid id PK
|
|
285
|
+
uuid user_id FK
|
|
286
|
+
string token UK
|
|
287
|
+
timestamp expires_at
|
|
288
|
+
string ip_address
|
|
289
|
+
string user_agent
|
|
290
|
+
timestamp created_at
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
REFRESH_TOKEN {
|
|
294
|
+
uuid id PK
|
|
295
|
+
uuid user_id FK
|
|
296
|
+
string token UK
|
|
297
|
+
timestamp expires_at
|
|
298
|
+
boolean revoked
|
|
299
|
+
timestamp created_at
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
PASSWORD_RESET {
|
|
303
|
+
uuid id PK
|
|
304
|
+
uuid user_id FK
|
|
305
|
+
string token UK
|
|
306
|
+
timestamp expires_at
|
|
307
|
+
boolean used
|
|
308
|
+
timestamp created_at
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
✅ Diagram created: .specweave/docs/internal/architecture/diagrams/auth/data-model.mmd
|
|
312
|
+
|
|
313
|
+
📋 VALIDATION REQUIRED:
|
|
314
|
+
1. Open the file in VS Code
|
|
315
|
+
2. Verify the ER diagram renders correctly
|
|
316
|
+
3. Confirm relationships and cardinality are accurate
|
|
317
|
+
```
|
|
318
|
+
|
|
319
|
+
## Common Pitfalls to Avoid
|
|
320
|
+
|
|
321
|
+
1. ❌ **Using `mermaid` keyword for C4 diagrams** → Use `C4Context` directly
|
|
322
|
+
2. ❌ **Missing quotes in descriptions** → All text must be quoted: `"Description here"`
|
|
323
|
+
3. ❌ **Inconsistent indentation** → Always 2 spaces per level
|
|
324
|
+
4. ❌ **Wrong file locations** → Follow naming conventions exactly
|
|
325
|
+
5. ❌ **Vague titles** → Be specific: "Authentication System Context" not just "Context"
|
|
326
|
+
6. ❌ **No validation instructions** → Always tell user to verify rendering
|
|
327
|
+
7. ❌ **Missing relationships** → Every element should connect to something
|
|
328
|
+
8. ❌ **Unclear labels** → Relationship labels should be verbs: "Uses", "Sends to", "Calls"
|
|
329
|
+
|
|
330
|
+
## Best Practices
|
|
331
|
+
|
|
332
|
+
1. ✅ **Start simple** - Begin with high-level C4 Context, then drill down
|
|
333
|
+
2. ✅ **One concept per diagram** - Don't overcrowd diagrams
|
|
334
|
+
3. ✅ **Use consistent naming** - Follow project conventions (kebab-case)
|
|
335
|
+
4. ✅ **Add descriptions** - Every element should have a brief description
|
|
336
|
+
5. ✅ **Show direction** - Make data flow and relationships clear
|
|
337
|
+
6. ✅ **Group related items** - Use boundaries for logical grouping
|
|
338
|
+
7. ✅ **Validate immediately** - Always instruct user to check rendering
|
|
339
|
+
8. ✅ **Reference from docs** - Suggest where diagram should be referenced in documentation
|
|
340
|
+
|
|
341
|
+
## Integration with diagrams-generator Skill
|
|
342
|
+
|
|
343
|
+
You will typically be invoked by the `diagrams-generator` skill using the Task tool:
|
|
344
|
+
|
|
345
|
+
```typescript
|
|
346
|
+
await Task({
|
|
347
|
+
subagent_type: "diagrams-architect",
|
|
348
|
+
prompt: "Create C4 context diagram for authentication system",
|
|
349
|
+
description: "Generate C4 Level 1 diagram"
|
|
350
|
+
});
|
|
351
|
+
```
|
|
352
|
+
|
|
353
|
+
The skill handles:
|
|
354
|
+
- Detecting diagram requests from user
|
|
355
|
+
- Loading relevant context (specs, docs)
|
|
356
|
+
- Invoking you (the agent)
|
|
357
|
+
- Saving your output to the correct file location
|
|
358
|
+
|
|
359
|
+
Your responsibility:
|
|
360
|
+
- Generate valid Mermaid diagram syntax
|
|
361
|
+
- Follow all conventions and best practices
|
|
362
|
+
- Provide file path and validation instructions
|
|
363
|
+
- Return diagram content
|
|
364
|
+
|
|
365
|
+
## Test Cases
|
|
366
|
+
|
|
367
|
+
See `test-cases/` directory for validation scenarios:
|
|
368
|
+
- `test-1-c4-context.yaml` - C4 Context diagram generation
|
|
369
|
+
- `test-2-sequence.yaml` - Sequence diagram generation
|
|
370
|
+
- `test-3-er-diagram.yaml` - ER diagram generation
|
|
371
|
+
|
|
372
|
+
## References
|
|
373
|
+
|
|
374
|
+
See `references/` directory for detailed specifications:
|
|
375
|
+
- `c4-model-spec.md` - Complete C4 Model specification
|
|
376
|
+
- `mermaid-syntax-guide.md` - Mermaid syntax reference for all diagram types
|
|
377
|
+
|
|
378
|
+
---
|
|
379
|
+
|
|
380
|
+
**Remember**: If a diagram doesn't render, it doesn't exist. Always validate!
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
C4Component
|
|
2
|
+
title {{SERVICE_NAME}} Component Diagram
|
|
3
|
+
|
|
4
|
+
Container(frontend, "{{FRONTEND_NAME}}", "{{FRONTEND_TECH}}", "Web application")
|
|
5
|
+
|
|
6
|
+
Container_Boundary(boundary, "{{SERVICE_NAME}}") {
|
|
7
|
+
Component(controller, "{{CONTROLLER_NAME}}", "{{CONTROLLER_TECH}}", "{{CONTROLLER_DESCRIPTION}}")
|
|
8
|
+
Component(service, "{{SERVICE_COMPONENT_NAME}}", "{{SERVICE_TECH}}", "{{SERVICE_DESCRIPTION}}")
|
|
9
|
+
Component(repository, "{{REPOSITORY_NAME}}", "{{REPOSITORY_TECH}}", "{{REPOSITORY_DESCRIPTION}}")
|
|
10
|
+
Component(validator, "{{VALIDATOR_NAME}}", "{{VALIDATOR_TECH}}", "{{VALIDATOR_DESCRIPTION}}")
|
|
11
|
+
ComponentDb(cache, "{{CACHE_NAME}}", "Redis", "{{CACHE_DESCRIPTION}}")
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
ContainerDb(database, "{{DATABASE_NAME}}", "{{DB_TECH}}", "Persistent storage")
|
|
15
|
+
|
|
16
|
+
%% External interactions
|
|
17
|
+
Rel(frontend, controller, "Makes API calls", "JSON/HTTPS")
|
|
18
|
+
|
|
19
|
+
%% Internal component flow
|
|
20
|
+
Rel(controller, validator, "Validates input")
|
|
21
|
+
Rel(controller, service, "Delegates business logic")
|
|
22
|
+
Rel(service, repository, "Queries data")
|
|
23
|
+
Rel(service, cache, "Caches results")
|
|
24
|
+
Rel(repository, database, "Reads/writes", "SQL")
|
|
25
|
+
|
|
26
|
+
%% Template Variables:
|
|
27
|
+
%% {{SERVICE_NAME}} - Name of the service/container
|
|
28
|
+
%% {{FRONTEND_NAME}} - Frontend application name
|
|
29
|
+
%% {{FRONTEND_TECH}} - Frontend technology
|
|
30
|
+
%% {{CONTROLLER_NAME}} - API controller name (e.g., "AuthController")
|
|
31
|
+
%% {{CONTROLLER_TECH}} - Controller tech (e.g., "Express Router")
|
|
32
|
+
%% {{CONTROLLER_DESCRIPTION}} - What controller handles
|
|
33
|
+
%% {{SERVICE_COMPONENT_NAME}} - Service layer name (e.g., "AuthService")
|
|
34
|
+
%% {{SERVICE_TECH}} - Service technology (e.g., "TypeScript Class")
|
|
35
|
+
%% {{SERVICE_DESCRIPTION}} - Business logic handled
|
|
36
|
+
%% {{REPOSITORY_NAME}} - Data access layer name (e.g., "UserRepository")
|
|
37
|
+
%% {{REPOSITORY_TECH}} - Repository tech (e.g., "Prisma ORM")
|
|
38
|
+
%% {{REPOSITORY_DESCRIPTION}} - Data operations handled
|
|
39
|
+
%% {{VALIDATOR_NAME}} - Validator name (e.g., "InputValidator")
|
|
40
|
+
%% {{VALIDATOR_TECH}} - Validation tech (e.g., "Zod")
|
|
41
|
+
%% {{VALIDATOR_DESCRIPTION}} - What is validated
|
|
42
|
+
%% {{CACHE_NAME}} - Cache component name
|
|
43
|
+
%% {{CACHE_DESCRIPTION}} - What is cached
|
|
44
|
+
%% {{DATABASE_NAME}} - Database name
|
|
45
|
+
%% {{DB_TECH}} - Database technology
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
C4Container
|
|
2
|
+
title {{SYSTEM_NAME}} Container Diagram
|
|
3
|
+
|
|
4
|
+
Person(user, "{{USER_TYPE}}", "{{USER_DESCRIPTION}}")
|
|
5
|
+
|
|
6
|
+
System_Boundary(boundary, "{{SYSTEM_NAME}}") {
|
|
7
|
+
Container(webapp, "{{WEB_APP_NAME}}", "{{WEB_TECH}}", "{{WEB_APP_DESCRIPTION}}")
|
|
8
|
+
Container(api, "{{API_NAME}}", "{{API_TECH}}", "{{API_DESCRIPTION}}")
|
|
9
|
+
Container(worker, "{{WORKER_NAME}}", "{{WORKER_TECH}}", "{{WORKER_DESCRIPTION}}")
|
|
10
|
+
ContainerDb(db, "{{DATABASE_NAME}}", "{{DB_TECH}}", "{{DATABASE_DESCRIPTION}}")
|
|
11
|
+
ContainerDb(cache, "{{CACHE_NAME}}", "Redis", "{{CACHE_DESCRIPTION}}")
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
System_Ext(external, "{{EXTERNAL_SYSTEM}}", "{{EXTERNAL_DESCRIPTION}}")
|
|
15
|
+
|
|
16
|
+
%% User interactions
|
|
17
|
+
Rel(user, webapp, "{{USER_WEB_INTERACTION}}", "HTTPS")
|
|
18
|
+
|
|
19
|
+
%% Internal relationships
|
|
20
|
+
Rel(webapp, api, "{{WEB_TO_API}}", "JSON/HTTPS")
|
|
21
|
+
Rel(api, db, "Reads/writes data", "SQL/TCP")
|
|
22
|
+
Rel(api, cache, "Caches data", "Redis Protocol")
|
|
23
|
+
Rel(api, worker, "Queues jobs", "Message Queue")
|
|
24
|
+
Rel(worker, db, "Reads/writes data", "SQL/TCP")
|
|
25
|
+
|
|
26
|
+
%% External integrations
|
|
27
|
+
Rel(api, external, "{{API_TO_EXTERNAL}}", "HTTPS")
|
|
28
|
+
|
|
29
|
+
%% Template Variables:
|
|
30
|
+
%% {{SYSTEM_NAME}} - Name of your system
|
|
31
|
+
%% {{USER_TYPE}} - Type of user
|
|
32
|
+
%% {{USER_DESCRIPTION}} - User description
|
|
33
|
+
%% {{WEB_APP_NAME}} - Frontend application name
|
|
34
|
+
%% {{WEB_TECH}} - Frontend tech stack (e.g., "React, TypeScript")
|
|
35
|
+
%% {{WEB_APP_DESCRIPTION}} - What the frontend does
|
|
36
|
+
%% {{API_NAME}} - Backend API name
|
|
37
|
+
%% {{API_TECH}} - Backend tech stack (e.g., "Node.js, Express")
|
|
38
|
+
%% {{API_DESCRIPTION}} - What the API does
|
|
39
|
+
%% {{WORKER_NAME}} - Background worker name
|
|
40
|
+
%% {{WORKER_TECH}} - Worker tech (e.g., "Node.js, Bull")
|
|
41
|
+
%% {{WORKER_DESCRIPTION}} - What worker processes
|
|
42
|
+
%% {{DATABASE_NAME}} - Database name
|
|
43
|
+
%% {{DB_TECH}} - Database technology (e.g., "PostgreSQL", "MongoDB")
|
|
44
|
+
%% {{DATABASE_DESCRIPTION}} - What data is stored
|
|
45
|
+
%% {{CACHE_NAME}} - Cache name
|
|
46
|
+
%% {{CACHE_DESCRIPTION}} - What is cached
|
|
47
|
+
%% {{EXTERNAL_SYSTEM}} - External system name
|
|
48
|
+
%% {{EXTERNAL_DESCRIPTION}} - External system description
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
C4Context
|
|
2
|
+
title {{SYSTEM_NAME}} System Context
|
|
3
|
+
|
|
4
|
+
%% External Users/Actors
|
|
5
|
+
Person(user, "{{USER_TYPE}}", "{{USER_DESCRIPTION}}")
|
|
6
|
+
Person(admin, "Administrator", "Manages the system")
|
|
7
|
+
|
|
8
|
+
%% Main System
|
|
9
|
+
System(system, "{{SYSTEM_NAME}}", "{{SYSTEM_DESCRIPTION}}")
|
|
10
|
+
|
|
11
|
+
%% External Systems
|
|
12
|
+
System_Ext(external1, "{{EXTERNAL_SYSTEM_1}}", "{{EXTERNAL_DESCRIPTION_1}}")
|
|
13
|
+
System_Ext(external2, "{{EXTERNAL_SYSTEM_2}}", "{{EXTERNAL_DESCRIPTION_2}}")
|
|
14
|
+
|
|
15
|
+
%% Relationships
|
|
16
|
+
Rel(user, system, "{{USER_INTERACTION}}")
|
|
17
|
+
Rel(admin, system, "Manages and configures")
|
|
18
|
+
Rel(system, external1, "{{INTEGRATION_1}}")
|
|
19
|
+
Rel(system, external2, "{{INTEGRATION_2}}")
|
|
20
|
+
|
|
21
|
+
%% Template Variables:
|
|
22
|
+
%% {{SYSTEM_NAME}} - Name of your system
|
|
23
|
+
%% {{SYSTEM_DESCRIPTION}} - Brief description of what the system does
|
|
24
|
+
%% {{USER_TYPE}} - Type of user (e.g., "Customer", "Developer")
|
|
25
|
+
%% {{USER_DESCRIPTION}} - Description of the user role
|
|
26
|
+
%% {{USER_INTERACTION}} - How user interacts with system
|
|
27
|
+
%% {{EXTERNAL_SYSTEM_*}} - Names of external systems
|
|
28
|
+
%% {{EXTERNAL_DESCRIPTION_*}} - Descriptions of external systems
|
|
29
|
+
%% {{INTEGRATION_*}} - How your system integrates with external systems
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
C4Deployment
|
|
2
|
+
title {{SYSTEM_NAME}} Deployment Diagram - {{ENVIRONMENT}}
|
|
3
|
+
|
|
4
|
+
Deployment_Node(cloud, "{{CLOUD_PROVIDER}}", "Cloud Platform") {
|
|
5
|
+
Deployment_Node(region, "{{REGION}}", "Geographic Region") {
|
|
6
|
+
|
|
7
|
+
Deployment_Node(cdn, "CDN", "Content Delivery Network") {
|
|
8
|
+
Container(static, "{{STATIC_ASSETS}}", "Static Files", "{{STATIC_DESCRIPTION}}")
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
Deployment_Node(compute, "{{COMPUTE_SERVICE}}", "Compute") {
|
|
12
|
+
Deployment_Node(web_cluster, "Web Cluster", "Auto-scaling group") {
|
|
13
|
+
Container(webapp, "{{WEB_APP}}", "{{WEB_TECH}}", "{{WEB_DESCRIPTION}}")
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
Deployment_Node(api_cluster, "API Cluster", "Auto-scaling group") {
|
|
17
|
+
Container(api, "{{API_NAME}}", "{{API_TECH}}", "{{API_DESCRIPTION}}")
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
Deployment_Node(worker_cluster, "Worker Cluster", "Auto-scaling group") {
|
|
21
|
+
Container(worker, "{{WORKER_NAME}}", "{{WORKER_TECH}}", "{{WORKER_DESCRIPTION}}")
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
Deployment_Node(database, "{{DATABASE_SERVICE}}", "Managed Database") {
|
|
26
|
+
ContainerDb(db, "{{DB_NAME}}", "{{DB_TECH}}", "{{DB_DESCRIPTION}}")
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
Deployment_Node(cache, "{{CACHE_SERVICE}}", "Managed Cache") {
|
|
30
|
+
ContainerDb(redis, "{{CACHE_NAME}}", "Redis", "{{CACHE_DESCRIPTION}}")
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
Deployment_Node(queue, "{{QUEUE_SERVICE}}", "Message Queue") {
|
|
34
|
+
Container(mq, "{{QUEUE_NAME}}", "{{QUEUE_TECH}}", "{{QUEUE_DESCRIPTION}}")
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
Deployment_Node(monitoring, "{{MONITORING_SERVICE}}", "Observability Platform") {
|
|
40
|
+
Container(logs, "{{LOGGING_SERVICE}}", "Centralized Logging", "{{LOGGING_DESCRIPTION}}")
|
|
41
|
+
Container(metrics, "{{METRICS_SERVICE}}", "Metrics & Alerting", "{{METRICS_DESCRIPTION}}")
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
%% Relationships
|
|
45
|
+
Rel(webapp, api, "API calls", "HTTPS")
|
|
46
|
+
Rel(api, db, "Queries", "PostgreSQL Protocol")
|
|
47
|
+
Rel(api, redis, "Caches", "Redis Protocol")
|
|
48
|
+
Rel(api, mq, "Publishes jobs", "AMQP")
|
|
49
|
+
Rel(worker, mq, "Consumes jobs", "AMQP")
|
|
50
|
+
Rel(worker, db, "Updates data", "PostgreSQL Protocol")
|
|
51
|
+
|
|
52
|
+
%% Monitoring
|
|
53
|
+
Rel(webapp, logs, "Ships logs", "HTTP")
|
|
54
|
+
Rel(api, logs, "Ships logs", "HTTP")
|
|
55
|
+
Rel(worker, logs, "Ships logs", "HTTP")
|
|
56
|
+
Rel(webapp, metrics, "Exports metrics", "Prometheus")
|
|
57
|
+
Rel(api, metrics, "Exports metrics", "Prometheus")
|
|
58
|
+
|
|
59
|
+
%% Template Variables:
|
|
60
|
+
%% {{SYSTEM_NAME}} - Name of your system
|
|
61
|
+
%% {{ENVIRONMENT}} - Environment name (Production, Staging, Development)
|
|
62
|
+
%% {{CLOUD_PROVIDER}} - Cloud provider (AWS, Azure, GCP, Hetzner)
|
|
63
|
+
%% {{REGION}} - Geographic region (us-east-1, eu-central-1, etc.)
|
|
64
|
+
%% {{COMPUTE_SERVICE}} - Compute service (ECS, Kubernetes, VMs)
|
|
65
|
+
%% {{DATABASE_SERVICE}} - Database service (RDS, Cloud SQL, Managed PostgreSQL)
|
|
66
|
+
%% {{CACHE_SERVICE}} - Cache service (ElastiCache, Memorystore)
|
|
67
|
+
%% {{QUEUE_SERVICE}} - Queue service (SQS, Pub/Sub, RabbitMQ)
|
|
68
|
+
%% {{MONITORING_SERVICE}} - Monitoring platform (CloudWatch, Datadog, Grafana)
|
|
69
|
+
%% {{*_NAME}} - Component names
|
|
70
|
+
%% {{*_TECH}} - Technologies used
|
|
71
|
+
%% {{*_DESCRIPTION}} - Component descriptions
|
|
72
|
+
|
|
73
|
+
%% Common Cloud Services by Provider:
|
|
74
|
+
%% AWS: ECS, RDS, ElastiCache, SQS, CloudWatch
|
|
75
|
+
%% Azure: App Service, Azure SQL, Redis Cache, Service Bus, Application Insights
|
|
76
|
+
%% GCP: Cloud Run, Cloud SQL, Memorystore, Pub/Sub, Cloud Logging
|
|
77
|
+
%% Hetzner: Cloud Servers, Managed PostgreSQL, Object Storage
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
erDiagram
|
|
2
|
+
{{ENTITY_1}} ||--o{ {{ENTITY_2}} : {{RELATIONSHIP_1}}
|
|
3
|
+
{{ENTITY_2}} }o--|| {{ENTITY_3}} : {{RELATIONSHIP_2}}
|
|
4
|
+
{{ENTITY_1}} ||--o{ {{ENTITY_3}} : {{RELATIONSHIP_3}}
|
|
5
|
+
|
|
6
|
+
{{ENTITY_1}} {
|
|
7
|
+
uuid id PK "Primary key"
|
|
8
|
+
string {{FIELD_1}} UK "Unique constraint"
|
|
9
|
+
string {{FIELD_2}} "Required field"
|
|
10
|
+
int {{FIELD_3}} "Numeric field"
|
|
11
|
+
boolean {{FIELD_4}} "Boolean flag"
|
|
12
|
+
timestamp created_at "Creation timestamp"
|
|
13
|
+
timestamp updated_at "Last update timestamp"
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
{{ENTITY_2}} {
|
|
17
|
+
uuid id PK
|
|
18
|
+
uuid {{FK_TO_ENTITY_1}} FK "Foreign key to {{ENTITY_1}}"
|
|
19
|
+
string {{FIELD_5}}
|
|
20
|
+
text {{FIELD_6}} "Long text field"
|
|
21
|
+
enum {{FIELD_7}} "Enum type"
|
|
22
|
+
decimal {{FIELD_8}} "Decimal number"
|
|
23
|
+
date {{FIELD_9}} "Date only"
|
|
24
|
+
timestamp created_at
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
{{ENTITY_3}} {
|
|
28
|
+
uuid id PK
|
|
29
|
+
uuid {{FK_TO_ENTITY_1}} FK
|
|
30
|
+
uuid {{FK_TO_ENTITY_2}} FK
|
|
31
|
+
json {{FIELD_10}} "JSON data"
|
|
32
|
+
timestamp {{FIELD_11}}
|
|
33
|
+
timestamp created_at
|
|
34
|
+
timestamp updated_at
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
%% Template Variables:
|
|
38
|
+
%% {{ENTITY_*}} - Entity/table names (UPPERCASE convention)
|
|
39
|
+
%% {{RELATIONSHIP_*}} - Relationship descriptions (e.g., "has", "belongs to")
|
|
40
|
+
%% {{FIELD_*}} - Field names (snake_case convention)
|
|
41
|
+
%% {{FK_TO_*}} - Foreign key field names
|
|
42
|
+
|
|
43
|
+
%% Relationship Cardinality:
|
|
44
|
+
%% ||--|| : one to one
|
|
45
|
+
%% ||--o{ : one to many
|
|
46
|
+
%% }o--|| : many to one
|
|
47
|
+
%% }o--o{ : many to many
|
|
48
|
+
|
|
49
|
+
%% Field Constraints:
|
|
50
|
+
%% PK : Primary Key
|
|
51
|
+
%% FK : Foreign Key
|
|
52
|
+
%% UK : Unique Key
|
|
53
|
+
|
|
54
|
+
%% Common Field Types:
|
|
55
|
+
%% - uuid, int, bigint, string, text
|
|
56
|
+
%% - boolean, enum, json
|
|
57
|
+
%% - decimal, float, money
|
|
58
|
+
%% - date, time, timestamp, datetime
|
|
59
|
+
|
|
60
|
+
%% Best Practices:
|
|
61
|
+
%% - Always include id (PK), created_at, updated_at
|
|
62
|
+
%% - Use uuid for distributed systems
|
|
63
|
+
%% - Add field comments for clarity
|
|
64
|
+
%% - Show foreign key relationships clearly
|