ตัวเรนเดอร์ Graphviz DOT
เรนเดอร์กราฟ Graphviz DOT เป็น SVG ในเบราว์เซอร์ฟรี แก้ซอร์สได้ เรนเดอร์ทันที ซูมและเลื่อนได้ ส่งออก SVG/PNG ผ่านเอนจิน viz.js WebAssembly ไม่ต้องอัปโหลด
Loading tool...
ตัวเรนเดอร์ Graphviz DOT คืออะไร?
ตัวเรนเดอร์ Graphviz DOT เปลี่ยนคำอธิบายกราฟ DOT เป็นไดอะแกรม SVG ในเบราว์เซอร์ของคุณโดยตรงด้วยเอนจิน Graphviz จริงที่คอมไพล์เป็น WebAssembly แก้ซอร์สแล้วเรนเดอร์ใหม่ทันที ซูมและลากเลื่อนกราฟใหญ่ได้ และส่งออก SVG คมชัดหรือ PNG พื้นหลังขาวโดยไม่ผ่านเซิร์ฟเวอร์เลย
ประโยชน์หลัก
- เลย์เอาต์ Graphviz แท้ ไม่ใช่ของประมาณ
- เรนเดอร์ใหม่ทันทีขณะแก้ซอร์ส DOT
- ซูมและลากเลื่อนสำหรับผลลัพธ์กราฟใหญ่
- ส่งออก SVG และ PNG ตรงจากเบราว์เซอร์
- เป็นส่วนตัวตั้งแต่การออกแบบ - กราฟไม่ออกจากเครื่องคุณ
กรณีการใช้งาน
- •วาดไดอะแกรมสถาปัตยกรรมและ dependency ลงเอกสาร
- •ร่าง state machine และ workflow graph
- •เรนเดอร์ snippet DOT จากบทเรียนและหนังสือ
- •ผลิตภาพไดอะแกรมสำหรับ README และ wiki
วิธีเรนเดอร์กราฟ Graphviz DOT
- วางซอร์ส DOT: วางคำอธิบายกราฟของคุณ หรือกดโหลดตัวอย่างเพื่อดู syntax
- แก้และเรนเดอร์: ไดอะแกรม SVG จะเรนเดอร์ใหม่ทันทีขณะคุณแก้ซอร์ส
- ซูมและเลื่อน: ใช้ปุ่มซูมและลากผืนผ้าใบเพื่อสำรวจกราฟขนาดใหญ่
- ส่งออกภาพ: ดาวน์โหลดไดอะแกรมเป็น SVG สำหรับเอกสาร หรือ PNG สำหรับสไลด์และแชต
คุณสมบัติหลัก
- เอนจิน Graphviz จริงคอมไพล์เป็น WebAssembly ในเบราว์เซอร์
- เรนเดอร์ SVG ใหม่ทันทีทุกครั้งที่แก้ซอร์ส
- ปุ่มซูมพร้อมลากเลื่อนสำหรับกราฟขนาดใหญ่
- ส่งออก SVG คลิกเดียว และ PNG พื้นหลังขาว
- แจ้ง error ชัดเจนเมื่อ syntax DOT ผิด
- ไม่ต้องอัปโหลด ไม่ต้องมีบัญชี ฝั่ง client ทั้งหมด
คำถามที่พบบ่อย
รองรับฟีเจอร์ DOT อะไรบ้าง?
ทุกอย่างที่เอนจิน Graphviz จริงรองรับ - รูปทรง node และ edge, label, style, rank, cluster และ layout attribute เพราะการเรนเดอร์รันเอนจิน Graphviz จริงที่คอมไพล์เป็น WebAssembly
ซอร์ส DOT ของฉันถูกอัปโหลดไปไหนหรือไม่?
ไม่ เอนจิน Graphviz รันในเบราว์เซอร์ของคุณผ่าน WebAssembly กราฟที่มีสถาปัตยกรรมภายในหรือชื่อส่วนตัวจึงไม่ออกจากเครื่อง
ทำไมไม่มีอะไรเรนเดอร์?
ส่วนใหญ่ syntax DOT มีข้อผิดพลาด ซึ่งข้อความ error จะแสดงเหนือผืนผ้าใบ และการโหลดครั้งแรกต้องรอสักครู่เพื่อเริ่มเอนจิน WebAssembly
SVG กับ PNG ต่างกันอย่างไร?
SVG เป็นเวกเตอร์คมชัดทุกซูม เหมาะกับเอกสาร ส่วน PNG เป็นภาพ raster ขนาดตายตัวพื้นหลังขาว สะดวกกับสไลด์และแชต