---
# System prepended metadata

title: Bài tập Seminar#1 - Mermaid
tags: [TKPM-Mermaid]

---

# Bài tập Seminar#1 - Mermaid

###### tags: `TKPM-Mermaid`

## :memo: Thành viên nhóm

### :bulb: 1712039 - Trương Nguyễn Anh Hoàng
### :bulb: 1712011 - Trần Thị Tuyết Chung
### :bulb: 1712039 - Lê Văn Hải
## Mục lục
[ToC]

## Bài tập 1: Flowchart

- ### Flowchart: Euclide GCD
    + Mermaid code:
    ```
    graph TD
      A[Input A,B] --> B(( )) --> C{B = 0}
      D(( )) --> B
      C -- no --> E{A>B}
      C -- Yes --> L[PRINT A] --> M([END])
      E -- "no (< or =)" --> F[B<-B-A]--- G[GOTO2] --> D
      E -- Yes --> H[A<-A-B] --- K[GOTO2] --> D			
    ```
    + Flowchart:
```mermaid
graph TD
  A[Input A,B] --> B(( )) --> C{B = 0}
  D(( )) --> B
  C -- no --> E{A>B}
  C -- Yes --> L[PRINT A] --> M([END])
  E -- "no (< or =)" --> F[B<-B-A]--- G[GOTO2] --> D
  E -- Yes --> H[A<-A-B] --- K[GOTO2] --> D
			
```
- ### Flowchart: Quadratic Equation
    + Mermaid code:
    ```
    graph TD
        A([Start]) -->B[/Read a,b,c/] --> C[d=b^2 -4ac] --> D{d>=0}
        D -- True --> E["x1 = (-b+sqrt(D))/2a"] --> F["x2 =(-b+sqrt(D))/2a"] --> G[/print x1,x2/] --> Q(( ))
        D -- False --> K[p=-b/2a] --> M["q=sqrt(|d|)/2a"] --> N[/print p,'+i',q/] --> L[/print p,'-i',q/] --> Q		
    ```
    + Flowchart:
```mermaid
graph TD
    A([Start]) -->B[/Read a,b,c/] --> C[d=b^2 -4ac] --> D{d>=0}
    D -- True --> E["x1 = (-b+sqrt(D))/2a"] --> F["x2 = (-b+sqrt(D))/2a"] --> G[/print x1,x2/] --> Q(( ))
    D -- False --> K[p=-b/2a] --> M["q=sqrt(|d|)/2a"] --> N[/print p,'+i',q/] --> L[/print p,'-i',q/] --> Q
					
```
## Bài tập 2: Class Diagram

- ### Mermaid code：
```
classDiagram
  Address "1" --*  Customer
  Address --* "Has" Customer
  PremiumCustomer  --|> Customer
  RegularCustomer  --|> Customer
  Product "Purchase" -- "1" Customer
  Product  -- "Is Sold To" Customer
  PurchaseDetail -- Customer
  Bill --o Customer
  Bill ..|> PaymentCounter : Accepts
  Bill ..> Discount
  Bill ..> PurchaseDetail
  Discount ..> PurchaseDetail
  
  class Customer{
    custName: String
    custID: Int
    custPhnum: Int
    purchaseItem()
    requestBill()
    enterCustDetail()
  }
  class Address{
	street: String
    city: String
	state: String
    enterStreet()
    enterCity()
    enterState()
    enterZipcode()
  }
  class Product{
	productID: Int
    productName: String
    productPrice: Float
    getPrice()
    setPrice()
  }
  class PurchaseDetail{
    custID: Int
    quantity: Int
    purchaseDate: Date
    productID: Int
    calculateTotalAmt()
    generatePurchaseList()
  }
  class Discount{
    discountType
    discountValue
    SelectDiscount()
  }
  class Bill{
    payableAmt 
    calculatePayableAmt()
    generateBill()
  }
  class RegularCustomer{
    regularDiscount: Int
    enterCusDetail()
  }
  class PremiumCustomer{
    premiumDiscount: Int
    enterCustDetail()
  }
  class Payment Counter{
    <<interface>>
    calculatePayableAmt()
    generateBill()
	}
```
- ### Class Diagram (không có annotation): 
    + :memo: HackMD **không hỗ trợ** render annotation của class của (<<interface>>,<<abstract>>,<<service>>, <<enumeration>>) với **mermaid-js**
