---
# System prepended metadata

title: UML brief intro & UML class diagram
tags: [UML]

---

# 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

![](https://d3n817fwly711g.cloudfront.net/uploads/2012/02/UML-Diagram-types-1.png)

- :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)

![](https://2107204891-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9shwSMiocGHpSKcbss%2F-MICkcB7mPa82xrtHJZg%2F-MICliFgJLTApzyyCz-B%2FUse%20Case%20Model.png?alt=media&token=9503a6bc-bfc9-4427-b068-fba17edd13db)

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

![](https://miro.medium.com/max/1400/1*TYRSuON0vVxy8olllrBVEw.png)

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

![](https://media.geeksforgeeks.org/wp-content/cdn-uploads/seq19.png)

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

![](https://i.imgur.com/s4wKjFC.png)


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

![](https://d3n817fwly711g.cloudfront.net/uploads/2012/02/State-Machine-Diagram.jpg)

### Step of Sofeware Design

![](https://i.imgur.com/yRwDOR6.png)

<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
```javascript=
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
```javascript=
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

![](https://i.imgur.com/8BOgkA9.png)

code sample
```javascript=
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
```javascript=
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/)