🧠 สร้างกราฟ compiler เองดีกว่าใช้ Graphviz — เมื่อ SpiderMonkey ปรับโฉมการวิเคราะห์โค้ดด้วย iongraph แบบ interactive SpiderMonkey ทีมพัฒนา JavaScript/WebAssembly engine ของ Firefox ได้เปิดตัวระบบ visualization ใหม่สำหรับ compiler ที่ชื่อว่า iongraph ซึ่งช่วยให้สามารถดูกราฟการ optimize โค้ดได้แบบ interactive โดยไม่ต้องพึ่ง Graphviz หรือ Mermaid อีกต่อไป 🎯 เล่าให้ฟังแบบเข้าใจง่าย เมื่อคุณเขียนโค้ด JavaScript แล้วมันถูกส่งเข้าไปใน compiler ขั้นสูงของ SpiderMonkey ที่ชื่อว่า Ion — ระบบจะสร้างกราฟ SSA (Static Single Assignment) เพื่อวิเคราะห์และ optimize โค้ดให้เร็วขึ้น แต่การดูกราฟเหล่านี้ผ่าน Graphviz กลับยุ่งยากและไม่ตรงกับโครงสร้างโค้ดจริง ทีมงานจึงสร้างระบบ layout algorithm ใหม่ที่เรียบง่ายแต่ทรงพลัง โดยใช้ความรู้เฉพาะของ control flow ใน JavaScript และ WebAssembly เช่น: 📍 Loop มี entry เดียว 📍 ไม่มีการ jump เข้าไปกลาง loop 📍 โครงสร้าง reducible control flow ผลลัพธ์คือกราฟที่อ่านง่าย เสถียร และสามารถแสดงผลแบบ interactive ได้บนเว็บ — คุณสามารถลาก ซูม และดูการเปลี่ยนแปลงของกราฟในแต่ละ pass ได้ทันที ✅ ปัญหาของ Graphviz ➡️ layout ไม่ตรงกับโครงสร้างโค้ด ➡️ node กระโดดไปมาเมื่อ input เปลี่ยนเล็กน้อย ➡️ PDF แบบ static ทำให้ debug ยาก ✅ จุดเด่นของ iongraph ➡️ interactive บนเว็บ: ลาก ซูม เลือก instruction ได้ ➡️ layout เสถียรแม้กราฟเปลี่ยน ➡️ ใช้ algorithm ที่เข้าใจโครงสร้าง loop และ control flow ✅ ขั้นตอนของ layout algorithm ➡️ Layering: จัด block เป็นชั้นตามลำดับ control flow ➡️ Dummy nodes: สร้าง node สำหรับ edge ที่ข้ามชั้น ➡️ Straighten edges: ปรับตำแหน่งให้กราฟดูเรียบร้อย ➡️ Track horizontal edges: จัด edge ให้ไม่ทับกัน ➡️ Verticalize: กำหนดตำแหน่ง Y ให้ node ➡️ Render: ใช้เส้นตรงแบบ railroad diagram แทน Bézier curve ✅ ประสิทธิภาพ ➡️ เร็วกว่าการใช้ Graphviz หลายพันเท่า ➡️ Layout กราฟขนาดใหญ่ได้ในเวลาไม่กี่มิลลิวินาที https://spidermonkey.dev/blog/2025/10/28/iongraph-web.html