UML brief intro & UML class diagram

tags: UML

UML brief introduction

What is UML

• Unified Modeling Language (統一建模語言)
• A common design language used to describe the structure and the behavior of software systems.
• UML provides a set of diagrams that help in designing and communicating software systems.

Types of UML

• Structure Diagrams

  • Class Diagram
  • Component Diagram
  • Deployment Diagram
  • Object Diagram
  • Package Diagram
  • Profile Diagram
  • Composite Structure Diagram

• Behavioral Diagrams

  • Use Case Diagram
  • Activity Diagram
  • State Machine Diagram
  • Sequence Diagram
  • Communication Diagram
  • Interaction Overview Diagram
  • Timing Diagram

• [UML]學習筆記-套件圖型(Package Diagrams)
• [UML]學習筆記-物件圖型(Object Diagrams)
• [UML]學習筆記-元件圖型(Component Diagrams)
• [UML]學習筆記-佈署圖型(Deployment Diagrams)

Examples of common types of UML diagram

Use case diagram

Use case diagrams give a graphic overview of the actors involved in a system, different functions needed by those actors and how these different functions interact.

Use case diagram 簡介

Class diagram

Class diagrams are the main building block of any object-oriented solution. It shows the classes in a system, attributes, and operations of each class and the relationship between each class.

Sequence diagram

Sequence diagrams show how objects interact with each other and the order those interactions occur. It’s important to note that they show the interactions for a particular scenario.

Sequence Diagram Tutorial – Complete Guide with Examples
[UML]學習筆記-循序圖型(Sequence Diagrams)

Activity diagram

Activity diagrams represent workflows in a graphical way. They can be used to describe the business workflow or the operational workflow of any component in a system.

Activity diagram 簡介
[UML]學習筆記-活動圖型(Activity Diagrams)

State Machine Diagram (state chart diagram)

State machine diagrams are similar to activity diagrams, although notations and usage change a bit. These are very useful to describe the behavior of objects that act differently according to the state they are in at the moment.

[UML]學習筆記-狀態圖型(Statechart Diagrams)

Step of Sofeware Design

---

UML Class Diagram with JavaScript code sample

UML Class diagram consists two element:

• Class
• Class Relationship

Class

General case

Diagram

Code Sample

class ClassName {
    constructor(arg1, arg2, arg3){
        this.attribute1 = arg1;
        this.attribute2 = arg2;
        this.attribute1 = arg3 || defaultValue;
    }
    
    operation1(arg1) 
    // some method implementation   
    }
    operation2(arg1, arg2) 
    // some method implementation   
    }
    operation2() 
    // some method implementation   
    }
}

Example

Code Sample

class Person{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }

    eat(food){
        alert(`${this.name} eat ${food}`);
    }
    selfIntro(){
        alert(`My name is ${this.name}, and I am ${this.age} years old.`);
    }
}

Corresponding diagram

Class Relationship

• Association
• Inheritance

Association

• A filled arrow with a line.
• ClassB uses ClassA or an object of ClassA.
• ClassB calls a static method or a method/property from an object of type ClassA.

Inheritance

• An unfilled arrow pointing to the class that is being extended/inherited.
• ExtendedClass extends Class.
• The extended class contains all the attributes and methods of the inherited class, including its own extra methods, attributes.

UML Class Diagram Example

code sample

class Person {
    constructor(name, home){
        this.name = name;
        this.home = home;
    }
    
    greet(greetWord){
        console.log(`${greetWord}, I am ${this.name} from ${this.home.city}.`);
    }
}

class Address {
    constructor(country, city, street){
        this.country = country;
        this.city = city;
        this.street = street;
    }
    
    showAddress(){
        console.log(`Address: ${this.street}, ${this.city}, ${this.country}`);
    }
}

class Student extends Person {
    constructor(name, home, grade){
        super(name, home)
        this.grade = grade;
    }
    
    showInfo(){
        console.log(`${this.name}, a ${this.grade} student is from ${this.home.city}.`);
    }
}

class Teacher extends Person {
    constructor(name, home, school){
        super(name, home)
        this.school = school;
    }
    
    showInfo(){
        console.log(`${this.school}'s teacher ${this.name} is from ${this.home.city}.`);
    }
}

class usage example

const robHome = new Address("8 main street", "Sidney", "Australia");
const teacherRob = new Teacher("Robert", robHome, "University of Sidney");

const dongHome = new Address("34 college rd", "Taipei", "Taiwan");
const studentDong = new Student("Dong Wei", dongHome, "3rd grade");

teacherRob.showInfo(); 
teacherRob.greet("Good morning");
// University of Sidney's teacher Robert is from Sidney.
// Good morning, I am Robert from Sidney.

studentDong.showInfo();
studentDong.greet("Nice to meet you")
// Dong Wei, a 3rd grade student is from Taipei.
// Nice to meet you, I am Dong Wei from Taipei.

---

Reference

• UML Diagram Types Guide: Learn About All Types of UML Diagrams with Examples
• The Easy Guide to UML Class Diagrams | Class Diagram Tutorial
• UML Class Diagram Relationships Explained with Examples
• The UML 2 class diagram – IBM