ป้ายกำกับ: Style

Mermaid.js: ตกแต่งวาดแบบมี stylesMermaid.js: ตกแต่งวาดแบบมี styles

ตัว Mermaid จะสามารถตกแต่งให้สวยงามแบบมีสไตล์ได้ง่าย ๆ หลายวิธี

  • theme จะเป็นการกำหนดการแสดงผลแบบทั่ว ๆ ไป โดยการกำหนด theme ไว้ใน config

    config:
    theme: neutral


    โดยสามารถกำหนดได้จาก Design > themes > {theme name}
  • custom theme ที่จะทำเองได้ โดย Customizing Themes with themeVariables
  • classDef จะเป็นการกำหนดแบบกลุ่มหลาย ๆ obeject
    โดยจะมี classDef default เป็นแบบเริ่มต้น ที่จะกำหนดให้ใช้ในระบบวิธีใช้คือ
    1. สร้าง object ขึ้นมาก่อน เช่น Start(["Start"])
    2. สร้าง classdef เช่น
      classDef start fill:#D6FFD4,stroke:#3C6A39,stroke-width:2px,color:#3C6A39,font-weight:bold,rx:20,ry:20
    3. จับคู่ โดยมีรูปแบบ
      • 1:1
        {object id}:{classDef name}
        เช่น
        Start:::start
      • 1:n
        {object id 1, object id 2, object id 3 }:{classDef name}
        เช่น
        class return1,return2 output
  • 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