ตัว Mermaid จะสามารถตกแต่งให้สวยงามแบบมีสไตล์ได้ง่าย ๆ หลายวิธี
- theme จะเป็นการกำหนดการแสดงผลแบบทั่ว ๆ ไป โดยการกำหนด
theme
ไว้ใน config
—
config:
theme: neutral
—
โดยสามารถกำหนดได้จาก Design > themes > {theme name} - custom theme ที่จะทำเองได้ โดย Customizing Themes with themeVariables
- classDef จะเป็นการกำหนดแบบกลุ่มหลาย ๆ obeject
โดยจะมี classDef default เป็นแบบเริ่มต้น ที่จะกำหนดให้ใช้ในระบบวิธีใช้คือ- สร้าง object ขึ้นมาก่อน เช่น
Start(["Start"])
- สร้าง classdef เช่น
classDef start fill:#D6FFD4,stroke:#3C6A39,stroke-width:2px,color:#3C6A39,font-weight:bold,rx:20,ry:20 - จับคู่ โดยมีรูปแบบ
- 1:1
{object id}:{classDef name}
เช่นStart:::start
- 1:n
{
object id 1,
2,object id
object id
3}:{classDef name}
เช่น
class return1,return2 output
- 1:1
- สร้าง object ขึ้นมาก่อน เช่น
- style โดยมีรูปแบบ
style{object id}
{styles}
เช่น
style decision1 stroke:#D50000
---
config:
theme: forest
themeVariables:
primaryColor: '#E0E9FF'
primaryBorderColor: '#4169E1'
primaryTextColor: '#4169E1'
secondaryColor: '#FFF2C9'
secondaryBorderColor: '#D1A80A'
secondaryTextColor: '#D1A80A'
tertiaryColor: '#FFFFFF'
tertiaryBorderColor: '#666666'
tertiaryTextColor: '#666666'
lineColor: '#666666'
mainBkg: '#FFFFFF'
nodeBorder: '#666666'
clusterBkg: '#F5F5F5'
clusterBorder: '#AAAAAA'
---
flowchart TD
subgraph subGraph0["Tax Rate calculation คำนวณตามขั้นบันได"]
processTaxRate2["taxAmount = 0"]
processTaxRate["taxBaseNew = taxBase"]
loopStart{{"Start Loop"}}
checkResultSet1{"มีข้อมูล rate จาก database"}
calculateTax1["taxBaseRate = taxBaseNew"]
calculateTax2["taxRange = resultSet.rateTo - resultSet.rateFrom"]
calculateTax3["taxAmount += (taxBaseNew - taxRange) * (resultSet.taxRate / 100)"]
calculateTax4["taxBaseNew -= taxBaseNew"]
decision11{"taxBaseNew <= 0"}
calculateTax5["return taxAmount"]
end
Start(["Start"]) --> API["API input"]
API --> decision1{"บุคคลธรรมดา ?"}
decision1 -- True --> decision2@{ label: "validation citizenId != ''<br>และ caAmount > 0" } & decision3@{ label: "validation juristicId != ''<br>และ caAmount > 0" }
decision2 -- False --> return2["http status: = 422<br>message: Unprocessable Entity"]
decision2 -- True --> decision4{"ประเภทบุคคล"}
decision4 -- ห้างหุ้นส่วนสามัญที่มิใช่นิติบุคคล หรือคณะบุคคลที่ไม่ใช่นิติบุคคล --> processBase5{"base => 60,000"}
processBase5 -- False --> processTaxNull["taxAmount = 0"]
processBase5 -- True --> decision5{"มีเงินได้เกิดจากแหล่งในประเทศ"} & decision6{"มีเงินได้เกิดจากแหล่งนอกประเทศไทย"}
decision5 -- False --> processBase3["base = 0"]
decision5 -- True --> processJoined1["processJoined1"]
decision6 -- True --> decision7{"อยู่ในไทย 180 วันและนำเงินได้เข้ามา"}
decision7 -- False --> processBase3
processBase3 --> processTaxNull
decision7 -- True --> processJoined1
processJoined1 --> processTax5["base = - ค่าใช้จ่ายตามที่กฎหมายกำหนด"]
processTax5 --> processTax9["base = - ค่าลดหย่อนต่าง ๆ"]
processTax9 --> db2[(อัตราภาษีเงินได้บุคคลธรรมดา)]
db2 --> processTaxRate
decision4 -- กองมรดกที่ยังไม่ได้แบ่ง --> processBase6{"base => 60,000"}
processBase6 -- False --> processTaxNull
decision4 -- บุคคลธรรมดาและผู้ถึงแก่ความตาย --> decision8{"เงินเดือนเพียงอย่างเดียว"}
decision8 -- True --> decision9{"โสด"}
decision9 -- True --> processBase1["base => 120,000"]
processBase1 -- False --> processTaxNull
decision9 -- False --> processBase2["base => 220,000"]
processBase2 -- False --> processTaxNull
decision3 -- False --> return2
decision3 -- True --> corporateType{"ประเภทกิจการ"}
return2 --> Stop((("Stop")))
corporateType -- นิติบุคคลที่ไม่ต้องเสียภาษี --> processTaxNull
processTaxNull --> return1["http status = 200<br>taxAmount"]
return1 --> Stop
corporateType -- ภาษีเงินได้นิติบุคคลคำนวณจากกำไรสุทธิ --> db1[(ประมวลรัษฎากร)]
db1 --> processTaxRate
corporateType -- ภาษีเงินได้นิติบุคคลคำนวณจากยอดรายได้ก่อนหักรายจ่าย: กิจการขนส่ง --> processTax4["tax = 3"]
processTax4 --> processTaxPercentage["base tax x tax rate"]
corporateType -- ภาษีเงินได้นิติบุคคลคำนวณจากยอดรายได้ก่อนหักรายจ่าย: มูลนิธิหรือสมาคม --> corporateType3["เงินได้ประเภท 8"]
corporateType3 -- False --> processTax2["tax = 10"]
processTax2 --> processTaxPercentage
corporateType3 -- True --> processTax3["tax = 2"]
processTax3 --> processTaxPercentage
corporateType -- ภาษีเงินได้นิติบุคคลสำหรับเงินได้ที่จ่ายจากหรือในประเทศไทย --> decision10{"เงินได้พึงประเมินมาตรา 40<br>วงเล็บ 2, 3, 4, 5, 6"}
decision10 -- False --> processTax6["tax = 15"]
processTax6 --> processTaxPercentage
decision10 -- True --> processTax7["tax = 10"]
processTax7 --> processTaxPercentage
corporateType -- ภาษีเงินได้นิติบุคคลสำหรับการจำหน่ายกำไรไปนอกประเทศ --> processTax8["tax = 10"]
processTax8 --> processTaxPercentage
processTaxPercentage --> Stop
processTaxRate --> processTaxRate2
processTaxRate2 --> loopStart
loopStart --> checkResultSet1
checkResultSet1 -- Yes --> calculateTax1
calculateTax1 --> calculateTax2
calculateTax2 --> calculateTax3
calculateTax3 --> calculateTax4
calculateTax4 --> decision11
decision11 -- False --> loopStart
decision11 -- True --> calculateTax5
calculateTax5 --> return1
n1["Text Block"]
%% Shape and style definitions
API@{ shape: lean-r}
decision2@{ shape: diamond}
decision3@{ shape: diamond}
return2@{ shape: lean-l}
return1@{ shape: lean-l}
n1@{ shape: text}
style decision1 stroke:#D50000
%% Grouped Class Assignments
classDef default fill:#f9f,stroke:#333,stroke-width:4px,fill:#f9f,stroke:#333,stroke-width:4px
classDef database fill:#B0D9FF,stroke:#4169E1,stroke-width:2px,color:#4169E1,font-weight:bold
classDef decision fill:#FFF2C9,stroke:#D1A80A,stroke-width:2px,color:#D1A80A,font-weight:bold
classDef input fill:#E0E9FF,stroke:#666666,stroke-width:2px,color:#666666,font-weight:bold,shape: lean-r
classDef output fill:#D6FFD4,stroke:#666666,stroke-width:2px,color:#666666,font-weight:bold,shape: lean-l
classDef process fill:#E0E9FF,stroke:#4169E1,stroke-width:2px,color:#4169E1,font-weight:bold,rx:5,ry:5
classDef start fill:#D6FFD4,stroke:#3C6A39,stroke-width:2px,color:#3C6A39,font-weight:bold,rx:20,ry:20
classDef stop fill:#FFD4D4,stroke:#A13D3D,stroke-width:2px,color:#A13D3D,font-weight:bold,rx:20,ry:20
class processTaxRate2,processTaxRate,calculateTax1,calculateTax2,calculateTax3,calculateTax4,calculateTax5,processBase5,processBase3,processJoined1,processTax5,processTax9,processBase6,processBase1,processBase2,corporateType,corporateType3,processTax4,processTax2,processTax3,processTax6,processTax7,processTax8,processTaxPercentage,processTaxNull process
class loopStart,checkResultSet1,decision1,decision2,decision3,decision4,decision5,decision6,decision7,decision8,decision9,decision10,decision11 decision
class API input
class return1,return2 output
class Start start
class Stop stop
class db1,db2 database