คู่มือการใช้งานระบบ Flow Diagram — IC, Group, Level, Port, และ Command
🏢 Enterprise Edition · v2.0🐣 Flow Diagram คือระบบ visual programming แบบ node-based ที่ทุก diagram คือ IC (Integrated Circuit) — มี input 3 ช่อง (I0, I1, I2) และ output 3 ช่อง (O0, O1, O2) สามารถซ้อนกันได้ไม่จำกัดระดับ
💡 สรุป: IC = Group + Template + Ports I0-I2 O0-O2 + reuse ได้ ถ้าคุณสร้าง diagram แล้วกด 💾 Save IC → Group จะกลายเป็น IC Template
พอร์ตเป็นหัวใจของ IC — ทุก IC/Group มี 6 พอร์ตอัตโนมัติ
I0 I1 I2 — Input Ports: รับค่าจาก node ภายนอก เข้าสู่ diagram ข้างใน (แก้ไขค่าได้)
O0 O1 O2 — Output Ports: ส่งค่าจาก diagram ข้างใน ออกไปยัง node ภายนอก (แสดงค่าจริง)
📦 กด 💾 Save IC → บันทึก diagram ปัจจุบันเป็น template ไว้ใช้ซ้ำ
📦 กด 📦 IC (N) หรือคลิกที่ถาด IC ล่าง → เลือก template → สร้าง instance ใหม่
📦 กด 🔄 อัป IC → อัปเดต template → ซิงค์ทุก instance อัตโนมัติ
📦 กด 🆕 IC → สร้าง IC เปล่าพร้อม I0-I2, O0-O2, ตั้งชื่อทันที
📦 กด 📋 → เปิด IC Inventory Panel ดู template ทั้งหมด + ลบ
💾 Template เก็บใน localStorage สามารถ backup ผ่าน 💾 JSON ได้
พิมพ์คำสั่งในช่อง Command Bar (มุมขวาล่างของหน้า) เพื่อควบคุม Flow Diagram ด้วยข้อความ — ไม่ต้องคลิก!
| คำสั่ง | ตัวอย่าง | คำอธิบาย |
|---|---|---|
| เพิ่ม node | เพิ่ม node เลข 45000 ที่ 100 200 | สร้าง node ชนิด number/plus/minus/mul/div/sum/avg/variable/group |
| + / - / × / ÷ | + number 500 @ 300 400 | สร้าง node ชนิดต่าง ๆ พร้อมระบุค่าและตำแหน่ง |
| connect / เชื่อม | เชื่อม n1 o0 n2 i0 | เชื่อมต่อ port o0 ของ node แรก ไป i0 ของ node ที่สอง |
| connect / เชื่อม | connect n1 n2 | เชื่อมต่อแบบ shorthand (ใช้ o0 → i0 อัตโนมัติ) |
| ลบ node | ลบ node n3 | ลบ node ตาม ID |
| เปลี่ยนค่า | เปลี่ยนค่า n1 เป็น 50000 | เปลี่ยน value ของ node number |
| note / โน้ต | note n1 "รายได้รวม" | เพิ่ม/เปลี่ยนโน้ตของ node |
| เปลี่ยนชื่อ | เปลี่ยนชื่อ project "My Flow" | เปลี่ยนชื่อ Project |
| rename / ชื่อ | rename "Project 1" | เปลี่ยนชื่อ Project (แบบสั้น) |
| arrange / จัดเรียง | arrange | จัดเรียง node ทั้งหมดตามลำดับการเชื่อมต่อ |
| fit | fit | ปรับมุมมองให้เห็น node ทั้งหมด |
| run / รัน / ประมวล | run | ประมวลผล diagram ทั้งหมด |
| clear / ล้าง | clear | ล้าง diagram ทั้งหมด |
| export / save / ดาวน์โหลด | export | ดาวน์โหลด state เป็น .json |
| theme / ธีม | theme enterprise | เปลี่ยนธีม: dark / light / cute / contrast / enterprise |
| ช่วย / help | help | แสดงคำสั่งที่ใช้งานได้ |
💡 Tips: พิมพ์ help ใน Command Bar เพื่อดูคำสั่งทั้งหมด หรือสั่งเป็นภาษาอังกฤษก็ได้ เช่น add number 100 at 200 300
🖱️ Double-click IC / Group → เจาะลึกเข้าไปดู diagram ข้างใน
🌳 Tree → แสดงโครงสร้าง diagram ทั้งหมดแบบ hierarchy → คลิกเพื่อ navigate
⬆ กลับ / ⤒ บนสุด → ออกจาก level ปัจจุบัน
🔲 Fit → ปรับ canvas ให้เห็น node ทั้งหมด
📐 Arrange → จัดเรียง node อัตโนมัติ
📋 JSON → Export/Import state (backup)
💾 JSON → ดาวน์โหลด state เป็นไฟล์ .json
📸 PNG → export diagram เป็นรูปภาพ
🖱️ ลาก toolbar → คลิกที่ว่างบน toolbar แล้วลากย้ายตำแหน่ง
🗕 → ย่อ toolbar
📍 Breadcrumb + 🌳 Tree Diagram แสดงระดับ + ID (เช่น L1, L2) เสมอ