{"id":9508,"date":"2026-10-06T07:51:31","date_gmt":"2026-10-06T07:51:31","guid":{"rendered":"https:\/\/www.learn-vp.com\/vn\/gallery\/mastering-system-modeling-online-shopping-use-cases-vpascode\/"},"modified":"2026-10-09T04:18:38","modified_gmt":"2026-10-09T04:18:38","slug":"mastering-system-modeling-online-shopping-use-cases-vpascode","status":"publish","type":"gallery","link":"https:\/\/www.learn-vp.com\/vn\/gallery\/mastering-system-modeling-online-shopping-use-cases-vpascode\/","title":{"rendered":"Mastering System Modeling: Defining Online Shopping Use Cases with VPasCode"},"content":{"rendered":"
\n

\"PlantUML<\/p>\n

In the realm of software architecture, a Use Case Diagram is the blueprint that bridges the gap between business requirements and technical implementation. It answers the fundamental question: Who<\/strong> is using the system, and what<\/strong> goals are they trying to achieve?<\/p>\n

This tutorial guides you through the architecture of an Online Shopping System, demonstrating how to structure complex interactions using the VPasCode<\/strong> editor. We will explore the logical separation of actors, the hierarchy of tasks, and the critical modeling relationships that define system behavior.<\/p>\n

Understanding the Actors: The Users of Your System<\/h2>\n

Every robust system relies on distinct roles. In our online shopping scenario, we identify two primary actors: the Customer<\/em> and the Admin<\/em>. These are not merely labels; they represent the external entities initiating actions within the system boundary.<\/p>\n

    \n
  • Customer:<\/strong> The primary stakeholder interested in purchasing goods and managing their profile.<\/li>\n
  • Admin:<\/strong> The system manager responsible for overseeing user data and account management.<\/li>\n<\/ul>\n

    In VPasCode, defining these actors is the first step. They serve as the anchors for all connections (associations) in your diagram. The code structure allows you to map these actors to specific capabilities, ensuring that every user action has a corresponding use case defined.<\/p>\n

    Defining Actor Associations<\/h3>\n

    Associations represent the communication channels between actors and use cases. In our architecture, the Customer<\/strong> has the capability to perform several core actions:<\/p>\n

      \n
    1. Browse Products:<\/strong> The foundational step of the shopping journey.<\/li>\n
    2. Place Order:<\/strong> The critical transaction event.<\/li>\n
    3. Cancel Order:<\/strong> A necessary recovery mechanism for mistakes or cancellations.<\/li>\n
    4. Manage Account:<\/strong> Handling personal details and settings.<\/li>\n<\/ol>\n

      Conversely, the Admin<\/strong> is granted access to the Manage Account<\/strong> use case, highlighting a specific permission boundary where administrative oversight is required.<\/p>\n

      Structuring the System: The Use Case Hierarchy<\/h2>\n

      Complex systems are best understood when broken down into manageable chunks. VPasCode allows you to encapsulate these chunks using a rectangle<\/code> block. This container, labeled “Online Shopping System,” visually and logically groups related use cases.<\/p>\n

      Within this boundary, we define a hierarchy of tasks. Some are primary, meaning they are the direct goals of the user (e.g., “Place Order”). Others are secondary or supporting tasks (e.g., “Login,” “Reset Password”). By organizing these into a cohesive list, we create a clear map of the system’s functionality.<\/p>\n

      rectangle \"Online Shopping System\" {\n    usecase \"Browse Products\" as UC1\n    usecase \"Place Order\" as UC2\n    usecase \"Make Payment\" as UC3\n    usecase \"Cancel Order\" as UC4\n    usecase \"Manage Account\" as UC5\n\n    ' Secondary use cases\n    usecase \"Login\" as SUC1\n    usecase \"Reset Password\" as SUC2\n    usecase \"Send Confirmation Email\" as SUC3\n}<\/code><\/pre>\n
      The Logic of Interaction: Include and Extend<\/h2>\n
      The true power of a Use Case Diagram lies in the relationships between the bubbles (use cases). VPasCode enables you to express these dependencies using two specific keywords: <<include>><\/strong> and <<extend>><\/strong>.<\/p>\n
      1. The “Include” Relationship (Mandatory)<\/h3>\n
      An include<\/em> relationship implies that the base use case must<\/strong> perform the included use case to complete its task. It is a mandatory dependency. In our shopping system, consider the Place Order<\/strong> process:<\/p>\n
        \n
      • Make Payment:<\/strong> You cannot place an order without paying. This is an inclusion. The “Place Order” use case includes “Make Payment.”<\/li>\n
      • Send Confirmation Email:<\/strong> Once the order is placed and paid, the system must notify the user. The “Place Order” use case includes “Send Confirmation Email.”<\/li>\n
      • Login:<\/strong> To place an order, a user must be authenticated. Therefore, “Place Order” includes “Login.”<\/li>\n<\/ul>\n
        This logic is captured in the code by linking the target use case to the base use case using the : <><\/code> syntax.<\/p>\n
        2. The “Extend” Relationship (Optional)<\/h3>\n
        An extend<\/em> relationship represents an optional behavior that adds functionality to a base use case under specific conditions. It is the “what if” scenario.<\/p>\n
          \n
        • Reset Password:<\/strong> A customer might want to reset their password. This is not part of the standard “Login” flow, but it extends the login experience when a user has forgotten their credentials.<\/li>\n
        • Cancel Order:<\/strong> A user might choose to cancel an order after it has been placed. This is an optional extension of the “Place Order” process, triggered by a specific user decision.<\/li>\n<\/ul>\n
          ' Include relationships (mandatory)\nUC2 .> UC3 : <>\nUC2 .> SUC3 : <>\nUC5 .> SUC1 : <>\n\n' Extend relationships (optional)\nSUC2 .> SUC1 : <>\nUC4 .> UC3 : <><\/code><\/pre>\n
          Advanced Architecture: Managing Complexity<\/h2>\n
          As systems grow, diagrams can become cluttered. VPasCode offers features to manage this complexity, such as the ability to generate reports and sub-diagrams based on the code structure. By defining your use cases and relationships clearly in the text editor, you create a “source of truth” that can be analyzed by AI tools or exported for version control.<\/p>\n
          This text-based approach ensures that your architecture remains portable and versionable. Instead of dragging boxes around a canvas, you are defining the logic of your system in code, which is often more precise and easier to maintain for large-scale projects.<\/p>\n