Flow Sim

Flow-Sim — สื่อ "flow จำลอง" แบบ interactive

สร้างไฟล์ HTML เดี่ยว self-contained (ไม่มี dependency ภายนอก) ที่เล่าการทำงานของระบบ/โปรโตคอล เป็นขั้น ๆ ด้วยแอนิเมชัน ใช้สำหรับการบรรยาย/สอนมาตรฐาน เปิดได้ทันทีในเบราว์เซอร์

กฎเหล็ก

1. โคลน engine จาก reference/template.html — ห้ามเขียน engine ใหม่ ห้ามเปลี่ยนจังหวะ/สไตล์แอนิเมชัน ความสม่ำเสมอข้ามไฟล์สำคัญกว่าความแปลกใหม่ สิ่งที่แก้คือ data เท่านั้น: NODES, CONN, KIND, BADGE, step arrays, ข้อความ header/desc/legend/foot และจำนวน tab
2. เนื้อหาอิงมาตรฐาน → ค้นคลังก่อนออกแบบขั้นตอน (skill corpus-search / wiki hotcache) เพื่อให้ชื่อ message, ฟิลด์, บทบาท ตรงกับเล่มจริง — ห้ามใช้ศัพท์จากความจำ
3. ภาษาไทยทั้งหมด ศัพท์เทคนิคทับศัพท์ · ธีมมืดเป็นค่าเริ่มต้น (พื้น #0c1020, การ์ด #18203c) ต้องมีปุ่มสลับ Light/Dark (🌓 มุมขวาบน) ทุกไฟล์เสมอ — template มีให้แล้ว (บล็อก html.light{...} + #themeBtn
   • gradient nodefillL ใน defs + สคริปต์ theme ที่จำค่าใน localStorage key sdDeckTheme) โคลนมาทั้งชุด ห้ามตัดทิ้ง เหตุผล: ไฟล์เหล่านี้ถูกเปิดฉายบนโปรเจกเตอร์ห้องประชุมสว่าง ซึ่งธีมมืดอ่านไม่ออก (prakarn 31 ก.ค. 2569) 3b. ร้อยแก้วไทยใช้อักขระคีย์บอร์ดเท่านั้น (desc, step t/d, foot, legend): ห้าม — – … “ ” ‘ ’ แทน — ด้วยคำเชื่อมตามบริบท (ซึ่ง · ที่ · โดย · เพราะ · ดังนั้น · ส่วน) หรือแยกประโยค หรือใช้วงเล็บ · จุดไข่ปลาใช้ ... อัญประกาศใช้ " ตรง โดยยกเว้นตัวคั่นเชิงกราฟิก · และลูกศร → ที่ตั้งใจใช้เป็นดีไซน์ (ผู้อ่านที่ชำนาญเอกสารดูออกทันทีว่า em dash คือลายเซ็นของ AI ตามที่ prakarn ระบุ 8 ส.ค. 2569) ⚠️ template และไฟล์ flow เดิมยังมี — ปนอยู่ ถือเป็นหนี้เก่า ไม่ใช่แบบอย่างให้ทำตาม
4. สิ่งที่ user ต้องบอกมีแค่ หัวเรื่อง — โหนด/แท็บ/ขั้นตอน ถ้าไม่ระบุ ให้ออกแบบเองจากมาตรฐานจริง อย่าถามเพิ่มถ้าเดาอย่างมีหลักได้

Output

• ไฟล์: <topic-slug>-flow.html วางที่ root ของโปรเจกต์ปัจจุบัน (ตามแพตเทิร์น vc-issuance-flow.html, mdl-offline-flow.html)
• ถ้าโปรเจกต์มี index.html แบบหน้ารวมการ์ด → เพิ่มการ์ด "ส่วนที่ N" สีใหม่ให้เข้าชุด

สเปก data ของ engine (สิ่งที่ต้องเขียนต่อไฟล์)

NODES = { id: {x, y, icon:"🏛️", title:"Issuer", role:"คำอธิบายไทยสั้น ๆ"} }  // 2–6 โหนด
NW=200, NH=98                       // ขนาดกล่อง, viewBox คงที่ 0 0 1200 700
CONN  = { id: "M.. C.. | L.." }     // path เริ่ม→จบตามที่เขียน
KIND  = { kind: {c:"var(--สี)", t:"ป้ายบน token ≤4 ตัว"} }   // สีหนึ่ง = ความหมายหนึ่ง
BADGE = { kind: "ป้ายท้ายชื่อขั้น" }
steps = [{ t:"ชื่อขั้น", d:"คำอธิบาย 1–2 ประโยค",
           segs:[{id:"conn_id", rev:true?}],   // token วิ่งตาม path เรียงต่อกัน (ทำ round-trip ได้)
           node:"node_id",                     // ใช้เมื่อ segs:[] = เหตุการณ์ในโหนดเดียว (token ลอยเหนือกล่อง + pulse)
           focus:["โหนดที่สว่าง"],              // ตัวสุดท้าย = โหนดที่ pulse ตอน token ถึง
           kind:"kind" }]
buildFlow(section, steps, opts)     // opts.dim:{nodes:[],conns:[]} = หรี่องค์ประกอบที่ไม่ถูกใช้ในแท็บนั้น

เคล็ดเรขาคณิต: จุดเกาะขอบกล่อง — ซ้าย/ขวา = x∓NW/2, บน/ล่าง = y∓NH/2 เส้นโค้งระหว่างโหนดแถวเดียวกัน ใช้คู่ arc บน (ไป) / arc ล่าง (กลับ) แบบใน template

ลูกเล่นที่มีให้แล้วใน template (เลือกใช้ตามเนื้อเรื่อง)

• หลายโหมด → หลาย tab (ก๊อป <section class="flow"> + .tab + เรียก buildFlow ต่อ section)
• โซนบน/ล่าง + เส้นประกั้น + ป้ายโซน (เช่น ออนไลน์/offline, ฝั่งรัฐ/ฝั่งประชาชน)
• opts.dim หรี่โซนที่ไม่ถูกใช้ + ป้ายกระพริบมุมขวาบน (.offline-flag) — ตัดออกถ้าไม่เกี่ยว
• 5–8 ขั้นต่อแท็บกำลังดี · legend ด้านล่างต้องตรงกับ kind ที่ใช้จริง · foot อ้างอิงมาตรฐาน/ศัพท์สำคัญ

ตรวจก่อนส่งมอบ (ทุกครั้ง)

1. extract <script> แล้ว node --check — syntax ต้องผ่าน 1b. เปิดไฟล์แล้วกดปุ่ม 🌓 ทดสอบทั้งสองโหมด — โหมดสว่างต้องอ่านออกครบ (เส้นเชื่อม/กล่อง/ตัวหนังสือ/token ไม่จม)
2. เพิ่มการ์ดใน index.html แล้ว (ถ้ามีหน้ารวม)
3. open <ไฟล์> เปิดให้ user ดูทันที
4. สรุปสั้น ๆ: มีแท็บอะไร กี่ขั้น เน้นจุดไหน และแปลกจาก template ตรงไหนบ้าง