ป้ายกำกับ: flowchart

UML: สลับตารางแนวนอนและตารางแนวตั้งUML: สลับตารางแนวนอนและตารางแนวตั้ง

2021-08-072021-08-07| phunsanitphunsanit| 0 Comment | 07:00

จากที่เขียน เอา Matrix มาสลับ column ใน database แนวนอนแนวตั้ง เราจะมาลองดูผังงานหรือโฟลว์ชาร์ต (flowchart) ที่จะสลับตารางแนวนอนเป็นตารางแนวตั้งหรือกลับกันตารางแนวตั้งจะสลับตารางแนวนอน โดยใช้ code ได้ใช้ UML flowchart ใน mermaid.live ที่ copy ไปวางก็เขียนโครงสร้างให้ดูได้ทันที

flowchart TD
 %% 1. START NODE
 Start(( )) --> Init["<b>Start: Initialization</b><br/>ตั้งค่าตัวแปร k = 0 และ i = 0"]

 %% 2. INPUT SECTION
 subgraph Input_Section [Input: ข้อมูลนำเข้า]
  Init --> SourceDef[/"<b>Source Matrix (M x N)</b><br/>รูปร่างเฉพาะ: 2 แถว x 8 คอลัมน์<br/>(Shape: 2x8)"/]
 end

 %% 3. TARGET SETUP
 SourceDef --> TargetDef["<b>Target Setup (R x C)</b><br/>รูปร่างใหม่: 8 แถว x 2 คอลัมน์<br/>(Shape: 8x2)"]

 %% 4. LOOP & LOGIC
 TargetDef --> RowLoop{i < M?}

 subgraph Transformation_Process [กระบวนการประมวลผล]
  RowLoop -- "Yes" --> ColInit["j = 0"]
  ColInit --> ColLoop{j < N?}
  
  subgraph Mapping_Action [Logic การย้ายข้อมูล]
   Pick["หยิบค่า Data = Source[i][j]"]
   Calc["คำนวณตำแหน่งใหม่:<br/>New_Row = floor(k / C)<br/>New_Col = k % C"]
   Place["วางค่า Target[New_Row][New_Col] = Data"]
   Incr["k = k + 1, j = j + 1"]
  end
 end

 %% CONNECTIONS
 ColLoop -- "Yes" --> Pick
 Pick --> Calc --> Place --> Incr
 Incr --> ColLoop
 
 ColLoop -- "No" --> NextRow["i = i + 1"]
 NextRow --> RowLoop

 %% 5. OUTPUT & END
 RowLoop -- "No" --> Output[/<b>Output: ข้อมูลขาออก</b><br/>ตารางใหม่ขนาด 8x2 ที่สมบูรณ์/]
 Output --> End((( )))

 %% STYLING
 style Start fill:#000,stroke:#000
 style End fill:#000,stroke:#fff,stroke-width:4px
 style SourceDef fill:#e1f5fe,stroke:#01579b
 style Output fill:#fff9c4,stroke:#fbc02d

ขั้นตอนการทำงาน

ให้ลองจินตนาการว่าคุณกำลัง “ย้ายของจากกล่องแบน ๆ ยาว ๆ ไปใส่ลังทรงสูง” โดยต้องเรียงลำดับของให้ถูกต้องห้ามสลับกันครับ

  1. การเตรียมตัว (Start & Initialization)
    • เริ่มเดินเครื่อง: เหมือนเราเปิดเครื่องจักรเพื่อเตรียมทำงาน
    • ตั้งค่าตัวนับ: เราเตรียม “สมุดจด” (ตัวแปร k,i,j) เพื่อเอาไว้จำว่า ตอนนี้เราหยิบของชิ้นที่เท่าไหร่แล้ว และกำลังหยิบจากแถวไหน
  2. ข้อมูลขาเข้า (Input: Source Matrix)
    • มองภาพต้นฉบับ: เรามีตารางแบบ “แนวนอน” เช่น มี 2 แถว และ 8 คอลัมน์ (รวม 16 ช่อง)
    • เป้าหมาย: เราต้องการย้ายของจากตารางนี้ไปใส่ในตารางใหม่ที่เป็นแบบ “แนวตั้ง” มี 8 แถว แถวละ 2 ช่อง
  3. กระบวนการย้าย (The Loop & Logic)
    • การหยิบ (Pick): พนักงานเดินไปที่ตารางแนวนอน หยิบของออกมาทีละชิ้นตามลำดับจากซ้ายไปขวา
    • การคำนวณที่อยู่ใหม่ (Map): พนักงานจะคำนวณว่า “ของชิ้นที่ k นี้ ต้องเอาไปวางที่แถวไหนและช่องไหนในตารางแนวตั้ง” โดยใช้สูตรคณิตศาสตร์ง่าย ๆ (หารเอาเศษและหารปัดเศษ)
    • การวาง (Place): นำของไปวางในช่องใหม่ที่คำนวณได้ แล้วจดบันทึกว่า “ชิ้นนี้เสร็จแล้วนะ” (k=k+1)
  4. การตรวจสอบเงื่อนไข
    • ทำซ้ำจนกว่าจะครบ: พนักงานจะถามตัวเองตลอดว่า “ในแถวนี้ยังมีของเหลือไหม?” (ColLoop) และ “ยังมีแถวถัดไปให้ทำอีกไหม?” (RowLoop)
    • ขยับไปทีละนิด: ถ้าในแถวแรกหมดแล้ว ก็จะขยับไปเริ่มแถวที่สองต่อทันที (i=i+1)
  5. ผลลัพธ์และการส่งมอบ (Output & End)
    • ตรวจสอบความเรียบร้อย: เมื่อพนักงานหยิบของจนครบทั้ง 16 ชิ้นแล้ว ระบบจะหยุดทำงาน
    • ส่งมอบงาน: เราจะได้ตารางแนวตั้ง (8×2) ที่มีข้อมูลเรียงลำดับถูกต้องตามที่เราต้องการ

อ่านเพิ่มเติม

Read MoreRead More