graph.phatphum.me — แผนที่ความรู้เชิงภาพ

graph.phatphum.me เป็นเว็บแผนที่ความรู้ที่ตั้งใจให้ “เห็นว่าเรื่องต่าง ๆ เชื่อมกันอย่างไร” แทนรายการหัวข้อยาว ๆ หัวข้อหนึ่งเป็นความรู้ canonical ชิ้นเดียว (สรุป เหตุผลที่สำคัญ ระดับความยาก) แล้วไปปรากฏในหลายแผนที่ได้โดยไม่ซ้ำเนื้อหาและความคืบหน้า ผู้เรียนเลือกดูเป็นกราฟ โรดแมป เอาต์ไลน์ หรือ Focus ที่คัดเฉพาะสิ่งที่ต้องรู้ก่อนและสิ่งที่ปลดล็อกต่อ ข้อมูลเป็นหลักสูตรที่ผมเขียนเอง 146 แผนที่ (เผยแพร่แล้ว 21 แผนที่: Frontend, Computer Networks และ Cybersecurity พร้อมแผนที่ย่อย) หัวข้อ 699 เรื่อง และ resource ทางการ 404 รายการ ความคืบหน้าของผู้เรียนเก็บในเบราว์เซอร์เท่านั้น ไม่มีบัญชีผู้ใช้

1. 01รายการหัวข้อยาว ๆ บอกไม่ได้ว่าอะไรต้องเรียนก่อน อะไรเป็นทางเลือก และเรื่องหนึ่งไปเกี่ยวกับอีกเรื่องอย่างไร
2. 02แผนที่แบบภาพนิ่งหรือกราฟอย่างเดียวอ่านยากบนมือถือและสำหรับผู้ใช้คีย์บอร์ดหรือโปรแกรมอ่านหน้าจอ
3. 03หัวข้อเดียวกัน (เช่น HTTP หรือ accessibility) ปรากฏในหลายหลักสูตร ถ้าคัดลอกเนื้อหาไปทุกที่ก็แก้ยากและความคืบหน้าไม่ตรงกัน
4. 04หลักสูตรขนาดใหญ่เขียนผิดพลาดง่าย: cycle ของ prerequisite, เส้นเชื่อมที่ชี้ข้ามแผนที่ หรือหัวข้อพื้นฐานที่ถูกตัดทิ้งเงียบ ๆ

1. 01โมเดลข้อมูล 7 ตาราง: Topic คือความรู้ canonical ส่วน GraphNode คือ “การปรากฏของหัวข้อในแผนที่หนึ่ง” จึงใช้ซ้ำข้ามแผนที่ได้ทั้งเนื้อหาและความคืบหน้า GraphEdge มี composite foreign key กันไม่ให้ปลายเส้นอยู่คนละแผนที่ และ Resource ผูกกับหัวข้อผ่าน TopicResource
2. 02ความสัมพันธ์ 5 ชนิดที่วาดต่างกัน: PREREQUISITE (ต้องเป็น DAG), RECOMMENDED, RELATED, ALTERNATIVE และ UNLOCKS การไล่ย้อนหา ancestor/descendant, เส้นทางสั้นที่สุด และการเรียง topological ใช้เฉพาะ PREREQUISITE
3. 03สี่มุมมองจากข้อมูลชุดเดียว: Graph (React Flow พร้อมโหนดแบบ semantic zoom และ MiniMap), Roadmap (หัวข้อใหญ่เป็นหลักไมล์พร้อมแถบความคืบหน้าและแบนเนอร์ “You are here”), Outline (รายการที่ขยายได้) และ Focus (จัดเลย์เอาต์ใหม่เฉพาะหัวข้อที่เกี่ยวข้องด้วย dagre)
4. 04ความคืบหน้า Not started / Learning / Understood เก็บใน localStorage แบบมีเวอร์ชันโดยอิง ID ของหัวข้อ canonical มีปุ่ม Undo, ปุ่ม “I already know these” และเปลี่ยนทั้งหมวดได้ในครั้งเดียว ไม่มีการส่งขึ้นเซิร์ฟเวอร์หรือใส่ใน URL
5. 05หลักสูตรที่ผมเขียนเอง: Frontend Developer (14 หัวข้อใหญ่ พร้อมแผนที่ย่อย JavaScript, CSS, React), Computer Networks (26 หัวข้อใหญ่ 215 หัวข้อ 15 โปรเจกต์ 7 แผนที่ย่อย) และ Cybersecurity Foundations (28 หัวข้อใหญ่ 229 หัวข้อ 25 โปรเจกต์ 8 แผนที่ย่อย โดยอิง OWASP Top 10:2025 เป็นเกณฑ์พื้นฐานด้านความตระหนักรู้) พร้อมเอกสารวิจัยและรายการอ้างอิงใน prisma/seeds
6. 06แค็ตตาล็อก Computer Science มีแผนที่ที่ยังไม่เปิด 125 รายการที่ระบุสถานะ COMING_SOON ชัดเจน ไม่มีโหนดหรือลิงก์ปลอม และมีหน้า domain ที่รองรับโดเมนใหม่โดยแค่เพิ่มข้อมูล seed
7. 07Seed ทำใน transaction เดียวด้วย ID ที่คงที่ ตรวจความถูกต้องก่อนเขียน (หา cycle, endpoint ที่หาย, slug/path ซ้ำ, resource ที่ไม่ผูกกับหัวข้อใด) และมีคำสั่ง db:validate ตรวจซ้ำกับฐานข้อมูลจริง
8. 08มือถือ (ต่ำกว่า 768px) ออกแบบใหม่: เริ่มที่ Outline, กราฟเป็นรายการทีละหัวข้อใหญ่แบ่งเป็นระดับ, และแผง Inspector/Focus เป็น bottom sheet ส่วนแผงด้านข้างอื่นเปิดได้ทีละแผง

