Graphviz DOT Renderer: เปลี่ยนโค้ด DOT ให้เป็นไดอะแกรม SVG ในเบราว์เซอร์

ไดอะแกรมคือภาษากลางของทีมนักพัฒนา แต่การวาดด้วยมือในโปรแกรมลากวางนั้นช้า เสียเวลา และมักได้ผลลัพธ์ที่ไม่สม่ำเสมอ Graphviz DOT Renderer เลือกเส้นทางที่ต่างออกไป นั่นคือคุณเขียนคำอธิบายกราฟเป็นข้อความธรรมดาด้วยภาษา DOT แล้วเครื่องมือจะ render เป็นไดอะแกรม SVG ที่สะอาดตาให้ทันที เพราะเลย์เอาต์ถูกคำนวณด้วยเอนจิน Graphviz แทนการลากด้วยเมาส์ ไดอะแกรมทุกชิ้นที่ได้ออกมาจึงเรียงตัวเป็นระเบียบ สม่ำเสมอ และทำซ้ำได้เสมอ

DOT คือภาษาสำหรับบรรยายกราฟที่อยู่เบื้องหลังชุดเครื่องมือ Graphviz รุ่นคลาสสิก คุณประกาศ node เชื่อมต่อกันด้วย edge ผ่านตัวดำเนินการ -> และตกแต่งด้วย attribute อย่าง label หรือ shape ได้ตามต้องการ เพียง digraph ห้าบรรทัดก็สเก็ตช์สถาปัตยกรรมระบบ state machine หรือ flow การตัดสินใจได้แล้ว และการแก้ข้อความย่อมเร็วกว่าการค่อย ๆ ลากกล่องบนผืนผ้าใบเสมอ

จุดที่ทำให้เครื่องมือนี้พิเศษคือมันรัน build แบบ viz.js WebAssembly ของ Graphviz ทั้งหมดในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลด ไม่มีคิวรอบนเซิร์ฟเวอร์ และซอร์ส DOT ของคุณไม่เคยออกจากแท็บนี้ จึงเป็นวิธีทำ graph visualization แบบส่วนตัว ไม่ต้องติดตั้งอะไร ใช้ได้จากเครื่องใดก็ได้ ไม่ว่าจะสเก็ตช์ flowchart จากโน้ตแบบ dot ที่โต๊ะทำงาน หรือเขียนเอกสารระบบบนแล็ปท็อปของบริษัทที่ล็อกสิทธิ์ไว้

ทำไมต้องใช้ Graphviz DOT Renderer?

• ไม่ผ่านเซิร์ฟเวอร์ ไม่มีการอัปโหลด build แบบ viz.js WebAssembly รันเอนจินจัดเลย์เอาต์ของ Graphviz ได้ครบในเบราว์เซอร์ รายละเอียดสถาปัตยกรรมหรือชื่อ service ภายในจึงไม่มีทางหลุดออกไปบนเครือข่าย
• ข้อความชนะการลากเมาส์ การบรรยายกราฟด้วย DOT เร็วกว่า แม่นยำกว่า และแก้ไขง่ายกว่าการจัดวางรูปทรงด้วยมือ โดยเฉพาะเมื่อโครงสร้างเปลี่ยนบ่อย
• วงจรฟีดแบ็กทันที source panel แบบแก้ไขได้จะ render ไดอะแกรมใหม่ให้คุณระหว่างพิมพ์ ปรับโครงสร้างและสไตล์ได้โดยไม่ต้องรีโหลดหน้าเลย
• ผลลัพธ์คมชัดทุกขนาด เครื่องมือ render ออกมาเป็น SVG ซึ่งคมกริบทุกระดับการซูม ทั้งใน wiki, README และเว็บเอกสาร
• ผลลัพธ์พกพาสะดวก ส่งออกเป็น SVG สำหรับเอกสาร หรือ PNG สำหรับสไลด์ ตั๋วงาน และแชทที่รูปแบบเวกเตอร์ไม่สะดวก
• ฟรีและไม่มีขั้นตอนยุ่งยาก ไม่ต้องสมัครบัญชี ไม่ต้องติดตั้ง ไม่ต้องใช้ command line เปิดหน้าเว็บแล้วเริ่ม render กราฟออนไลน์ได้ในไม่กี่วินาที

ฟีเจอร์หลัก

