Uber System Map Studio

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%