Giới thiệu

Ở bài trước tôi có giới thiệu chức năng tạo biểu đổ Mermaid trong Markdown Editor, trong bài này tôi ví dụ một số biểu đồ Sequence phổ biến gồm code minh họa.

Đăng ký tài khoản

sequenceDiagram
    actor U as User
    participant W as Website
    participant S as Email/SMS Service

    U->>W: Submit registration form
    W->>W: Validate form data
    alt Successful validation
        W->>S: Request email/SMS verification
        S->>U: Send verification link/message
        U->>W: Click verification link/submit code
        W->>W: Verify user
        W->>U: Display success message
    else Validation failed
        W->>U: Display error message
    end
sequenceDiagram
    actor U as User
    participant W as Website
    participant S as Email/SMS Service

    U->>W: Submit registration form
    W->>W: Validate form data
    alt Successful validation
        W->>S: Request email/SMS verification
        S->>U: Send verification link/message
        U->>W: Click verification link/submit code
        W->>W: Verify user
        W->>U: Display success message
    else Validation failed
        W->>U: Display error message
    end

Khách hàng thêm bớt hàng vào giỏ hàng, hệ thống tính lại đơn hàng

sequenceDiagram
    actor C as Customer
    participant SC as Shopping Cart
    participant SS as Shopping Site

    C->>SC: Add item to cart
    SC->>SS: Update cart contents
    SS->>SC: Recalculate total & shipping

    C->>SC: Remove item from cart
    SC->>SS: Update cart contents
    SS->>SC: Recalculate total & shipping

    C->>SC: Update item quantity
    SC->>SS: Update cart contents
    SS->>SC: Recalculate total & shipping
sequenceDiagram
    actor C as Customer
    participant SC as Shopping Cart
    participant SS as Shopping Site

    C->>SC: Add item to cart
    SC->>SS: Update cart contents
    SS->>SC: Recalculate total & shipping

    C->>SC: Remove item from cart
    SC->>SS: Update cart contents
    SS->>SC: Recalculate total & shipping

    C->>SC: Update item quantity
    SC->>SS: Update cart contents
    SS->>SC: Recalculate total & shipping

Giao hàng

sequenceDiagram
    participant SS as Shopping Site
    participant LV as Logistic Vendor
    actor C as Customer

    SS->>LV: Inform to pick up items
    LV->>SS: Confirm pickup
    LV->>C: Ship items to customer's door
    C->>LV: Pay cash on delivery
    LV->>SS: Confirm payment received
    SS->>C: Order completed
sequenceDiagram
    participant SS as Shopping Site
    participant LV as Logistic Vendor
    actor C as Customer

    SS->>LV: Inform to pick up items
    LV->>SS: Confirm pickup
    LV->>C: Ship items to customer's door
    C->>LV: Pay cash on delivery
    LV->>SS: Confirm payment received
    SS->>C: Order completed

Quy trình drop shipping

sequenceDiagram
    participant C as Customer
    participant SS as Shopping Site
    participant DS as Drop Shipper
    participant LV as Logistic Vendor

    C->>SS: Place order
    SS->>DS: Forward order details
    DS->>LV: Request item shipment
    LV->>C: Deliver item to customer
    C->>SS: Confirm receipt
    SS->>DS: Confirm sale, process payment
sequenceDiagram
    participant C as Customer
    participant SS as Shopping Site
    participant DS as Drop Shipper
    participant LV as Logistic Vendor

    C->>SS: Place order
    SS->>DS: Forward order details
    DS->>LV: Request item shipment
    LV->>C: Deliver item to customer
    C->>SS: Confirm receipt
    SS->>DS: Confirm sale, process payment

Mở kết nối TCP

TCP three-way handshake

sequenceDiagram
    participant A as Host A
    participant B as Host B

    A->>B: SYN (Sequence Number: x)
    B->>A: SYN-ACK (Acknowledgment Number: x+1, Sequence Number: y)
    A->>B: ACK (Acknowledgment Number: y+1)
sequenceDiagram
    participant A as Host A
    participant B as Host B

    A->>B: SYN (Sequence Number: x)
    B->>A: SYN-ACK (Acknowledgment Number: x+1, Sequence Number: y)
    A->>B: ACK (Acknowledgment Number: y+1)

Truy cập web site

  • Local DNS Server: Acts as the intermediary between users and the broader DNS system, often provided by ISPs. It resolves domain names by querying other servers and caches responses.
  • Root DNS Server: The top-level of the DNS hierarchy, directing queries to the appropriate Top-Level Domain (TLD) servers without storing domain-specific information.
  • TLD DNS Server: Manages the domain names within a specific top-level domain (like .com, .org), directing queries to the authoritative DNS servers for the second-level domains within its TLD.
  • Authoritative DNS Server: Holds the definitive records for a domain, including IP addresses, and is responsible for responding to queries with these records.
sequenceDiagram
    participant U as User
    participant B as Browser
    participant CD as Cache (DNS)
    participant LD as Local DNS Server
    participant RD as Root DNS Server
    participant TLD as TLD DNS Server
    participant AD as Authoritative DNS Server

    U->>B: Enter URL
    B->>CD: Check cache for DNS record
    alt Cache Hit
        CD->>B: Return DNS record
    else Cache Miss
        B->>LD: Request DNS resolution
        LD->>CD: Check local cache
        alt Local Cache Hit
            CD->>LD: Return DNS record
        else Local Cache Miss
            LD->>RD: Request resolution
            RD->>TLD: Ask for TLD
            TLD->>AD: Request domain details
            AD->>TLD: Return DNS record
            TLD->>RD: Return DNS record
            RD->>LD: Return DNS record
            LD->>CD: Update cache
        end
        LD->>B: Return DNS record
    end
    B->>U: Access website
sequenceDiagram
    participant U as User
    participant B as Browser
    participant CD as Cache (DNS)
    participant LD as Local DNS Server
    participant RD as Root DNS Server
    participant TLD as TLD DNS Server
    participant AD as Authoritative DNS Server

    U->>B: Enter URL
    B->>CD: Check cache for DNS record
    alt Cache Hit
        CD->>B: Return DNS record
    else Cache Miss
        B->>LD: Request DNS resolution
        LD->>CD: Check local cache
        alt Local Cache Hit
            CD->>LD: Return DNS record
        else Local Cache Miss
            LD->>RD: Request resolution
            RD->>TLD: Ask for TLD
            TLD->>AD: Request domain details
            AD->>TLD: Return DNS record
            TLD->>RD: Return DNS record
            RD->>LD: Return DNS record
            LD->>CD: Update cache
        end
        LD->>B: Return DNS record
    end
    B->>U: Access website