System Map Studio
Ready
SVG
PNG
Mermaid Editor
Real-Time
sequenceDiagram participant User participant MobileApp participant BackendAPI participant Database participant PaymentGateway User->>MobileApp: Open App MobileApp->>BackendAPI: Request Menu BackendAPI-->>Database: Query Menu Data Database-->>BackendAPI: Return Menu Data BackendAPI-->>MobileApp: Display Menu User->>MobileApp: Select Items & Add to Cart MobileApp->>BackendAPI: Update Cart (Item, Qty) User->>MobileApp: Proceed to Checkout MobileApp->>BackendAPI: Create Order Request (Cart, Address, etc.) BackendAPI-->>Database: Save Temporary Order State BackendAPI->>PaymentGateway: Initiate Payment PaymentGateway-->>User: Redirect for Payment Input User->>PaymentGateway: Submit Payment Details PaymentGateway->>PaymentGateway: Process Payment PaymentGateway-->>BackendAPI: Payment Confirmation/Failure alt Payment Successful BackendAPI-->>Database: Finalize Order State (Paid, Pending) BackendAPI->>MobileApp: Order Confirmation (Order ID) MobileApp-->>User: Show Confirmation Screen & Order Status else Payment Failed BackendAPI-->>Database: Update Order State (Failed) BackendAPI->>MobileApp: Payment Failure Message MobileApp-->>User: Show Error/Retry Payment Option end
Live Visualization
100%