# Flow Sim

> สร้างสื่อนำเสนอ "flow จำลอง" เป็น HTML interactive — จุดข้อมูล (token) วิ่งไปตามเส้นทาง, เส้นที่กำลังถูกใช้เปลี่ยนเป็นเส้นประเคลื่อนไหวเรืองแสง, กล่องโหนด pulse เมื่อจุดวิ่งถึง, แผงลำดับขั้นด้านขวา + ปุ่มเล่นอัตโนมัติ/ทีละขั้น/ความเร็ว. Use when the user says "สร้าง flow จำลอง …", "ฟอร์แมตเดิม", "flow simulation", "แบบจำลองการทำงาน … (html)", or asks for an animated process/protocol diagram in the style of vc-issuance-flow.html / mdl-offline-flow.html. Do NOT use for static diagrams (mermaid/ASCII) or data charts.

- Skill: `dga-sd/flow-sim` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add dga-sd/flow-sim`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dga-sd/flow-sim/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: DGA-SD (https://skillmd.com/u/dga-sd)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/dga-sd/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 (สิ่งที่ต้องเขียนต่อไฟล์)

```js
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 ตรงไหนบ้าง