Architecture Diagrams Guide

This guide standardizes diagram notation across documents. Prefer C4 model where applicable.

Legend

• 📦 Container / Application / Service
• 🗄️ Database / Data Store
• ☁️ External Service / API
• 🔄 Data Flow
• 🔐 Auth boundary (requires authentication)
• ⚡ Cache layer

Styles

• Use monospace ASCII blocks in docs for portability
• Titles in uppercase; keep labels concise
• Show boundaries (e.g., Admin, Application, Data)

C4 Levels (as needed)

• Level 1: System Context (users, external systems)
• Level 2: Container (apps, databases, message brokers)
• Level 3: Component (modules within containers)
• Level 4: Code (rare in roadmap docs)

Examples

System Context (Level 1)

USERS ──▶ WEB (Next.js) ──▶ API (Laravel) ──▶ WORDPRESS (Headless CMS)
             │                  │                  │
             └────▶ PUSH (Expo) └────▶ REDIS/DB    └────▶ STORAGE

Container (Level 2)

┌──────────────────────── SYSTEM ─────────────────────────┐
│  ┌──────────── WEB ────────────┐   ┌────── MOBILE ──────┐
│  │ Next.js (SSR/ISR)           │   │ Expo (iOS/Android) │
│  └────────────┬────────────────┘   └───────────┬────────┘
│               │                                │
│         ┌─────▼─────┐                    ┌─────▼─────┐
│         │  API       │◀──────────────▶    │  Redis    │
│         │ Laravel    │                    │  Cache    │
│         └─────┬──────┘                    └─────┬─────┘
│               │                                  │
│        ┌──────▼──────┐                    ┌──────▼──────┐
│        │ WordPress   │                    │   MySQL     │
│        │ (Headless)  │                    │  Database   │
│        └─────────────┘                    └─────────────┘
└──────────────────────────────────────────────────────────┘