Workflow Builder

เว็บแอปสำหรับสร้าง ผังการไหลของกระบวนการ (workflow) แบบ swimlane ตามฟอร์ม บฟ. ของ กฟภ. แล้ว export เป็นรูปภาพ / ตาราง Excel

เวอร์ชัน 0.2.0 — "form-first" กรอกขั้นตอนทีละใบทางซ้าย → โปรแกรมวาดผัง swimlane ให้อัตโนมัติทางขวา (เวอร์ชัน 0.1 ที่เป็น canvas ลากกล่องเอง เก็บไว้ที่โฟลเดอร์ _v1_backup/)

---

1. ติดตั้งเครื่องมือ (ทำครั้งเดียว)

ต้องมี Node.js ก่อน

1. เปิด https://nodejs.org → โหลดปุ่ม LTS (ไฟล์ .pkg สำหรับ macOS Apple Silicon)
2. ดับเบิลคลิกติดตั้ง (กด Next ไปเรื่อย ๆ ใส่รหัสเครื่องตอนท้าย)
3. เปิด 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. แผนงานต่อ

• เลนปรับขนาดอัตโนมัติ + ช่องเดินสายกันลูกศรทับกัน
• เลนแบบ meta (ระยะเวลา / Data in / Application / Data out) แสดงข้างผัง
• ฝังรูป flow ลงไฟล์ Excel เอง (เขียน DrawingML)
• ลาก-วางสลับลำดับขั้น (ตอนนี้ใช้ปุ่ม ↑↓)
• Application column แสดงเป็นรูปธง + เส้นประเชื่อม (แบบในฟอร์มจริง)
• undo / redo
• Thai line-break ในกล่องผัง (ตอนนี้ขึ้นบรรทัดที่ช่องว่าง/นับตัวอักษร ยังตัดกลางคำบางจุด)
• (ภายหลัง) แชร์แก้หลายคน