เครื่องมือฟรีสำหรับแปลง SQL → ER Diagram ทำงานในเบราว์เซอร์และไม่อัปโหลดอะไรเลย

 (sqltoerdiagram.com)
2 คะแนน โดย GN⁺ 4 시간 전 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • วาง SQL schema แล้วระบบจะแสดงผลตาราง คอลัมน์ คีย์ และความสัมพันธ์เป็น ERD ได้ทันทีภายในเบราว์เซอร์
  • รองรับการพาร์ส CREATE TABLE และ ALTER TABLE DDL ของ PostgreSQL, MySQL, SQLite และ SQL Server พร้อมจัดการ primary key, foreign key รวมถึงข้อกำหนด unique และ not-null
  • รองรับ การแก้ไขแบบอินเทอร์แอ็กทีฟ เช่น ลากตาราง, จัดวางอัตโนมัติ, เพิ่มโน้ต, ซูมเข้า-ออก, ดับเบิลคลิกเพื่อเปลี่ยนชื่อ
  • ส่งออกผลลัพธ์ได้เป็น PNG ความละเอียดสูง, SVG แบบเวกเตอร์, ไฟล์โปรเจกต์ และ ลิงก์แชร์ ที่เข้ารหัสไดอะแกรมไว้ใน URL
  • ไม่ต้องมีบัญชี, ไม่ต้องสมัคร, ไม่ต้องติดตั้ง และเน้นการทำงานแบบ local เพราะ SQL schema จะไม่ถูกอัปโหลดหรือบันทึกไว้บนเซิร์ฟเวอร์

วาง SQL แล้วดู schema

  • ใส่คำสั่ง CREATE TABLE ลงในตัวแก้ไขด้านซ้าย แล้ว SQL schema จะแสดงเป็น ER diagram
  • schema ตัวอย่างเป็นโครงสร้างอีคอมเมิร์ซขนาดเล็ก ประกอบด้วย 6 ตาราง และ 7 ความสัมพันธ์ ของ users, addresses, products, orders, order_items, reviews
  • สามารถลากตารางได้, ซูมเข้า-ออกด้วยการเลื่อนเมาส์, ดับเบิลคลิกเพื่อเปลี่ยนชื่อ และส่งออกได้หลังจัดเสร็จ
  • มีฟังก์ชันโหลด schema ตัวอย่าง และบนหน้าจอแสดงอัตราการซูม 122%
  • การประมวลผลทั้งหมดทำงานแบบ local 100% ในเบราว์เซอร์ และ schema จะไม่ออกไปนอกเบราว์เซอร์

