%% Mermaid architecture diagram — Miracles in Motion (Proxmox production)
%% Generate PNG: npm run diagram:png  (or npx @mermaid-js/mermaid-cli -i docs/ArchitectureDiagram.mmd -o docs/ArchitectureDiagram.png)

flowchart LR
  subgraph Public[Public clients]
    Browser[Browser / PWA]
  end

  subgraph Edge[Edge]
    CF[Cloudflare DNS / TLS]
    NPM[NPMplus reverse proxy]
  end

  subgraph Proxmox[Proxmox LAN]
    WEB[VMID 7810 mim-web-1<br/>Nginx + static SPA]
    API[VMID 7811 mim-api-1<br/>Node API :3001]
  end

  subgraph Integrations[Integrations]
    Stripe[Stripe]
    GA[Analytics optional]
  end

  Browser --> CF --> NPM
  NPM -->|mim4u.org :80| WEB
  WEB -->|/api/* proxy| API
  API --> Stripe
  Browser --> GA

  classDef proxmox fill:#e8f5f0,stroke:#1a3c34,stroke-width:1px;
  class WEB,API proxmox;