11. Diagrams
Nextra renders Mermaid diagrams natively — these are interactive and copy-pasteable into GitHub READMEs, Notion, or mermaid.live (opens in a new tab).
11.1 Entity Relationship Diagram
11.2 System Architecture
11.3 Purchase & Download Flow
11.4 Invite & Registration Flow
11.5 Component Tree
app/
├── layout.tsx (Root) SERVER — fonts, Providers, CartDrawer
│
├── (public)/layout.tsx SERVER — Navbar + Footer
│ ├── page.tsx SERVER — Homepage
│ └── products/
│ ├── page.tsx SERVER — Product Grid
│ │ └── ProductCard SERVER
│ │ └── AddToCartButton CLIENT ← 'use client'
│ └── [slug]/page.tsx SERVER — Product Detail
│ └── AddToCartButton CLIENT
│
├── (auth)/layout.tsx SERVER — Logo only
│ ├── login/page.tsx SERVER
│ │ └── LoginForm CLIENT ← form + submit handler
│ └── invite/[token]/page.tsx SERVER
│ └── RegisterForm CLIENT
│
└── (protected)/layout.tsx SERVER — middleware guarded
├── checkout/page.tsx SERVER
│ └── PaymentForm CLIENT ← Stripe Elements
└── account/
├── orders/page.tsx SERVER
│ └── DownloadButton CLIENT ← fetch on click
└── settings/page.tsx SERVER
└── SettingsForm CLIENT