SQL to ER Diagram — เครื่องมือสร้าง ERD ออนไลน์ฟรี

  • SQL to ER Diagram เป็นเครื่องมือโอเพนซอร์สฟรีที่แปลง SQL schema เป็น ERD แบบอินเทอร์แอ็กทีฟ ภายในเบราว์เซอร์
  • วางคำสั่ง CREATE TABLE แล้วระบบจะแสดงผลตาราง คอลัมน์ primary key, foreign key และความสัมพันธ์ได้ทันที
  • ใช้งานได้กับ PostgreSQL, MySQL, SQLite และ SQL Server
  • รองรับการลากตาราง, การจัดเลย์เอาต์อัตโนมัติ, การเพิ่มโน้ต และการส่งออกเป็น PNG หรือ SVG
  • ไม่มีการอัปโหลดอะไร และ schema จะคงอยู่บนอุปกรณ์ของผู้ใช้

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

  • หากต้องการสร้าง ER diagram จาก SQL ให้วางคำสั่ง SQL CREATE TABLE ลงในตัวแก้ไข แล้วเครื่องมือจะเรนเดอร์ ERD แบบอินเทอร์แอ็กทีฟทันที
    • สามารถลากตารางเพื่อจัดวาง แล้วส่งออกเป็น PNG หรือ SVG ได้
  • SQL dialect ที่รองรับคือ PostgreSQL, MySQL, SQLite และ SQL Server และสามารถพาร์ส CREATE TABLE กับ ALTER TABLE DDL มาตรฐานได้
    • รองรับ primary key, foreign key, unique และข้อกำหนด not-null
  • SQL to ER Diagram ฟรีทั้งหมดและเป็นโอเพนซอร์ส โดยไม่ต้องมีบัญชีหรือสมัครใช้งาน
  • ทุกอย่างทำงานแบบ local ในเบราว์เซอร์ และ SQL schema จะไม่ถูกอัปโหลดหรือบันทึกไว้บนเซิร์ฟเวอร์
  • สามารถส่งออกไดอะแกรมเป็น PNG ความละเอียดสูง, SVG แบบเวกเตอร์, ไฟล์โปรเจกต์เต็มรูปแบบ และลิงก์แชร์ที่เข้ารหัสไดอะแกรมไว้ใน URL
  • ไม่ต้องติดตั้ง และทำงานได้ในเว็บเบราว์เซอร์ทั้งเดสก์ท็อปและมือถือ

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 4 시간 전
ความคิดเห็นจาก Hacker News

  • นึกถึงเครื่องมือที่เคยทำร่วมกับ v0 เมื่อไม่กี่เดือนก่อน https://v0-yaerd.vercel.app
    ผมสร้างมันขึ้นมาเพราะไม่เคยเห็นเครื่องมือที่สามารถแปลความ ไฟล์ migration ของ Laravel แล้วสร้าง ERD ได้ และหลังจากนั้นก็เพิ่ม การรองรับ SQL เบื้องต้นผ่านพรอมป์ต์ด้วย

  • เครื่องมือนี้เจ๋งมาก แต่ผมคิดว่าแค่ SQL อย่างเดียวสร้าง ER diagram ไม่ได้
    เอนทิตี กับ ตาราง นั้นต่างกันโดยพื้นฐาน ถึงจะคล้ายกันมาก แต่ SQL อย่างเดียวมีข้อมูลไม่พอสำหรับการสร้าง ER diagram
    ไม่ได้หมายความว่าเครื่องมือนี้ไร้ประโยชน์ หรือไดอะแกรมประเภทนี้ไม่ช่วยอะไร แค่เป็นข้อถกเถียงเชิงหลักการ ซึ่งคนอื่นอาจไม่เห็นด้วยก็ได้

    • ผมว่าการที่เอนทิตีกับตาราง โดยมากสอดคล้องกัน ก็เป็นหลักการพื้นฐานของ ORM จำนวนมากไม่ใช่หรือ
      แน่นอนว่า DDL ไม่ได้บอกอะไรมากเกี่ยวกับวงจรชีวิตของเอนทิตี แต่ถ้าเกณฑ์คือแค่แสดงความสัมพันธ์ ฟิลด์ และคาร์ดินาลิตีเป็นกราฟ ก็ดูว่าเพียงพอแล้ว
    • ถ้าจะพูดให้แม่นยำกว่านั้น ตามนิยามของ Chen แล้ว ER diagram ที่ดึงจาก SQL เป็นเพียง ไดอะแกรมเชิงกายภาพ ระดับต่ำสุด และไม่สามารถใช้สร้าง ไดอะแกรมเชิงตรรกะ/เชิงแนวคิด กลับขึ้นมาได้
      ทุกวันนี้ดูเหมือนจะมีคนสนใจความแตกต่างนี้ไม่มากนัก
    • การแปลงจาก SQL ไปเป็น ER มีไว้เพื่อทำความเข้าใจฐานข้อมูลที่เราเพิ่งเจอเป็นครั้งแรก
      ฐานข้อมูลอาจมีอยู่แล้ว แต่ไม่มี ERD และแทบไม่มีเอกสารเลย
      เพราะงั้นมันจึงใกล้เคียงกับเครื่องมือสำหรับสำรวจ และในอุดมคติก็ควรสร้างมุมมองและแนบบันทึกได้
      เพราะเมื่อมีตารางจำนวนมหาศาล หรือมีหลายตารางที่ไม่มี foreign key คุณก็ไม่จำเป็นต้องดู ERD ทั้งหมดพร้อมกันทีเดียว
    • น่าจะช่วยอธิบายความต่างให้มากกว่านี้หน่อย
      ในทางปฏิบัติแทบใช้แทนกันได้ แต่ในเชิงแนวคิดก็ดูเหมือนว่าจะมีชั้นความหมายที่ลึกกว่าวางอยู่บนเอนทิตีและความสัมพันธ์
      เช่นคำอธิบายของความสัมพันธ์ หรือหมายเหตุเพิ่มเติมที่แนบกับเอนทิตี
    • อยากให้ขยายความอีกหน่อย
      ผมเข้าใจมาตลอดว่าเอนทิตีกับตารางมี ความสัมพันธ์แบบ 1:1 และถ้ามีตัวอย่างก็น่าจะช่วยมาก

  • การใช้งานบนมือถือ ให้ 1000 เต็ม 100 เลย
    การแพน ซูม เลือก และย้าย ลื่นไหลมากจนผมนึกว่าตัวเองคิดไปเอง

    • พูดตามตรง codebase ทั้งหมดให้ความรู้สึกสดใหม่มาก: https://github.com/royalbhati/sqltoerdiagram/blob/main/src/m...
      ผมชอบนักพัฒนาที่กลั่นปัญหาซับซ้อนให้กลายเป็นคำตอบที่เรียบง่าย และคนนี้เก่งจริง ๆ
      นึกคำชมที่สูงไปกว่านี้สำหรับนักพัฒนาไม่ออกแล้ว
    • ความคิดแรกที่ผุดขึ้นมาคือควรแยกส่วนไดอะแกรมออกมาเป็น ไลบรารีแยกต่างหาก
      ดูแล้วฟังก์ชันไดอะแกรมนี้น่าจะเอาไปใช้กับอย่างอื่นนอกจาก ERD ได้อีกเยอะ
    • ดีมากจริง ๆ
      ดับเบิลแท็บเพื่อแก้ไขแล้วระดับการซูมไม่ถูกรีเซ็ต
      เป็นหนึ่งในเว็บที่รองรับมือถือได้ดีที่สุดเท่าที่เคยเห็นมาอย่างไม่ต้องสงสัย
    • เสียดายแค่ว่าใน Safari มือถือ พอกดช่องข้อความแล้วมันซูมเข้า แต่ก็เป็นปัญหาที่ทุกคนเจอกัน

  • ไม่ใช่อะไรใหญ่โต แค่เป็นเครื่องมือเล็ก ๆ แต่คิดว่าน่าจะมีประโยชน์กับคนอื่นด้วย
    ผมต้องทำงานที่ต้องทำภาพสคีมาฐานข้อมูลอยู่เรื่อย ๆ และเครื่องมือส่วนใหญ่ก็ติดกำแพงจ่ายเงิน บังคับสมัครสมาชิก หรือไม่ก็ต้องส่ง SQL ไปยังเซิร์ฟเวอร์ของคนอื่น
    ไม่มีแบ็กเอนด์, ไม่มีบัญชี และข้อมูลไม่ออกจากอุปกรณ์ของคุณเลย
    ส่วนที่สนุกตอนทำก็คือ แทนที่จะใช้ DOM/SVG ผมแรสเตอร์ตารางเป็นบิตแมปที่แคชไว้ และใช้ viewport culling เพื่อให้ยังลื่นแม้มีหลายร้อยตารางบนหน้าจอ
    SQL parser จะติดตามช่วงต้นฉบับของทุกโทเค็น ทำให้การแก้ไขอย่างการเปลี่ยนชื่อตารางไปแก้เฉพาะ identifier และ reference ที่เกี่ยวข้องได้อย่างแม่นยำ โดยคงคอมเมนต์และฟอร์แมตเดิมไว้
    สคีมาทั้งหมดอยู่ใน URL และการแชร์ก็ทำโดย serialize สคีมาลงใน URL โดยตรง จึงไม่ต้องมีแบ็กเอนด์ สถานะที่จัดเก็บไว้ หรือบัญชีผู้ใช้
    ผมเคยลองทำเวอร์ชัน Rust/WASM ด้วย แต่ต้นทุนของขอบเขต JS↔WASM สูงกว่าที่ประหยัดจากการคำนวณได้ ทำให้ parser ช้าลงประมาณ 37% แม้ว่า overlap-resolution pass แบบ O(n^2) จะเร็วขึ้นราว 2.2 เท่าก็ตาม
    สุดท้ายเลยคงไว้เป็น JavaScript ล้วน และขนาดราว 32KB แบบ gzip โดยไม่ใช้เฟรมเวิร์ก

    • ในชื่อบอกว่าฟรี ถ้าอย่างนั้นก็อยากรู้ว่าใช้ สัญญาอนุญาตซอฟต์แวร์เสรี แบบไหน
      ถ้าไม่ได้ระบุไลเซนส์ไว้ ก็อาจเป็นโอเพนซอร์สได้แต่ไม่ใช่ซอฟต์แวร์เสรี
    • ถ้าสคีมาทั้งหมดอยู่ใน URL จะไม่ติดปัญหา ข้อจำกัดความยาวของ URL หรือ
      “แนะนำให้ผู้ส่งและผู้รับทั้งหมดรองรับ URI ที่มีความยาวอย่างน้อย 8000 octets ภายในองค์ประกอบของโปรโตคอล”
      https://www.rfc-editor.org/rfc/rfc9110#section-4.1-5
    • ทำออกมาได้ดีมาก
      ตอบสนองไว เรียบร้อย และ ประสบการณ์ onboarding แบบไม่ต้องสมัครใช้งานนั้นยอดเยี่ยม

  • ความแยกระหว่าง “เอนทิตี vs ตาราง” มีอยู่จริง แต่สำหรับนักพัฒนาส่วนใหญ่ที่แค่อยากเห็นภาพสคีมาที่มีอยู่เดิมอย่างรวดเร็ว แค่นี้ก็เพียงพอแล้ว
    ที่นี่ ความสมบูรณ์แบบคือศัตรูของความมีประโยชน์
    คนส่วนใหญ่ไม่ได้พยายามสร้าง abstraction แบบ ORM แค่อยากเห็นว่าอะไรเชื่อมกับอะไรเท่านั้น

  • นึกถึง https://explain.dalibo.com/
    เป็นเครื่องมือสำหรับแสดงภาพ query execution plan และเป็นหนึ่งในเครื่องมือที่มีประโยชน์ที่สุดที่ผมเคยใช้ในการปรับแต่ง SQL query
    ถ้าจะใช้กับข้อมูลอ่อนไหว ก็ควรดาวน์โหลดเวอร์ชัน v2 แบบออฟไลน์เต็มรูปแบบที่อยู่ด้านล่าง

  • ถ้ามีตัวเลือกเส้นตรงกับ เส้นหักมุม 90 องศา ด้วยก็น่าจะดี
    ผมไม่เคยชอบเส้นโค้งเท่าไร แต่หน้าตาดูดีและทำออกมาได้เยี่ยม

    • จะเพิ่มไว้ในรายการสิ่งที่ต้องทำ

  • สงสัยว่ามีวิธีสร้าง SVG พวกนี้ผ่าน CLI ไหม
    ผมชอบมันมาก และส่วนขยาย Postgres ของ VSCode ที่ทำอะไรคล้ายกันก็ดี แต่ถูกผูกไว้กับ VSCode
    และก็ยังไม่มีตัวเลือก CLI ที่ส่งออกได้เพื่อนำไปเก็บไว้ในรีโพซิทอรีเหมือนกัน

  • ผมใช้ https://github.com/ondras/wwwsqldesigner อยู่ และคิดว่าน่าจะเอามาใช้เป็นตัวเทียบได้

    • นั่น Ondras แห่ง V8CGI ใช่ไหม?
      ผมชอบโปรเจกต์นั้นมาก และมันก็เป็นหนึ่งใน implementation ของ server-side JS ยุคแรก ๆ
      ไม่แน่ใจว่าผมอาจเป็นผู้ติดตามอยู่คนเดียว แต่ Ondřej ผลงานของคุณยอดเยี่ยมจริง ๆ

  • ใช้ได้เลย แต่บน GitHub ไม่มี ไฟล์ LICENSE: https://github.com/royalbhati/sqltoerdiagram