บางฟีเจอร์ควรดูใกล้ ๆ หน่อย source panel ที่แก้ไขได้ทำให้ข้อความ DOT เป็นแหล่งความจริงเพียงชุดเดียว ไดอะแกรมที่ได้คือผล render ที่ซื่อสัตย์ต่อสิ่งที่คุณเขียนเสมอ นี่คือเหตุผลที่ไฟล์ DOT เก็บใน git ได้สวยงาม ส่วนปุ่มซูมและแพนสำคัญมากเมื่อกราฟใหญ่เกินหนึ่งจอ คุณซูมเข้าไปดู subsystem หนึ่ง ไล่ตามเส้น edge ข้ามเลย์เอาต์ แล้วซูมออกกลับมาเห็นภาพรวมทั้งหมดได้โดยไม่หลงทาง และเพราะส่งออกได้ทั้ง SVG และ PNG ซอร์สชุดเดียวจึงเลี้ยงทั้งหน้า wiki วันนี้และสไลด์พรีเซนต์พรุ่งนี้

วิธีใช้งาน Graphviz DOT Renderer

1. เขียนซอร์ส digraph เปิดเครื่องมือแล้วพิมพ์หรือวางคำอธิบาย DOT ใน source panel เริ่มจาก digraph ชื่อ { ... } แล้วเพิ่มคำสั่ง node และ edge ภายในวงเล็บปีกกา
2. Render ไดอะแกรม เมื่อซอร์สถูกต้อง เครื่องมือจะ render เป็นไดอะแกรม SVG ทันที node ปรากฏเป็นรูปทรงและ edge เป็นลูกศร โดยเอนจินจัดเลย์เอาต์วางตำแหน่งให้อัตโนมัติ
3. ซูมและแพนเพื่อตรวจสอบ ใช้ปุ่มซูมและแพนสำรวจผลลัพธ์ ขยายดูกลุ่ม node ตามลูกศรข้าม canvas หรือถอยออกมาดูภาพรวมทั้งกราฟ
4. ปรับซอร์สแล้ว render ใหม่ แก้ label เพิ่ม shape เพิ่มหรือลบ edge ในแผงแก้ไข แล้วดู SVG อัปเดตตามทุกการเปลี่ยนแปลง
5. ส่งออกเป็น SVG หรือ PNG เมื่อไดอะแกรมเรียบร้อย ส่งออกเป็น SVG สำหรับเอกสาร หรือ PNG สำหรับที่ที่รูปภาพนิ่งสะดวกกว่า

วงจรทั้งหมดนี้ เขียน render ตรวจ ปรับ ส่งออก มักใช้เวลาไม่ถึงนาที นั่นคือเหตุผลที่ workflow dot to svg แบบนี้เข้ากับงานประจำวันของนักพัฒนาได้ดีมาก

พื้นฐาน Syntax ของ DOT

ไฟล์ DOT เริ่มด้วยการประกาศกราฟ digraph สร้างกราฟแบบ มีทิศทาง ที่ edge ถูกวาดพร้อมหัวลูกศร เหมาะกับ flow, dependency และการเปลี่ยนสถานะ ส่วน graph สร้างกราฟแบบ ไม่มีทิศทาง ที่ edge ประกาศด้วย -- แทน เหมาะกับความสัมพันธ์ที่ไม่มีทิศทาง เช่น "โมดูลเหล่านี้ใช้ utility ร่วมกัน" ทุกอย่างอยู่ระหว่างวงเล็บปีกกา และปิดคำสั่งด้วยเซมิโคลอน (ตัวเลือกสำหรับคำสั่งเดี่ยว แต่ควรทำเป็นนิสัย)

Node คือสิ่งต่าง ๆ ในกราฟของคุณ ประกาศแบบ implicit ได้เพียงพูดถึงมันใน edge หรือประกาศแบบ explicit เช่น A; เพื่อควบคุมหน้าตาของ node ให้แนบ attribute ในวงเล็บเหลี่ยม เช่น A [label="API Gateway", shape=box]; label จะแทนตัวระบุ node ในผลลัพธ์ และ shape เลือกรูปทรง เช่น box สำหรับ component, ellipse สำหรับ state, diamond สำหรับจุดตัดสินใจ และ cylinder สำหรับ data store

