# UML brief intro & UML class diagram
###### tags: `UML`

## UML brief introduction

### What is UML

- **U**nified **M**odeling **L**anguage (統一建模語言)
- 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


- :link: [[UML]學習筆記-套件圖型(Package Diagrams)](https://terryjryeh.blogspot.com/2019/03/uml-package-diagrams-4.html)
- :link: [[UML]學習筆記-物件圖型(Object Diagrams)](https://terryjryeh.blogspot.com/2019/03/uml-object-diagrams-5.html)
- :link: [[UML]學習筆記-元件圖型(Component Diagrams)](https://terryjryeh.blogspot.com/2019/03/uml-component-diagrams-6.html)
- :link: [[UML]學習筆記-佈署圖型(Deployment Diagrams)](https://terryjryeh.blogspot.com/2019/03/uml-deployment-diagrams-7.html)

### 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.

:link: [Use case diagram 簡介](https://ithelp.ithome.com.tw/articles/10223781)


#### 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.

:link: [Sequence Diagram Tutorial – Complete Guide with Examples](https://creately.com/blog/diagrams/sequence-diagram-tutorial/)
:link: [[UML]學習筆記-循序圖型(Sequence Diagrams)](https://terryjryeh.blogspot.com/2019/03/uml-sequence-diagrams-8.html)


#### 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.

:link: [Activity diagram 簡介](https://ithelp.ithome.com.tw/articles/10224695)
:link: [[UML]學習筆記-活動圖型(Activity Diagrams)](https://terryjryeh.blogspot.com/2019/03/uml-activity-diagrams-11.html)


#### 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.

:link: [[UML]學習筆記-狀態圖型(Statechart Diagrams)](https://terryjryeh.blogspot.com/2019/03/uml-statechart-diagrams-10.html)


### Step of Sofeware Design


<br >

---

## UML Class Diagram with JavaScript code sample
UML Class diagram consists two element:

- Class
- Class Relationship

### Class

#### General case

Diagram
<img src="https://i.imgur.com/AvAKfsh.png" width="400px">

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
<img src="https://i.imgur.com/fL6WhAK.png" width="400px">

<br >

### Class Relationship

<img src="https://i.imgur.com/6e86RaO.png" width="600px">

- Association
- Inheritance

<br >

#### 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**.

<img src="https://i.imgur.com/UcsXP9z.png" width="400px">

#### 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.

<img src="https://i.imgur.com/MITMI2m.png" width="400px">

### 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}.`);
    }
}

<br>

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.

<br>

---
### Reference

- [UML Diagram Types Guide: Learn About All Types of UML Diagrams with Examples](https://creately.com/blog/diagrams/uml-diagram-types-examples/)
- [The Easy Guide to UML Class Diagrams | Class Diagram Tutorial](https://creately.com/blog/diagrams/class-diagram-tutorial/)
- [UML Class Diagram Relationships Explained with Examples](https://creately.com/blog/diagrams/class-diagram-relationships/)
- [The UML 2 class diagram -- IBM](https://developer.ibm.com/articles/the-class-diagram/)