```mermaid
classDiagram
  Address "1" --*  Customer
  Address --* "Has" Customer
  PremiumCustomer  --|> Customer
  RegularCustomer  --|> Customer
  Product "Purchase" -- "1" Customer
  Product  -- "Is Sold To" Customer
  PurchaseDetail -- Customer
  Bill --o Customer
  Bill ..|> PaymentCounter : Accepts
  Bill ..> Discount
  Bill ..> PurchaseDetail
  Discount ..> PurchaseDetail
  
  class Customer{
    custName: String
    custID: Int
    custPhnum: Int
    purchaseItem()
    requestBill()
    enterCustDetail()
  }
  class Address{
	street: String
    city: String
	state: String
    enterStreet()
    enterCity()
    enterState()
    enterZipcode()
  }
  class Product{
	productID: Int
    productName: String
    productPrice: Float
    getPrice()
    setPrice()
  }
  class PurchaseDetail{
    custID: Int
    quantity: Int
    purchaseDate: Date
    productID: Int
    calculateTotalAmt()
    generatePurchaseList()
  }
  class Discount{
    discountType
    discountValue
    SelectDiscount()
  }
  class Bill{
    payableAmt 
    calculatePayableAmt()
    generateBill()
  }
  class RegularCustomer{
    regularDiscount: Int
    enterCusDetail()
  }
  class PremiumCustomer{
    premiumDiscount: Int
    enterCustDetail()
  }
  class Payment Counter {
    calculatePayableAmt()
    generateBill()
	}
```
- ### Class Diagram (đầy đủ/ảnh/rendered by live editor): 
![](https://i.imgur.com/cOKLiNC.jpg)


## Bài tập 3: Sequence Diagram

- ### Mermaid code：
```
sequenceDiagram
    participant Customer
    participant Search Page
    participant Search Result Page
    participant Catalog
    participant Search Results
    activate Customer
    Customer->> Search Page: 1:OnSearch(author)
    activate Search Page
    Search Page->>Search Page: 1.1:validateSearchCriteria()
    alt author entered
        Search Page ->>+ Catalog: 1.2: searchByAuthor(author)
        activate Catalog
        Catalog ->> Search Results: 1.2.1: create()
        activate Search Results
        Search Results ->> Search Result Page: 1.2.1.1: display()
        activate Search Result Page
        deactivate Search Result Page
        deactivate Search Results
    else author not entered
        deactivate Catalog
        Search Page ->> Search Page: 1.3: displayErrorMessage()
        deactivate Search Page
    end
    deactivate Customer
```

- ### Search Book Sequence Diagram: 
```mermaid
sequenceDiagram
    participant Customer
    participant Search Page
    participant Search Result Page
    participant Catalog
    participant Search Results
    activate Customer
    Customer->> Search Page: 1:OnSearch(author)
    activate Search Page
    Search Page->>Search Page: 1.1:validateSearchCriteria()
    alt author entered
        Search Page ->>+ Catalog: 1.2: searchByAuthor(author)
        activate Catalog
        Catalog ->> Search Results: 1.2.1: create()
        activate Search Results
        Search Results ->> Search Result Page: 1.2.1.1: display()
        activate Search Result Page
        deactivate Search Result Page
        deactivate Search Results
    else author not entered
        deactivate Catalog
        Search Page ->> Search Page: 1.3: displayErrorMessage()
        deactivate Search Page
    end
    deactivate Customer
```
## Bài tập 4: State Chart Diagram

- ### Mermaid code
```
stateDiagram
	[*] --> AD
	AD: IDLE
	D: PrintReceipt
	C: DispenseMoney
	B: AcountActions
	AD--> VerifyAcount	
	B --> C
	C --> D
	B --> D	
	C --> [*]
	D --> [*]
	state VerifyAcount{
		A: VerifyCards
		B: CardValid
		C: VerifyPin
		D: PinCorrect
		G:valid
		F: PinCorrect
		B-->C
		C-->F
		F-->D:PINValid
		F-->E :else
		E-->C: [tries<maxTries] tries++
		A-->G
		G-->B: cardValid
	}
```
- ## ATM State Machine Diagram(dạng ảnh):
![](https://i.imgur.com/Y4C43tS.jpg)