Edge เชื่อม node ด้วย -> ใน digraph คำสั่งเดียวเชื่อมต่อได้เป็นสาย เช่น client -> gateway -> service; วาดสองลูกศรในบรรทัดเดียว edge ใส่ attribute ได้ด้วย label จะพิมพ์ข้อความบนลูกศร เหมาะกับคำกริยาอย่าง "เรียกใช้" หรือเงื่อนไขอย่าง "retry" ส่วน style=dashed และ color เปลี่ยนเส้นเอง label ที่มีเว้นวรรคต้องครอบด้วยเครื่องหมายคำพูด จึงควรครอบทุก label ที่เขียนเป็นนิสัย

สิ่งที่คนมองข้ามคือเอนจินจัดเลย์เอาต์ คุณไม่ต้องระบุพิกัดเลย อัลกอริทึมของ Graphviz อ่าน node และ edge ของคุณ วัดขนาด label แล้ววางทุกอย่างเพื่อลดเส้นตัดกันและรักษาความยาว edge ให้อ่านง่าย ใส่ rankdir=LR ที่ระดับกราฟแล้วทั้งไดอะแกรมจะหมุนเป็นแนวซ้ายไปขวา ซึ่งมักเหมาะกับ pipeline การวางตำแหน่งอัตโนมัติแบบนี้คือสิ่งที่ทำให้ DOT ที่เขียนมือดูเป็นมืออาชีพ เอนจินดูแลด้านสุนทรียศาสตร์ คุณจึงโฟกัสที่โครงสร้างได้เต็มที่

ตัวอย่างการใช้งานจริง

ไดอะแกรมสถาปัตยกรรมและ Dependency

สเก็ตช์ว่าส่วนต่าง ๆ ของระบบคุยกันอย่างไร browser ไป CDN, CDN ไป load balancer, load balancer ไป services, services ไป database กำหนด shape ต่างกันในแต่ละชั้น ใส่ label บน edge ด้วย protocol อย่าง "HTTPS" หรือ "gRPC" แล้วคุณจะมีภาพรวมสถาปัตยกรรมในหนึ่งจอที่ยังถูกต้องเสมอ เพราะสร้างใหม่จากข้อความ เทคนิคเดียวกันใช้แมป dependency ของ package หรือ module ได้ หนึ่งลูกศรต่อหนึ่งการ import ทำให้วงวน (circular dependency) เด่นชัดขึ้นมาทันที

State Machine

กราฟมีทิศทางคือสัญกรณ์ธรรมชาติของ state machine ประกาศแต่ละ state เป็น node วาด edge แบบ idle -> running และ running -> failed แล้วใส่เหตุการณ์ไว้บน label ของแต่ละ edge เช่น "start", "timeout", "retry" ผู้รีวิวตรวจตรรกะการเปลี่ยนสถานะได้ในแวบเดียว และการอัปเดตไดอะแกรมหลังแก้โค้ดคือการแก้หนึ่งบรรทัด ไม่ใช่การวาดใหม่ทั้งภาพ

สเก็ตช์ CI/CD Pipeline

ก่อนคอมมิตไฟล์ pipeline จริง ลองสเก็ตช์ใน DOT ก่อน lint -> test -> build -> deploy-staging -> approval -> deploy-prod job ที่รันขนานกันกลายเป็นกิ่งแยกจาก node ร่วม และ label บน edge ใส่เงื่อนไขอย่าง "on main only" ได้ flowchart ที่ render จาก dot อย่างรวดเร็วคือวิธีที่ถูกที่สุดในการจับ gate ที่หายไปหรือขั้นตอนที่เรียงผิดลำดับ

สอนโครงสร้างข้อมูล

สำหรับผู้สอนและผู้เรียน DOT เป็นสื่อการสอนที่ยอดเยี่ยม linked list, tree และ heap render ได้จากโค้ดไม่กี่บรรทัด แก้ข้อความนำเข้าปุ๊บก็เห็นทันทีว่าโครงสร้างตอบสนองอย่างไร เช่น เพิ่ม node เข้า binary search tree แล้วดูเลย์เอาต์ปรับตัว เพราะเครื่องมือรันในเบราว์เซอร์ จึงใช้ได้ในห้องเรียนที่ติดตั้งซอฟต์แวร์ไม่ได้ด้วย

แนวทางปฏิบัติที่ดี