1. 01ได้เว็บที่เปิดแผนที่เดียวกันได้ 4 แบบ และผู้เรียนเห็นตลอดว่าอยู่ตรงไหน ควรไปต่อที่ไหน โดยไม่ต้องมีบัญชี
2. 02ชุดทดสอบหน่วย 92 รายการใน 17 ไฟล์ผ่านทั้งหมด ครอบคลุมอัลกอริทึมของกราฟ เลย์เอาต์ โรดแมป การตรวจสอบข้อมูล seed, progress, markdown, ข้อจำกัดของ SQLite จริง และการเขียน CSS (ห้าม !important ห้ามใช้สี hex นอก tokens)
3. 03ชุด E2E ด้วย Playwright (เดสก์ท็อปและมือถือ) พร้อมสแกน axe-core ทุกหน้าทั้งธีมสว่างและมืด ตรวจขนาดตัวอักษรขั้นต่ำ ขนาดพื้นที่แตะ และ layout shift
4. 04รองรับการเข้าถึงครบ: คีย์บอร์ดครอบคลุมแผนที่ (กด Tab หยุดที่แผนที่ครั้งเดียว), reduced motion, forced-colors และ high-contrast

• เว็บ Next.js 16 + React 19 พร้อมสี่มุมมอง (Graph, Roadmap, Outline, Focus) และ Topic Inspector
• โมเดลข้อมูล Prisma 7 + SQLite (7 ตาราง) พร้อม migration, seed แบบ idempotent และตัวตรวจ db:validate
• หลักสูตร Frontend, Computer Networks และ Cybersecurity พร้อมเอกสารวิจัยและรายการอ้างอิง
• ระบบธีมจาก design tokens (สว่าง มืด และ high-contrast) และ CSS เขียนเอง ไม่ใช้เฟรมเวิร์ก
• ชุดทดสอบ Vitest และ Playwright + axe-core

• Next.js
• React
• TypeScript
• CSS3
• React Flow
• Dagre
• Prisma
• SQLite
• better-sqlite3
• Vitest
• Playwright
• axe-core
• pnpm

• 2026Atlas — พื้นที่ทำงานวิจัยส่วนตัวเก็บแหล่งข้อมูล เชื่อมหัวข้อ ประเมินข้อกล่าวอ้างด้วยหลักฐาน และเขียนเป็นความรู้ที่กลับมาอ่านได้ — เว็บแอปส่วนตัวที่ผมออกแบบเองตั้งแต่ฐานข้อมูลจนถึงความปลอดภัยโปรเจกต์ส่วนตัว
• 2026BookNest — ห้องสมุดส่วนตัวพร้อมแผนที่ความรู้ของหนังสือห้องสมุดหนังสือและนิตยสารแบบ local-first ที่เก็บสารบัญจริง คำศัพท์ ผัง และเส้นทางอ่านของแต่ละเล่มไว้เป็น JSON ที่ตรวจสอบได้ ไม่ต้องมีบัญชีหรือคลาวด์โปรเจกต์ส่วนตัว
• 2026Catadex — ไดเรกทอรีแค็ตตาล็อกเฉพาะทางรวมคลังข้อมูลเฉพาะทาง 1,248 แห่งใน 34 หมวด สำรวจผ่านการ์ด ผังความสัมพันธ์ เส้นทางเรียนรู้ และค้นหาได้ทั้งไทยและอังกฤษโปรเจกต์ส่วนตัว