Files
gh-cskiro-claudex/skills/planning/ascii-diagram-creator/examples/architecture-diagram.md
2025-11-29 18:16:40 +08:00

65 lines
4.3 KiB
Markdown

# Example: Architecture Diagram
## Scenario
A user asks: "Show me how our e-commerce platform components are connected."
## Generated Diagram
```
┌─────────────────────────────────────────────────────────────────────────┐
│ E-COMMERCE PLATFORM ARCHITECTURE │
└─────────────────────────────────────────────────────────────────────────┘
┌───────────────────┐ ┌───────────────────┐
│ Web Frontend │ │ Mobile Frontend │
├───────────────────┤ ├───────────────────┤
│ • React SPA │ │ • React Native │
│ • Redux state │ │ • Offline sync │
│ • Tailwind CSS │ │ • Push notifs │
└───────────────────┘ └───────────────────┘
│ │
└───────────────────┬───────────────────────────┘
┌───────────────────┐
│ API Gateway │
├───────────────────┤
│ • Rate limiting │
│ • Auth validation │
│ • Request routing │
└───────────────────┘
┌───────────────────┼───────────────────┐
▼ ▼ ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Auth Service │ │ Product Service │ │ Order Service │
├─────────────────┤ ├─────────────────┤ ├─────────────────┤
│ • JWT tokens │ │ • Catalog CRUD │ │ • Cart mgmt │
│ • OAuth 2.0 │ │ • Search/filter │ │ • Checkout flow │
│ • Session mgmt │ │ • Inventory │ │ • Payment proc │
└─────────────────┘ └─────────────────┘ └─────────────────┘
│ │ │
▼ ▼ ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Users DB │ │ Products DB │ │ Orders DB │
│ (PostgreSQL) │ │ (PostgreSQL) │ │ (PostgreSQL) │
└─────────────────┘ └─────────────────┘ └─────────────────┘
```
## Explanation
This architecture diagram shows the three-tier structure of the e-commerce platform:
1. **Presentation Layer**: Web and mobile frontends
2. **API Layer**: Gateway with routing to microservices
3. **Data Layer**: Dedicated databases per service
The vertical flow clearly shows how requests travel from clients through the gateway to specific services and their databases.
## Usage Suggestions
- Include in architecture documentation
- Add to README for new developer onboarding
- Reference in technical design documents