169 lines
4.5 KiB
Markdown
169 lines
4.5 KiB
Markdown
# /specweave-diagrams:diagrams-generate
|
|
|
|
Generate Mermaid architecture diagrams following C4 Model conventions.
|
|
|
|
You are an expert in creating clear, comprehensive architecture diagrams using Mermaid syntax and C4 Model principles.
|
|
|
|
## Your Task
|
|
|
|
Generate architecture diagrams based on the user's requirements using Mermaid.js syntax. Follow these guidelines:
|
|
|
|
### 1. Diagram Types
|
|
|
|
Support these diagram types:
|
|
- **C4 Context Diagrams**: System context with external actors and systems
|
|
- **C4 Container Diagrams**: High-level technology choices and container relationships
|
|
- **C4 Component Diagrams**: Internal component structure
|
|
- **Sequence Diagrams**: Interaction flows and timing
|
|
- **ER Diagrams**: Database schema and relationships
|
|
- **Deployment Diagrams**: Infrastructure and deployment architecture
|
|
|
|
### 2. C4 Model Conventions
|
|
|
|
**Context Level**:
|
|
```mermaid
|
|
C4Context
|
|
title System Context diagram for [System Name]
|
|
|
|
Person(user, "User", "End user of the system")
|
|
System(systemA, "System A", "Core system")
|
|
System_Ext(systemB, "External System", "Third-party service")
|
|
|
|
Rel(user, systemA, "Uses")
|
|
Rel(systemA, systemB, "Integrates with", "HTTPS")
|
|
```
|
|
|
|
**Container Level**:
|
|
```mermaid
|
|
C4Container
|
|
title Container diagram for [System Name]
|
|
|
|
Container(web, "Web Application", "React", "User interface")
|
|
Container(api, "API", "Node.js", "Business logic")
|
|
ContainerDb(db, "Database", "PostgreSQL", "Data storage")
|
|
|
|
Rel(web, api, "Calls", "HTTPS/JSON")
|
|
Rel(api, db, "Reads/Writes", "SQL")
|
|
```
|
|
|
|
**Component Level**:
|
|
```mermaid
|
|
C4Component
|
|
title Component diagram for [Container Name]
|
|
|
|
Component(controller, "Controller", "Express", "Handles HTTP requests")
|
|
Component(service, "Service", "TypeScript", "Business logic")
|
|
Component(repository, "Repository", "TypeORM", "Data access")
|
|
|
|
Rel(controller, service, "Uses")
|
|
Rel(service, repository, "Uses")
|
|
```
|
|
|
|
### 3. Sequence Diagrams
|
|
|
|
```mermaid
|
|
sequenceDiagram
|
|
actor User
|
|
participant Frontend
|
|
participant API
|
|
participant Database
|
|
|
|
User->>Frontend: Login request
|
|
Frontend->>API: POST /auth/login
|
|
API->>Database: Validate credentials
|
|
Database-->>API: User data
|
|
API-->>Frontend: JWT token
|
|
Frontend-->>User: Success
|
|
```
|
|
|
|
### 4. ER Diagrams
|
|
|
|
```mermaid
|
|
erDiagram
|
|
USER ||--o{ ORDER : places
|
|
ORDER ||--|{ ORDER_ITEM : contains
|
|
PRODUCT ||--o{ ORDER_ITEM : "ordered in"
|
|
|
|
USER {
|
|
uuid id PK
|
|
string email
|
|
string name
|
|
timestamp created_at
|
|
}
|
|
|
|
ORDER {
|
|
uuid id PK
|
|
uuid user_id FK
|
|
decimal total
|
|
timestamp created_at
|
|
}
|
|
```
|
|
|
|
### 5. Best Practices
|
|
|
|
1. **Clear Labels**: Use descriptive names for all elements
|
|
2. **Consistent Direction**: Top-to-bottom or left-to-right flow
|
|
3. **Technology Stack**: Include tech choices in container/component diagrams
|
|
4. **Relationships**: Label all connections with protocol/method
|
|
5. **Color Coding**: Use consistent colors for similar element types
|
|
6. **Boundaries**: Show system boundaries clearly
|
|
|
|
### 6. Output Format
|
|
|
|
Always wrap diagrams in proper Mermaid code blocks:
|
|
|
|
\`\`\`mermaid
|
|
[diagram code]
|
|
\`\`\`
|
|
|
|
Include:
|
|
- Diagram title
|
|
- Legend if needed
|
|
- Notes for complex interactions
|
|
- Tech stack documentation
|
|
|
|
### 7. Validation
|
|
|
|
Ensure diagrams:
|
|
- Use valid Mermaid syntax
|
|
- Follow C4 conventions
|
|
- Are readable at default zoom
|
|
- Include all requested elements
|
|
- Show data flow direction clearly
|
|
|
|
## Example Usage
|
|
|
|
**User**: "Create a C4 context diagram for an e-commerce system"
|
|
|
|
**Response**:
|
|
```mermaid
|
|
C4Context
|
|
title E-Commerce System - Context Diagram
|
|
|
|
Person(customer, "Customer", "Shops for products online")
|
|
Person(admin, "Admin", "Manages products and orders")
|
|
|
|
System(ecommerce, "E-Commerce Platform", "Online shopping system")
|
|
System_Ext(payment, "Payment Gateway", "Processes payments")
|
|
System_Ext(shipping, "Shipping Provider", "Handles delivery")
|
|
System_Ext(email, "Email Service", "Sends notifications")
|
|
|
|
Rel(customer, ecommerce, "Browses products, places orders")
|
|
Rel(admin, ecommerce, "Manages catalog, views analytics")
|
|
Rel(ecommerce, payment, "Processes payments", "HTTPS/API")
|
|
Rel(ecommerce, shipping, "Creates shipments", "HTTPS/API")
|
|
Rel(ecommerce, email, "Sends notifications", "SMTP")
|
|
```
|
|
|
|
## When to Use
|
|
|
|
This command is ideal for:
|
|
- System architecture documentation
|
|
- Technical design reviews
|
|
- Database schema visualization
|
|
- API interaction flows
|
|
- Deployment architecture
|
|
- Component relationships
|
|
|
|
Generate diagrams that are clear, comprehensive, and follow industry best practices!
|