แสดงโครงสร้าง JSON Schema เป็นภาพ
อ่าน JSON Schema แล้วแสดงเป็นต้นไม้ interactive พร้อมป้ายชนิดข้อมูล, required fields, การขยาย $ref, combinator และตรวจจับปัญหาเชิงโครงสร้าง - ฟรี ทำงานในเบราว์เซอร์
Loading tool...
แสดงโครงสร้าง JSON Schema เป็นภาพ คืออะไร?
JSON Schema Visualizer แสดง JSON Schema ใด ๆ เป็นต้นไม้ interactive ที่ย่อ-ขยายได้ ทุก property, array item, enum, union และ $ref มีป้ายชนิดข้อมูลแยกสีพร้อม constraints แสดงไปพร้อมกัน ทำให้ API contract ที่ซับซ้อนอ่านง่ายขึ้นทันที
ประโยชน์หลัก
- เข้าใจ schema ที่สืบทอดหรือของบุคคลที่สามได้ในไม่กี่วินาที
- จับข้อผิดพลาดเชิงโครงสร้างก่อนถึง production
- ตาม $ref chain ได้โดยจัดการ recursion อย่างปลอดภัย
- วัดความซับซ้อนของ schema ด้วยสถิติในตัว
- schema ลับอยู่กับคุณ - ประมวลผลฝั่ง client ทั้งหมด
กรณีการใช้งาน
- •Review schema ของ OpenAPI components ก่อน merge
- •ช่วย developer ใหม่เข้าใจ API ขนาดใหญ่ที่มีอยู่เดิม
- •Debug การ validation ล้มเหลวจาก type หรือ ref ผิด
- •ทำเอกสาร data contract ภายในสำหรับทีม
- •ตรวจสอบความลึกและความซับซ้อนก่อน refactor schema
วิธีแสดง JSON Schema เป็นแผนผัง
- วาง schema: วาง JSON Schema ลงช่องอินพุต หรือกด Load sample เพื่อลอง schema User ที่มี $defs, enum, union และ $ref
- กด Visualize: แผนผังจะวาดด้วยป้ายสีบอกชนิดและกางสองระดับแรกให้อัตโนมัติ ใช้ Expand all หรือ Collapse all หรือกดลูกศรที่โหนดใดก็ได้เพื่อไล่ดูสาขานั้น
- ดูสถิติ: ตัวนับสิบตัว ได้แก่ object, array, property, required, enum, ref, union, combinator, definition และความลึกสูงสุด สรุปรูปร่างของ schema ได้ในครั้งเดียว
- แก้ปัญหาที่รายงาน: ดูหมวด Issues หา error และ warning พร้อม JSON pointer path เช่น $ref ที่ชี้ไปไม่เจอ แล้วกด Copy เพื่อคัดลอก schema กลับไปแก้ได้เลย
คุณสมบัติหลัก
- มุมมองต้นไม้ย่อ-ขยายได้ พร้อมป้ายชนิดข้อมูลแยกสีตามแต่ละ node
- ขยาย $ref ภายในไปยัง definitions และ $defs พร้อมตรวจจับ recursion
- แผงสถิติ: object, array, property, required, enum, ref และความลึกสูงสุด
- ตรวจจับปัญหาเชิงโครงสร้าง: $ref หาไม่เจอ, required ไม่มีใน properties, type ไม่รู้จัก
- รองรับ keyword ของ draft-07 และ 2020-12 รวมถึง prefixItems และ combinator
- ทำงานในเบราว์เซอร์ทั้งหมด - schema ไม่ถูกส่งออกจากเครื่องคุณ
คำถามที่พบบ่อย
ป้ายสีในแผนผังมีความหมายอย่างไร
แต่ละโหนดมีป้ายบอกชนิด schema เช่น object, array, string, number, integer, boolean, null, union, enum, $ref หรือ any ช่วยให้กวาดตาดู schema ใหญ่แล้วจับจุดที่ซ้อนลึก เป็น array หรือใช้ reference ได้ทันที
ระบบจัดการ $ref อย่างไร
reference ภายในไปยัง $defs หรือ definitions จะถูกไล่ตามและขยาย inline พร้อมป้าย $ref ส่วน ref ที่ชี้ไปไม่เจอจะถูกทำเครื่องหมาย unresolved และรายงานในหมวด Issues พร้อม JSON pointer path
สถิติที่แสดงบอกอะไรได้บ้าง
ตัวนับรวม object, array, property, ฟิลด์ required, enum, ref, union, combinator (allOf, anyOf, oneOf, not), definition และความลึกสูงสุด เป็นภาพรวมสุขภาพของ schema ได้เร็ว
เครื่องมือนี้ validate JSON Schema ให้เต็มรูปแบบไหม
เป็นการตรวจโครงสร้าง ไม่ใช่ validator เต็มรูปแบบ โดยจะ parse schema ไล่ทุกโหนด และรายงาน error กับ warning เช่น reference หายหรือชี้ไปไม่ถูก ข้อมูลของคุณไม่ออกจากเบราว์เซอร์