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