Tag Archive Class

Byphunsanit

Mermaid.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