@startuml
class User {
  - id: Long
  - username: String
  - email: String
  - password: String
  + login(): boolean
  + logout(): void
  + updateProfile(): void
}

class Order {
  - id: Long
  - orderNumber: String
  - totalAmount: Decimal
  - status: OrderStatus
  + create(): void
  + cancel(): void
  + pay(): boolean
}

class Product {
  - id: Long
  - name: String
  - price: Decimal
  - stock: Integer
  + updateStock(quantity: Integer): void
  + getPrice(): Decimal
}

User "1" -- "*" Order : places
Order "*" -- "*" Product : contains
@enduml

@startuml
actor User
participant "Web Browser" as Browser
participant "API Server" as API
participant "Database" as DB

User -> Browser: Enter login information
Browser -> API: POST /api/login
activate API

API -> DB: Query user information
activate DB
DB --> API: Return user data
deactivate DB

alt Authentication Success
    API -> API: Generate JWT Token
    API --> Browser: Return Token
    Browser --> User: Login successful
else Authentication Failed
    API --> Browser: Return error message
    Browser --> User: Display error prompt
end

deactivate API
@enduml

@startuml
left to right direction

actor User as User
actor Admin as Admin

rectangle E-commerce System {
  usecase "Browse Products" as UC1
  usecase "Search Products" as UC2
  usecase "Add to Cart" as UC3
  usecase "Place Order" as UC4
  usecase "Pay Order" as UC5
  usecase "Manage Products" as UC6
  usecase "View Orders" as UC7
  usecase "Process Refunds" as UC8
}

User --> UC1
User --> UC2
User --> UC3
User --> UC4
User --> UC5
User --> UC7

Admin --> UC6
Admin --> UC7
Admin --> UC8

UC4 ..> UC3 : <<include>>
UC5 ..> UC4 : <<include>>
@enduml

@startuml
start

:User submits order;

if (Stock sufficient?) then (Yes)
  :Lock stock;
  :Create order;

  fork
    :Send confirmation email;
  fork again
    :Update stock;
  fork again
    :Record log;
  end fork

  :Wait for payment;

  if (Payment successful?) then (Yes)
    :Confirm order;
    :Arrange shipment;
  else (No)
    :Cancel order;
    :Release stock;
  endif

else (No)
  :Prompt insufficient stock;
endif

stop
@enduml

@startuml
[*] --> Pending Payment : Create order

Pending Payment --> Paid : Payment successful
Pending Payment --> Cancelled : Timeout/User cancels

Paid --> Being Prepared : Start preparation
Being Prepared --> Shipped : Ship

Shipped --> Completed : Confirm receipt
Shipped --> Refunding : Apply for refund

Refunding --> Refunded : Refund successful
Refunding --> Shipped : Reject refund

Completed --> [*]
Cancelled --> [*]
Refunded --> [*]

Pending Payment : entry / Lock stock
Pending Payment : exit / Release stock
Paid : entry / Deduct stock
@enduml

@startuml
package "Frontend Layer" {
  [Web Application]
  [Mobile Application]
}

package "API Layer" {
  [API Gateway]
  [Authentication Service]
}

package "Business Layer" {
  [User Service]
  [Order Service]
  [Product Service]
  [Payment Service]
}

package "Data Layer" {
  database "MySQL" as DB
  database "Redis" as Cache
  queue "Message Queue" as MQ
}

[Web Application] --> [API Gateway]
[Mobile Application] --> [API Gateway]

[API Gateway] --> [Authentication Service]
[API Gateway] --> [User Service]
[API Gateway] --> [Order Service]
[API Gateway] --> [Product Service]

[Order Service] --> [Payment Service]
[Order Service] --> DB
[User Service] --> DB
[Product Service] --> DB

[User Service] --> Cache
[Product Service] --> Cache

[Order Service] --> MQ
[Payment Service] --> MQ
@enduml

@startuml
node "User Devices" {
  [Browser]
  [Mobile App]
}

node "Load Balancer" {
  [Nginx]
}

node "Application Server Cluster" {
  node "Server 1" {
    [Node.js Instance 1]
  }
  node "Server 2" {
    [Node.js Instance 2]
  }
}

node "Database Server" {
  database "MySQL Primary"
  database "MySQL Replica"
}

node "Cache Server" {
  database "Redis Cluster"
}

node "File Storage" {
  [OSS/S3]
}

[Browser] --> [Nginx]
[Mobile App] --> [Nginx]
[Nginx] --> [Node.js Instance 1]
[Nginx] --> [Node.js Instance 2]

[Node.js Instance 1] --> [MySQL Primary]
[Node.js Instance 2] --> [MySQL Primary]
[MySQL Primary] --> [MySQL Replica] : Master-slave replication

[Node.js Instance 1] --> [Redis Cluster]
[Node.js Instance 2] --> [Redis Cluster]

