---
# System prepended metadata

title: Seminar \#1 - Mermaid
tags: [TKPM-Mermaid]

---

---
Seminar \#1 - Mermaid
===
###### tags: ```TKPM-Mermaid```

## Cú pháp ```mermaid```

[https://mermaid-js.github.io/mermaid/#/](https://mermaid-js.github.io/mermaid/#/)

## Luyện tập

Sử dụng cú pháp `mermaid`, vẽ các diagram sau:

### Flow Chart

- Euclide GCD

```mermaid
graph TD
    Start --> 1[Input A,B]
    1 --> c1(( ))
    c1 --> cd1{B = 0}
    c2(( )) --> c1
    cd1 -->|NO| bno{A > B}
    cd1 -->|YES| pa[Print A]
    bno -->|NO| asb[B=B-A]
    bno -->|YES| asaa[A=A-B]
    asaa --> c2
    asb --> c2
    pa --> END
```
- Quadratic Equation

```mermaid
graph TD
    Start --> inp[Input a,b,c]
    inp --> ae0{a == 0}
    ae0 --> |YES|be0{b == 0}
    be0 --> |YES|ce0{c == 0}
    be0 --> |NO|1n[x = -b/a]
    ce0 --> |YES|inf[Infinity of result]
    ce0 --> |NO|nos[No solutions]
    ae0 --> |NO|delta[delta = b^2 - 4ac]
    delta --> deltaeb0{delta >= 0}
    deltaeb0 --> |YES|deltae0{delta == 0}
    deltae0 --> |YES| 1nn[x = -b/2a]
    deltae0 --> |NO|tworeal["x = -(-b-sqrt(delta))/2a<br />x = -(-b+sqrt(delta))/2a"]
    deltaeb0 --> |NO|noreal[No solutions]

```

### Sequence Diagram
```mermaid
sequenceDiagram
    participant Customer

    Customer->>+SearchPage: 1:onSearch(author)
    SearchPage->>SearchPage: 1.1:validateSearchCriteria()
    
    alt author entered
        SearchPage->>+Catalog:1.2:searchByAuthor(author)
        Catalog->>+SearchResult: 1.2.1:create()
        SearchResult->>-SearchResultPage: 1.2.1.1:display()
    else author not entered
        SearchPage->>-SearchPage:1.3:displayErrorMessage()
    end
```

### State Chart Diagram
(Phần này em xin phép import từ Live Editor Mermaid vì state VerifyAccount quá dài nên hackmd không tự render ra diagram được mà chỉ có một khoảng trắng. Thầy có thể click vào diagram để xem code hoặc đọc bằng ```edit mode``` ạ.)

```mermaid
stateDiagram
    
  state Idle{}
  
  [*] --> Idle
  
  state AccountActions{}
  
  state DispenseMoney{}
  
  state PrintReceipt{}
    
  state VerifyAccount{

    state VerifyCard{
      cardSubmitted
      readCard
      returnCard
    }
    
    state CheckCard <<fork>>
    VerifyCard --> CheckCard
    CheckCard --> Idle: [else]
    CheckCard --> CardValid: [cardValid]

    state CardValid{}

    CardValid --> VerifyPin
      
    state VerifyPin{
      pinSubmit
      checkPin
      returnCard
    }
    state CheckPin <<fork>>
    VerifyPin --> CheckPin
    CheckPin --> PinCorrect : PINValid
    CheckPin --> PinIncorrect : [else]
      
    state PinCorrect{}

    state PinIncorrect{}

    PinIncorrect --> CheckPin: [tries<maxTries]/tries++
  }
    
  AccountActions --> DispenseMoney
  
  DispenseMoney --> PrintReceipt
  
  PrintReceipt --> TransactionComplete
  
  AccountActions --> PrintReceipt
  
  DispenseMoney --> TransactionComplete
  
  TransactionComplete --> Idle
  
  Idle --> VerifyAccount
  
  
```

[![](https://mermaid.ink/img/eyJjb2RlIjoic3RhdGVEaWFncmFtXG4gICAgXG4gIHN0YXRlIElkbGV7fVxuICBcbiAgWypdIC0tPiBJZGxlXG4gIFxuICBzdGF0ZSBBY2NvdW50QWN0aW9uc3t9XG4gIFxuICBzdGF0ZSBEaXNwZW5zZU1vbmV5e31cbiAgXG4gIHN0YXRlIFByaW50UmVjZWlwdHt9XG4gICAgXG4gIHN0YXRlIFZlcmlmeUFjY291bnR7XG5cbiAgICBzdGF0ZSBWZXJpZnlDYXJke1xuICAgICAgY2FyZFN1Ym1pdHRlZFxuICAgICAgcmVhZENhcmRcbiAgICAgIHJldHVybkNhcmRcbiAgICB9XG4gICAgXG4gICAgc3RhdGUgQ2hlY2tDYXJkIDw8Zm9yaz4-XG4gICAgVmVyaWZ5Q2FyZCAtLT4gQ2hlY2tDYXJkXG4gICAgQ2hlY2tDYXJkIC0tPiBJZGxlOiBbZWxzZV1cbiAgICBDaGVja0NhcmQgLS0-IENhcmRWYWxpZDogW2NhcmRWYWxpZF1cblxuICAgIHN0YXRlIENhcmRWYWxpZHt9XG5cbiAgICBDYXJkVmFsaWQgLS0-IFZlcmlmeVBpblxuICAgICAgXG4gICAgc3RhdGUgVmVyaWZ5UGlue1xuICAgICAgcGluU3VibWl0XG4gICAgICBjaGVja1BpblxuICAgICAgcmV0dXJuQ2FyZFxuICAgIH1cbiAgICBzdGF0ZSBDaGVja1BpbiA8PGZvcms-PlxuICAgIFZlcmlmeVBpbiAtLT4gQ2hlY2tQaW5cbiAgICBDaGVja1BpbiAtLT4gUGluQ29ycmVjdCA6IFBJTlZhbGlkXG4gICAgQ2hlY2tQaW4gLS0-IFBpbkluY29ycmVjdCA6IFtlbHNlXVxuICAgICAgXG4gICAgc3RhdGUgUGluQ29ycmVjdHt9XG5cbiAgICBzdGF0ZSBQaW5JbmNvcnJlY3R7fVxuXG4gICAgUGluSW5jb3JyZWN0IC0tPiBDaGVja1BpbjogW3RyaWVzPG1heFRyaWVzXS90cmllcysrXG4gIH1cbiAgICBcbiAgQWNjb3VudEFjdGlvbnMgLS0-IERpc3BlbnNlTW9uZXlcbiAgXG4gIERpc3BlbnNlTW9uZXkgLS0-IFByaW50UmVjZWlwdFxuICBcbiAgUHJpbnRSZWNlaXB0IC0tPiBUcmFuc2FjdGlvbkNvbXBsZXRlXG4gIFxuICBBY2NvdW50QWN0aW9ucyAtLT4gUHJpbnRSZWNlaXB0XG4gIFxuICBEaXNwZW5zZU1vbmV5IC0tPiBUcmFuc2FjdGlvbkNvbXBsZXRlXG4gIFxuICBUcmFuc2FjdGlvbkNvbXBsZXRlIC0tPiBJZGxlXG4gIFxuICBJZGxlIC0tPiBWZXJpZnlBY2NvdW50IiwibWVybWFpZCI6eyJ0aGVtZSI6ImZvcmVzdCJ9fQ)](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtXG4gICAgXG4gIHN0YXRlIElkbGV7fVxuICBcbiAgWypdIC0tPiBJZGxlXG4gIFxuICBzdGF0ZSBBY2NvdW50QWN0aW9uc3t9XG4gIFxuICBzdGF0ZSBEaXNwZW5zZU1vbmV5e31cbiAgXG4gIHN0YXRlIFByaW50UmVjZWlwdHt9XG4gICAgXG4gIHN0YXRlIFZlcmlmeUFjY291bnR7XG5cbiAgICBzdGF0ZSBWZXJpZnlDYXJke1xuICAgICAgY2FyZFN1Ym1pdHRlZFxuICAgICAgcmVhZENhcmRcbiAgICAgIHJldHVybkNhcmRcbiAgICB9XG4gICAgXG4gICAgc3RhdGUgQ2hlY2tDYXJkIDw8Zm9yaz4-XG4gICAgVmVyaWZ5Q2FyZCAtLT4gQ2hlY2tDYXJkXG4gICAgQ2hlY2tDYXJkIC0tPiBJZGxlOiBbZWxzZV1cbiAgICBDaGVja0NhcmQgLS0-IENhcmRWYWxpZDogW2NhcmRWYWxpZF1cblxuICAgIHN0YXRlIENhcmRWYWxpZHt9XG5cbiAgICBDYXJkVmFsaWQgLS0-IFZlcmlmeVBpblxuICAgICAgXG4gICAgc3RhdGUgVmVyaWZ5UGlue1xuICAgICAgcGluU3VibWl0XG4gICAgICBjaGVja1BpblxuICAgICAgcmV0dXJuQ2FyZFxuICAgIH1cbiAgICBzdGF0ZSBDaGVja1BpbiA8PGZvcms-PlxuICAgIFZlcmlmeVBpbiAtLT4gQ2hlY2tQaW5cbiAgICBDaGVja1BpbiAtLT4gUGluQ29ycmVjdCA6IFBJTlZhbGlkXG4gICAgQ2hlY2tQaW4gLS0-IFBpbkluY29ycmVjdCA6IFtlbHNlXVxuICAgICAgXG4gICAgc3RhdGUgUGluQ29ycmVjdHt9XG5cbiAgICBzdGF0ZSBQaW5JbmNvcnJlY3R7fVxuXG4gICAgUGluSW5jb3JyZWN0IC0tPiBDaGVja1BpbjogW3RyaWVzPG1heFRyaWVzXS90cmllcysrXG4gIH1cbiAgICBcbiAgQWNjb3VudEFjdGlvbnMgLS0-IERpc3BlbnNlTW9uZXlcbiAgXG4gIERpc3BlbnNlTW9uZXkgLS0-IFByaW50UmVjZWlwdFxuICBcbiAgUHJpbnRSZWNlaXB0IC0tPiBUcmFuc2FjdGlvbkNvbXBsZXRlXG4gIFxuICBBY2NvdW50QWN0aW9ucyAtLT4gUHJpbnRSZWNlaXB0XG4gIFxuICBEaXNwZW5zZU1vbmV5IC0tPiBUcmFuc2FjdGlvbkNvbXBsZXRlXG4gIFxuICBUcmFuc2FjdGlvbkNvbXBsZXRlIC0tPiBJZGxlXG4gIFxuICBJZGxlIC0tPiBWZXJpZnlBY2NvdW50IiwibWVybWFpZCI6eyJ0aGVtZSI6ImZvcmVzdCJ9fQ)


### Class Diagram
(Phần này em để cuối cùng vì không biết tại sao chỉ cần Enter sau đoạn code của diagram này thì nó sẽ không hiện ra nữa)
```mermaid
classDiagram

	Address "1" --* "1" Customer: Has
	Customer "1" -- "*" Product: Purchases
	PremiumCustomer --|> Customer
	RegularCustomer --|> Customer
	Bill --o Customer: Belongs to
	Bill ..|> Payment Counter: Accepts
	Bill ..> Discount
	Bill ..> PurchaseDetail
	Discount ..> PurchaseDetail
	Customer -- PurchaseDetail
	PurchaseDetail -- Product
    
  Customer: custName: String
	Customer: custID: Int
	Customer: custPhnum: Int
	Customer: purchaseItem()
	Customer: requestBill()
	Customer: enterCustDetail()
    
  PremiumCustomer: premiumDiscount: Int
	PremiumCustomer: enterCustDetail()

  RegularCustomer: regularDiscount: Int
	RegularCustomer: enterCustDetail()
    
  Product: productID: Int
	Product: productName: String
	Product: productPrice: Float
	Product: getPrice()
	Product: setPrice()
    
  Address: street: String
	Address: city: String
	Address: zipcode: Int
	Address: enterStreet()
	Address: enterCity()
	Address: enterState()
	Address: enterZipcode()
    
  PurchaseDetail: custID: Int
	PurchaseDetail: quantity: Int
	PurchaseDetail: purchaseDate: Date
	PurchaseDetail: productID: Int
	PurchaseDetail: calculateTotalAmt()
	PurchaseDetail: generatePurchaseList()
    
  Discount: discountType
	Discount: discountValue
	Discount: SelectDiscount()
    
  Bill: payableAmt
	Bill: calculatePayableAmt()
	Bill: generateBill()
    
    
    
  <<interface>> Payment Counter
	Payment Counter: calculatePayableAmt()
	Payment Counter: generateBill()```