Try   HackMD

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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More β†’

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.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More β†’
Use case diagram η°‘δ»‹

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More β†’

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.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More β†’

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.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More β†’
Sequence Diagram Tutorial – Complete Guide with Examples
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More β†’
[UML]ε­ΈηΏ’η­†θ¨˜-εΎͺεΊεœ–εž‹(Sequence Diagrams)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More β†’

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.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More β†’
Activity diagram η°‘δ»‹
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More β†’
[UML]ε­ΈηΏ’η­†θ¨˜-ζ΄»ε‹•εœ–εž‹(Activity Diagrams)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More β†’

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.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More β†’
[UML]ε­ΈηΏ’η­†θ¨˜-η‹€ζ…‹εœ–εž‹(Statechart Diagrams)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More β†’

Step of Sofeware Design

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More β†’



UML Class Diagram with JavaScript code sample

UML Class diagram consists two element:

  • Class
  • Class Relationship

Class

General case

Diagram

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More β†’

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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More β†’


Class Relationship

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More β†’
  • 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.
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More β†’

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.
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More β†’

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