[Node.js Instance 1] --> [OSS/S3]
[Node.js Instance 2] --> [OSS/S3]
@enduml

# Using npm
npm install -g node-plantuml

# Using Java
# Download plantuml.jar
java -jar plantuml.jar diagram.puml

classDiagram
    class User {
        +String username
        +String email
        +login()
        +logout()
    }

    class Order {
        +String orderNumber
        +Decimal amount
        +create()
        +cancel()
    }

    User "1" --> "*" Order : places

✓ Follow the Single Responsibility Principle
✓ Use clear naming
✓ Mark key attributes and methods
✓ Display important relationships
✓ Use packages to organize large systems

✗ Avoid over-engineering
✗ Do not include all details
✗ Avoid circular dependencies

✓ Arrange participants from left to right
✓ Arrange messages in chronological order
✓ Use clear message names
✓ Mark important conditions and loops
✓ Keep diagrams concise

✗ Avoid too many participants
✗ Do not omit return messages
✗ Avoid crossing message lines

✓ Describe functions from the user's perspective
✓ Keep use case granularity appropriate
✓ Clarify participant roles
✓ Mark key relationships
✗ Avoid technical jargon
✗ Do not over-refine
✗ Avoid missing important use cases

@startuml
' Core domain model

class User {
  - id: Long
  - username: String
  - email: String
  - phone: String
  + register()
  + login()
  + updateProfile()
}

class Product {
  - id: Long
  - name: String
  - description: String
  - price: Decimal
  - stock: Integer
  + updateStock()
  + getPrice()
}

class Order {
  - id: Long
  - orderNumber: String
  - totalAmount: Decimal
  - status: OrderStatus
  - createdAt: DateTime
  + create()
  + cancel()
  + pay()
  + ship()
}

class OrderItem {
  - id: Long
  - quantity: Integer
  - price: Decimal
  + calculateSubtotal()
}

class Payment {
  - id: Long
  - amount: Decimal
  - method: PaymentMethod
  - status: PaymentStatus
  + process()
  + refund()
}

class Address {
  - id: Long
  - province: String
  - city: String
  - detail: String
  - phone: String
}

enum OrderStatus {
  PENDING
  PAID
  SHIPPED
  COMPLETED
  CANCELLED
}

enum PaymentMethod {
  ALIPAY
  WECHAT
  CREDIT_CARD
}

User "1" -- "*" Order : places
User "1" -- "*" Address : has
Order "1" *-- "*" OrderItem : contains
OrderItem "*" -- "1" Product : references
Order "1" -- "1" Payment : pays with
Order "1" -- "1" Address : ships to
@enduml

@startuml
!define RECTANGLE class

package "Client" {
  [Web Frontend]
  [Mobile App]
}

package "API Gateway Layer" {
  [API Gateway]
  [Authentication Center]
}

package "Microservices Layer" {
  RECTANGLE "User Service" {
    [User Management]
    [Permission Management]
  }

  RECTANGLE "Product Service" {
    [Product Management]
    [Inventory Management]
  }

  RECTANGLE "Order Service" {
    [Order Management]
    [Order Status]
  }

  RECTANGLE "Payment Service" {
    [Payment Processing]
    [Refund Processing]
  }
}

package "Infrastructure Layer" {
  database "MySQL Cluster"
  database "Redis Cluster"
  queue "Kafka"
  [Configuration Center]
  [Service Registry]
}

[Web Frontend] --> [API Gateway]
[Mobile App] --> [API Gateway]

[API Gateway] --> [Authentication Center]
[API Gateway] --> [User Management]
[API Gateway] --> [Product Management]
[API Gateway] --> [Order Management]

[Order Management] --> [Payment Processing]
[Order Management] --> [Inventory Management]

[User Management] --> [MySQL Cluster]
[Product Management] --> [MySQL Cluster]
[Order Management] --> [MySQL Cluster]

[User Management] --> [Redis Cluster]
[Product Management] --> [Redis Cluster]

[Order Management] --> [Kafka]
[Payment Processing] --> [Kafka]

[User Management] --> [Configuration Center]
[Product Management] --> [Configuration Center]
[Order Management] --> [Configuration Center]

[User Management] --> [Service Registry]
[Product Management] --> [Service Registry]
[Order Management] --> [Service Registry]
@enduml

# System Design Document

## Class Diagram

\`\`\`plantuml
@startuml
class User {
  +login()
}
@enduml
\`\`\`

## Sequence Diagram

\`\`\`mermaid
sequenceDiagram
    User->>API: Request
    API->>DB: Query
    DB-->>API: Return
    API-->>User: Response
\`\`\`

/**
 * User Service Class
 *
 * @startuml
 * class UserService {
 *   +register(user: User): boolean
 *   +login(username: String, password: String): Token
 * }
 * @enduml
 */
public class UserService {
    // Implementation code
}