หมวดหมู่: Design

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