• ใส่ label ให้ทุก edge ที่สำคัญ ลูกศรไร้ label บังคับให้ผู้อ่านเดาความสัมพันธ์ คำกริยาสั้น ๆ หรือเงื่อนไขอย่าง "query" หรือ "เมื่อล้มเหลว" ขจัดความกำกวมได้หมด
• จำกัดกราฟไม่เกินสิบกว่า node ต่อหนึ่งมุมมอง ถ้าไดอะแกรมเริ่มแน่น ให้แยกเป็นหลายมุมมองแบบเป็นชั้น ภาพรวมหนึ่งภาพและกราฟรายละเอียดหนึ่งชุดต่อ subsystem ดีกว่าการยัดทุกอย่างไว้ใน render เดียว
• ใช้ shape อย่างมีความหมาย กัน diamond ไว้สำหรับการตัดสินใจ box สำหรับ component, cylinder สำหรับ storage และใช้ให้สม่ำเสมอทุกไดอะแกรม เพื่อให้ผู้อ่านสร้างคลังคำศัพท์ของตัวเองได้
• ส่งออก SVG สำหรับเอกสาร SVG ขยายได้สะอาดใน wiki และ markdown ส่วน PNG เหมาะกับที่ที่รับเฉพาะรูป raster เท่านั้น
• เก็บซอร์ส DOT ไว้ข้างผลลัพธ์ คอมมิตข้อความ .dot คู่กับไฟล์ที่ส่งออก เพื่อให้ทุกคนสร้างหรือแก้ไดอะแกรมใหม่ได้ภายหลัง
• เลือก rankdir แทนการเรียงลำดับแบบบังคับ rankdir=LR กับชุด edge ที่ดีมักให้เลย์เอาต์ดีกว่าการพยายามบังคับตำแหน่งผ่านลำดับการประกาศ node

พร้อมลองแล้วหรือยัง เปิด Graphviz DOT Renderer วาง digraph เล็ก ๆ ลงไป แล้วส่งออก SVG แรกของคุณภายในไม่ถึงนาที ไม่ต้องสมัคร ไม่ใช้เซิร์ฟเวอร์ ให้เบราว์เซอร์ของคุณทำการ render เองทั้งหมด

เครื่องมืออื่น ๆ ที่น่าสนใจ:

• Regex Explainer — ถอดรหัสและทดสอบ regular expression ทีละส่วน
• jq Playground — กรองและแปลง JSON ด้วยคำสั่ง jq แบบเห็นผลทันที
• JSON Formatter — จัดรูป ตรวจสอบ และย่อ JSON ได้ทันที

ขอให้สนุกกับการวาดไดอะแกรม!

คำถามที่พบบ่อย

ถ: ซอร์ส DOT ของฉันถูกส่งไปที่เซิร์ฟเวอร์หรือไม่?

ตอบ: ไม่ เครื่องมือใช้ build แบบ viz.js WebAssembly ของ Graphviz การ parse และจัดเลย์เอาต์จึงรันทั้งหมดในเบราว์เซอร์ของคุณ คำอธิบายกราฟไม่เคยออกจากหน้าเว็บ

ถ: digraph กับ graph ใน DOT ต่างกันอย่างไร?

ตอบ: digraph ประกาศกราฟมีทิศทางที่ edge ใช้ -> และ render พร้อมหัวลูกศร เหมาะกับ flow และ dependency ส่วน graph ประกาศกราฟไม่มีทิศทางที่ edge ใช้ -- เหมาะกับความสัมพันธ์ที่ไม่มีทิศทาง

ถ: ควรเลือกส่งออกเป็น SVG หรือ PNG ดี?

ตอบ: เลือก SVG สำหรับเอกสาร wiki และที่ที่ไดอะแกรมอาจถูกซูมหรือสั่งพิมพ์ เพราะขยายได้โดยไม่เสียคุณภาพ เลือก PNG สำหรับสไลด์ ตั๋วงาน หรือแอปแชทที่จัดการรูป raster ได้สะดวกกว่า

ถ: เครื่องมือ render กราฟใหญ่แค่ไหนได้?

ตอบ: กราฟขนาดปานกลางประมาณสิบกว่า node render ได้สบาย แต่ข้อจำกัดจริงคือความอ่านง่าย ไม่ใช่ตัวเอนจิน ควรให้แต่ละไดอะแกรมโฟกัส ควรมีไม่เกินราวสิบสอง node ต่อมุมมอง และแยกระบบใหญ่เป็นไดอะแกรมย่อยหลายชุดที่เชื่อมโยงกัน