Workflow Builder
เว็บแอปสำหรับสร้าง ผังการไหลของกระบวนการ (workflow) แบบ swimlane ตามฟอร์ม บฟ. ของ กฟภ.
แล้ว export เป็นรูปภาพ / ตาราง Excel
เวอร์ชัน 0.2.0 — "form-first"
กรอกขั้นตอนทีละใบทางซ้าย → โปรแกรมวาดผัง swimlane ให้อัตโนมัติทางขวา
(เวอร์ชัน 0.1 ที่เป็น canvas ลากกล่องเอง เก็บไว้ที่โฟลเดอร์ _v1_backup/)
1. ติดตั้งเครื่องมือ (ทำครั้งเดียว)
ต้องมี Node.js ก่อน
- เปิด https://nodejs.org → โหลดปุ่ม LTS (ไฟล์
.pkg สำหรับ macOS Apple Silicon)
- ดับเบิลคลิกติดตั้ง (กด Next ไปเรื่อย ๆ ใส่รหัสเครื่องตอนท้าย)
- เปิด Terminal ใหม่ พิมพ์
node -v — ถ้าขึ้นเลขเวอร์ชัน = ใช้ได้
2. รันแอป
เปิด Terminal มาที่โฟลเดอร์นี้ แล้วรัน (ครั้งแรกครั้งเดียว):
npm install
จากนั้นทุกครั้งที่จะเปิดแอป:
npm run dev
เบราว์เซอร์จะเปิด http://localhost:5173 ให้เอง · แก้โค้ดแล้วหน้าเว็บรีเฟรชอัตโนมัติ ·
กด Ctrl + C ใน Terminal เพื่อปิด
3. วิธีใช้งาน
แนวคิดหลัก
งานหนึ่ง = ลิสต์ของขั้นตอนที่เรียงลำดับ ไม่ต้องลากกล่อง
ตำแหน่งกล่องกับลูกศรในผังคำนวณให้จาก:
- คอลัมน์ = เลน (หน่วยงาน) ที่เลือกให้แต่ละขั้น
- แถว = ลำดับของขั้นในลิสต์
- ลูกศร = วาดเฉพาะ "เส้นทางออก" ที่ตั้งไว้เท่านั้น (ไม่ต่ออัตโนมัติ) —
กางการ์ดขั้นตอน → หัวข้อ เส้นทางออก → กด "→ ไปขั้นถัดไป" หรือ "เพิ่มเส้นทาง"
แล้วเลือกปลายทางเอง · หัวลูกศรชี้เข้ากึ่งกลางขอบบนของกล่องเสมอ
เลนมี 2 ชนิด:
- กระบวนการ (org) — คอลัมน์หน่วยงานใต้แถบ "กระบวนการ" (สำนักงานใหญ่ / กฟข. / กฟฟ. / อื่นๆ) กล่องขั้นตอนอยู่ที่นี่
- คอลัมน์ข้าง (meta) — ระยะเวลา / Data in / Application / Data out — ไม่มีกล่อง
แต่แสดงค่า field ของแต่ละขั้นตรงแถวนั้น (แก้ค่าในการ์ดขั้นตอน)
เลนปรับขนาดอัตโนมัติ: เลน org กว้างเผื่อไว้ · เลนที่ไม่มีขั้นตอน/ไม่มีลูกศรผ่าน
จะแคบลง · เลนที่มีลูกศรวิ่งผ่านจะกว้างขึ้น โดยดันลูกศรไปคนละ "ช่องเดินสาย"
(routing channel) ทั้งฝั่งซ้ายและขวาของเลน — โปรแกรมเลือกฝั่งอัตโนมัติ
(ข้ามไปเลนซ้าย = อ้อมซ้าย, ข้ามไปเลนขวา = อ้อมขวา, กิ่ง decision สลับฝั่ง)
กล่องเยื้อง (stagger): ถ้า decision แตกไปหลายกล่องในเลนเดียวกัน กล่องแรก (ใกล้สุด)
อยู่กลางเลน กล่องที่เหลือจะเยื้องออกข้างตามฝั่งของเส้นที่วิ่งเข้ามา (ซ้าย/ขวา)
และเลนนั้นจะกว้างขึ้นเพื่อรองรับ
กล่องปรับความสูงตามข้อความ: ข้อความแสดงเต็มทุกตัว ไม่ตัดทิ้ง — กล่องสูง
เท่าที่ต้องใช้ (Decision จะขยายเป็นเพชรสูงขึ้น) และแถวถัดไปเลื่อนลงตาม
กล่องกับกล่องไม่ทับกัน
ส่วนต่าง ๆ
| ส่วน | ทำอะไร |
|---|
| Top bar → ชื่อกระบวนการ | ช่องกลาง แก้ได้ทันที (ไปเป็นหัวตาราง Excel) |
| Top bar → เทมเพลต | โหลดแม่แบบ (แทนที่งานปัจจุบันทั้งหมด) |
| Top bar → เปิด / บันทึก | เปิด/เซฟไฟล์ .flow.json |
| Top bar → Export | PNG, SVG (รูปผัง) · Excel (.xlsx ฟอร์ม บฟ.) |
| ซ้าย → เพิ่มขั้นตอน | เพิ่มการ์ดขั้นตอนใหม่ (แทรกต่อจากใบที่เลือกอยู่) |
| ซ้าย → เลน (n) | เปิด/ปิดตัวจัดการเลน: เพิ่ม/ลบ/เปลี่ยนชื่อ/สลับลำดับ · เลือกชนิด org/meta · เลือก field ที่ meta แสดง · ชื่อแถบรวม |
| การ์ดขั้นตอน (ย่อ) | โชว์ ลำดับ · ชนิด · เลน · ปุ่ม ↑↓ สลับลำดับ — คลิกหัวการ์ดเพื่อกาง/ย่อ (ลูกศร ˅ ด้านขวา) |
| การ์ดขั้นตอน (กาง) | เปลี่ยนชนิด/เลน · กรอก field บฟ. ทุกช่อง · ตั้งเส้นทางแยก · ลบขั้นตอน — คลิกหัวการ์ดซ้ำเพื่อย่อ (กล่องในผังยังไฮไลต์อยู่) |
| หน่วยงานรับผิดชอบหลัก | ช่องเดียว — เป็นทั้งคอลัมน์ในตาราง บฟ. และป้ายสีแดงใต้กล่องในผัง |
| ผัง (ขวา) | trackpad จีบนิ้ว (หรือ Ctrl+ลูกกลิ้ง) = ซูมเฉพาะผัง · เลื่อน 2 นิ้ว / ลากพื้นที่ว่าง = แพน · ปุ่มขวาล่าง = ซูม/พอดีจอ · คลิกกล่อง = เลือกขั้นนั้น |
ชนิดกล่อง
Start / End (วงกลมเขียว) · Process (กล่องเหลือง) · Decision (สี่เหลี่ยมข้าวหลามตัด) ·
Connector (วงกลมเล็กมีตัวอักษร — จุดข้ามหน้า)
เส้นทางออก / เส้นทางแยก
ในการ์ดที่กาง หัวข้อ เส้นทางออก (Decision = เส้นทางแยก):
- "→ ไปขั้นถัดไป" — ปุ่มลัด สร้างเส้นไปขั้น N+1
- "เพิ่มเส้นทาง" — เพิ่มเส้นแล้วเลือกปลายทางเอง (+ ใส่ label เช่น "ซ่อมได้")
- ไม่มีเส้นทางออกเลย = ไม่มีลูกศรออกจากขั้นนั้น (ไม่ต่ออัตโนมัติ)
- Decision ควรมี ≥ 2 เส้น
- ถ้าสลับลำดับขั้นทีหลัง เส้นยังชี้ปลายทางเดิม (ต้องแก้เอง)
4. เกี่ยวกับ Export
PNG / SVG
รูปผังทั้งหมด render จาก SVG ที่แอปวาดเอง (พื้นขาว) — เอาไปแปะสไลด์ / Canva / เอกสารได้เลย
Excel (ฟอร์ม บฟ.)
ไฟล์ .xlsx ตารางตามฟอร์ม บฟ.: งาน/ขั้นตอน · กรอบระยะเวลา · หน่วยงานรับผิดชอบหลัก ·
ตำแหน่งผู้ปฏิบัติงาน · Data Input/Output · ระเบียบที่เกี่ยวข้อง · Application in Process ·
และคอลัมน์ สนญ./กฟข./กฟฟ./อื่นๆ (ทำเครื่องหมาย ● ตามเลนของแต่ละขั้น)
ลำดับแถว = ลำดับขั้นในลิสต์ เป๊ะ (นับเฉพาะ Process + Decision)
⚠️ ช่อง "ผังการไหล" ในไฟล์ Excel ยังต้องวาดเองจากรูป PNG ที่ export
(write-excel-file ฝังรูปในเซลล์ไม่ได้)
5. โครงสร้างโค้ด (สำหรับแก้ใน VS Code)
src/
main.tsx จุดเริ่มของแอป
App.tsx layout: TopBar + (StepList | DiagramPane)
index.css design system + สไตล์ทั้งหมด (โทเคนสีอยู่บล็อก :root บนสุด)
store.ts "สมอง" — เก็บ title/lanes/steps + ทุก action แก้ไข (Zustand)
domain/
types.ts นิยามข้อมูล: Process, Lane, Step, Branch
theme.ts สี, ขนาดกล่อง, ค่าคงที่ layout
layout.ts ★ แปลง Process → พิกัดกล่อง + เส้นลูกศร (ฟังก์ชันล้วน)
templates.ts แม่แบบ: Blank + งานซ่อมแซมและบำรุงรักษา
components/
TopBar.tsx แถบบน + เมนู เทมเพลต/Export
Menu.tsx dropdown เล็ก ๆ
StepList.tsx คอลัมน์ซ้าย: หัว + ลิสต์การ์ด
StepCard.tsx การ์ดขั้นตอน 1 ใบ (ย่อ/ขยาย + ฟอร์ม + เส้นทางแยก)
LaneEditor.tsx ตัวจัดการเลน
DiagramPane.tsx กรอบผังขวา: ซูม/แพน + ปุ่มควบคุม
Diagram.tsx ★ วาด SVG จากผล layout
icons.tsx ไอคอนเส้น
lib/
persistence.ts เซฟ/โหลด .flow.json
exportImage.ts SVG → ไฟล์ .svg / .png (ผ่าน canvas)
exportExcel.ts ตารางฟอร์ม บฟ. (.xlsx)
เทคโนโลยี: React + TypeScript + Vite + Zustand (state) + write-excel-file
วาดผังด้วย SVG เขียนเอง — ไม่มี React Flow / ไลบรารีวาด
จุดที่มักต้องแก้
- สี →
src/domain/theme.ts (COLORS)
- ขนาด/ความกว้างกล่อง + จำนวนตัวอักษรต่อบรรทัด →
src/domain/theme.ts (BOX, ROUND_SIZE)
- ระยะห่าง/ขนาดเลน/ผัง →
src/domain/theme.ts (LAYOUT)
- การเดินเส้นลูกศร / ช่องเดินสาย →
src/domain/layout.ts (computeLayout ส่วน edge paths + colourIntervals)
- ความกว้างเลน / ช่องเดินสาย / ระยะเยื้องกล่อง →
src/domain/theme.ts (LAYOUT.laneContentW, channelW, emptyLaneW, boxOffset)
- ช่องในฟอร์มขั้นตอน →
src/components/StepCard.tsx (FIELDS_FOR, FIELD_LABEL)
- คอลัมน์/หัวตาราง Excel →
src/lib/exportExcel.ts
- โทนสี UI → ตัวแปร
--accent ฯลฯ ที่ :root ใน src/index.css
6. แผนงานต่อ
