# 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):
## 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):
Sign in with Wallet
Connect another wallet