รีวิว Floorplan — ให้ Claude หรือ Codex วาดแผนที่แอปเราเป็นภาษาคน

คืออะไร

Floorplan คือ plugin สำหรับ Claude Code และ Codex โดยมีแนวคิดฐานคือ "See how your app actually fits together" Claude หรือ Codex จะอ่าน codebase ของคุณแล้ววาดเป็นแผนที่ interactive โดยทุกส่วน ทุกไฟล์ และทุก web request จะถูกตั้งชื่อเป็นภาษาอังกฤษง่ายๆ ที่คนทั่วไปก็เข้าใจ เช่น "Takes card payments at checkout" แทนคำเทคนิคอย่าง "Stripe API wrapper"

ทีมงานอธิบายว่าเป็น "the diagram nobody drew" เหมาะกับคนที่สร้างแอปด้วยความช่วยเหลือของ AI แล้วพอถามว่า "ถ้าแก้ส่วนนี้ อะไรจะพัง" ก็ไม่มีคำตอบ

จุดเด่น

👉 แผนที่หลายระดับ zoom เริ่มจากภาพรวมทั้งแอป แล้ว double-click เจาะเข้าไปดูแต่ละส่วน ไฟล์ และ endpoint ได้ แต่ละมุมมองบอกว่าอะไรใช้มันและมันใช้อะไร

👉 ตามการเชื่อมต่อจริง รวมถึงข้าม repo มันไล่ตาม imports และจับคู่ web request จาก frontend กับ endpoint ที่ตอบกลับ แม้จะอยู่คนละ repo

👉 ถามคำถามกับแผนที่ได้ เช่น "How does a refund reach the customer's card?" จะได้คำตอบพร้อม mini-map เฉพาะส่วนที่เกี่ยวข้องและ step-by-step walkthrough

👉 Health check จับความผิดพลาดคลาสสิกของแอปที่สร้างด้วย AI เช่น key ฝังในโค้ด, table ของ Supabase ที่ใครก็อ่านได้, Firebase rules ที่เปิดหมด, Stripe webhook ที่ใครก็ปลอมได้ และ endpoint ที่ไม่ต้อง login พร้อม fix ที่วางต่อได้เลย (ข้อควรรู้คือ ตัวเจ้าของบอกเองว่าเป็น "A check, not an audit")

👉 Recent work การ์ดที่ AI เพิ่งแก้จะขึ้นสีเขียวพร้อมโน้ตว่าการแก้นั้นเชื่อมกับสิ่งที่ขอไว้ยังไง

👉 รองรับภาษากว้างพอสมควร: TypeScript, JavaScript, Python, Go, Rust, Java, Kotlin, Scala, Vue, Svelte, Astro โดย endpoint รองรับ Express, Koa, Hono, Next.js, Flask, FastAPI, Django, Spring และอื่น ๆ อีก

👉 นอกจาก mapping โค้ดที่มีแล้ว ยังวาด blueprint จาก PRD หรือ spec ของแอปที่ยังไม่ได้สร้างได้ด้วย ผลลัพธ์จะเป็นแผนการสร้างพร้อมช่องว่างที่แผนยังไม่ได้คลุม

👉 ข้อมูล privacy ระบุว่า scan, map, local server ทำงานบนเครื่องคุณทั้งหมด ไม่มี dependencies หรือ install scripts map ทำงานแบบ offline ได้ และไม่มี analytics หรือ tracking แผนที่จะไม่ถูก commit ลง git ด้วย

เหมาะกับใคร

👉 คนที่สร้างแอปด้วยความช่วยเหลือของ AI แล้วไม่ได้อ่านโค้ด อยากเข้าใจแอปของตัวเองด้วยภาษาของตัวเอง

👉 ทีมงานที่อยาก onboard คนใหม่ให้เร็วขึ้น จากภาพรวมจนถึงไฟล์ระดับงานจริง

👉 คนที่ทำงานกับ AI เป็นหลัก อยากรู้ว่า Claude หรือ Codex เพิ่งแก้อะไรไปบ้างและทำไม

เริ่มต้นใช้งาน

สิ่งที่ต้องมีคือ Node.js 18+ และ Claude Code หรือ Codex ตัว Floorplan ใช้ plan ที่คุณมีอยู่แล้ว ไม่ต้องใช้ API key

สำหรับ Claude Code ใช้คำสั่งตาม README:

claude plugin marketplace add haydenschmitty/floorplan
claude plugin install floorplan@floorplan

สำหรับ Codex ทำผ่านแอปได้ โดยเปิด "Plugins" แล้วกด "Add a marketplace" แล้วใส่ source เป็น haydenschmitty/floorplan หรือใช้ terminal:

codex plugin marketplace add haydenschmitty/floorplan
codex plugin add floorplan@floorplan

จากนั้นเปิดโปรเจกต์ใน Claude Code หรือ Codex แล้วถามว่า "Make me a floorplan of this app" จะได้ map เปิดขึ้นมาเอง ถ้าทำงานต่อไปก็แค่ขอ "Update the floorplan" มันจะอ่านซ้ำเฉพาะส่วนที่เปลี่ยน

หากยังไม่มีโค้ดเลย ก็แชร์ PRD หรือ spec แล้วขอ "floorplan of what we'd need to build" เพื่อได้ blueprint ออกมาแทน

ข้อควรรู้

👉 License: MIT License ให้ใช้ได้อย่างเสรีตามเงื่อนไข MIT

👉 ความสดใหม่: ข้อมูลทั้งหมดนี้ ณ 1 พ.ย. 2026 ตัวโปรเจกต์สร้างเมื่อ 27 ต.ค. 2026 และ push ล่าสุดเมื่อ 31 ต.ค. 2026 นั่นแปลว่าโปรเจกต์อายุราว 5 วันเท่านั้น จัดเป็นของใหม่มากที่ยังเดินเร็ว ดังนั้นควรเช็ค repo ตรง ๆ ก่อนใช้จริงเพราะอะไร ๆ อาจเปลี่ยนได้ทันที

👉 สถิติ ณ 1 พ.ย. 2026: ⭐ 824 stars, 58 forks, เขียนด้วย JavaScript, มี open issues อยู่ 11 รายการ

👉 ข้อจำกัดที่ควรรู้: มันวาดภาพให้ดูและช่วยเช็คพื้นฐาน ทางเจ้าของระบุเองว่า Health check นั้นเป็น "check" ไม่ใช่ audit ที่ครบถ้วน และรองรับภาษาหลักอย่าง TypeScript, JavaScript, Python, Go, Rust, Java, Kotlin, Scala แบบเต็ม ภาษาอื่นจะเป็นแบบ lighter support

🔗 https://github.com/haydenschmitty/floorplan

ข้อมูลจาก GitHub ณ 1 พ.ย. 2026: ⭐ 824 | ภาษา JavaScript | license MIT