วาง SQL แล้วได้แผนภาพฐานข้อมูลใน 2 วิ — sqltoerdiagram ทำงานในเบราว์เซอร์ 100% ไม่อัป schema ขึ้นเซิร์ฟเวอร์

sqltoerdiagram คือเครื่องมือฟรี แค่วางคำสั่ง SQL ไว้ฝั่งซ้าย ก็จะได้ ER diagram (แผนภาพความสัมพันธ์ของตารางในฐานข้อมูล) ขึ้นมาฝั่งขวาทันที จุดที่ทำให้ต่างจากเว็บแปลง schema ตัวอื่นคือ เครื่องมือนี้ทำงานในเบราว์เซอร์ 100% ประมวลผล schema บนเครื่องเราเอง ไม่อัปโหลดขึ้นเซิร์ฟเวอร์เลยแม้แต่บรรทัดเดียว

ที่ผ่านมา ถ้าอยากเห็นโครงฐานข้อมูลของตัวเองเป็นภาพ ปกติต้องเลือกระหว่างสองทางที่ไม่สบายใจทั้งคู่ ทางแรกคือลงโปรแกรมหนักๆ แล้วนั่งตั้งค่าเชื่อมต่อ ทางที่สองคือเปิดเว็บแปลง schema ออนไลน์ แล้วก็อปคำสั่ง CREATE TABLE ทั้งชุดไปวาง ทางหลังเร็วกว่าก็จริง แต่แลกมาด้วยคำถามค้างคาใจว่าเราเพิ่งส่งโครงสร้างตารางทั้งฐานข้อมูลขึ้นเซิร์ฟเวอร์ของใครไปแล้ว sqltoerdiagram ตัดความอึดอัดทั้งสองทางนั้นออกไป ไม่ต้องกด submit ไม่ต้องสมัครสมาชิก และไม่ต้องลงอะไรในเครื่อง

วาง SQL ฝั่งซ้าย ได้ภาพฝั่งขวา

ขั้นตอนใช้งานสั้นจนแทบไม่ต้องอธิบาย เปิดหน้าเว็บขึ้นมาจะเจอช่องว่างสองฝั่ง ฝั่งซ้ายเป็น SQL editor ที่ไฮไลต์ syntax ให้ ฝั่งขวาเป็น canvas ว่างๆ พอวางคำสั่ง CREATE TABLE หรือ ALTER TABLE ลงไปฝั่งซ้าย ระบบจะวาดตารางเป็นกล่องขึ้นมาฝั่งขวาทันทีที่พิมพ์เสร็จ พร้อมเส้นโยงความสัมพันธ์ระหว่างตารางให้เห็นครบ

ในแต่ละกล่อง ตารางจะบอกชัดว่าคอลัมน์ไหนคือ primary key คอลัมน์ไหนคือ foreign key และเส้นที่โยงไปอีกตารางคือความสัมพันธ์ผ่าน REFERENCES ส่วนตัวอ่าน SQL รู้จัก constraint ที่คนเขียนจริงใช้กันแทบทุกแบบ ทั้ง PRIMARY KEY NOT NULL UNIQUE REFERENCES ที่เขียนติดกับคอลัมน์ ไปจนถึง FOREIGN KEY ... REFERENCES ... และ CONSTRAINT ... FOREIGN KEY ที่เขียนแยกระดับตาราง รวมถึง ALTER TABLE ... ADD FOREIGN KEY ที่เติมความสัมพันธ์ทีหลัง

รองรับ SQL หลายค่าย ทั้ง MySQL, Postgres, SQL Server และ SQLite ฉะนั้นไม่ว่าฐานข้อมูลที่ใช้อยู่จะเป็นตัวไหน ก็ก็อปคำสั่งสร้างตารางมาวางได้เลย ชื่อตารางจะครอบด้วย quote, backtick, [bracket] หรือเขียนเป็น schema.ชื่อตาราง ก็อ่านออก

เส้นความสัมพันธ์ไม่รก เพราะค่อยเด่นตอนเราชี้

ปัญหาคลาสสิกของแผนภาพฐานข้อมูลคือพอตารางเยอะ เส้นโยงก็พันกันจนดูไม่รู้เรื่อง sqltoerdiagram แก้ด้วยการให้เส้น foreign key จางเป็นค่าเริ่มต้น แล้วค่อยเด่นขึ้นตอนเราโฟกัสเส้นนั้นจริงๆ

เลื่อนเมาส์ไปวางบนตารางไหน เฉพาะเส้นที่เกี่ยวกับตารางนั้นจะสว่างขึ้นมาให้ดู ถ้าคลิกตาราง ระบบจะ pin โฟกัสค้างไว้ ตารางอื่นที่ไม่เกี่ยวจะจางลงให้เราเพ่งเฉพาะวงที่ต้องการได้ พอระบบจัดวางตารางแบบ most-connected ให้อยู่กลางอัตโนมัติ แผนภาพที่ได้จึงอ่านง่ายตั้งแต่แรกเห็น ไม่ต้องนั่งลากจัดเองทุกครั้ง และถ้าอยากปรับ ก็เลือกได้ว่าจะให้เรียงแนวนอนหรือแนวตั้ง จะอัดแน่นหรือเว้นโปร่ง

แก้ schema บนภาพได้เลย ไม่ต้องวิ่งกลับไปแก้ที่ SQL

แผนภาพในนี้ไม่ได้เป็นแค่ภาพนิ่งที่ดูได้อย่างเดียว แต่แก้ได้ทั้งสองทาง จะแก้ที่ SQL editor ฝั่งซ้ายแล้วให้ภาพอัปเดตตาม หรือจะ double-click ที่ชื่อตาราง ชื่อคอลัมน์ หรือชนิดข้อมูลของคอลัมน์บน canvas เพื่อพิมพ์แก้ตรงนั้นเลยก็ได้ จุดที่ช่วยให้ไม่พลาดคือ พอเปลี่ยนชื่อตาราง ระบบจะอัปเดตทุก REFERENCES ที่ชี้มาหาตารางนั้นให้อัตโนมัติ ไม่ต้องไล่แก้ทีละจุดเอง

อยากเพิ่มคอลัมน์ใหม่ก็คลิกที่ตารางเพื่อ pin ไว้ แล้วกด "+ add column" บน canvas ได้เลย ระบบจะจำตำแหน่งที่ลากตารางไปวางไว้ให้อัตโนมัติด้วย ปิดแล้วเปิดใหม่ก็ยังเจอ layout เดิม เพราะมันเก็บ schema ล่าสุดไว้ใน local storage ของเบราว์เซอร์

เก็บงาน · ส่งต่อ · เอาออกไปใช้

พอจัดแผนภาพเสร็จ เอางานไปใช้ต่อได้หลายทาง

• บันทึกเป็นไฟล์ .json — เก็บทั้ง SQL, ตำแหน่งตาราง, มุมกล้อง และ dialect ไว้ในไฟล์เดียว เปิดกลับมาทำต่อวันหลังได้ เหมาะเวลาอยากเก็บงานไว้กับตัว
• Share link — ได้ลิงก์ที่ฝังทั้งโปรเจกต์ไว้ในตัว URL เลย เหมาะเวลาอยากส่งให้เพื่อนในทีมเปิดดูทันทีโดยไม่ต้องแนบไฟล์
• Export เป็น PNG หรือ SVG — PNG เอาไปแปะในเอกสารหรือสไลด์ได้สะดวก ส่วน SVG เป็นภาพเวกเตอร์ที่ขยายเท่าไรก็ไม่แตก เหมาะกับงานที่ต้องพิมพ์หรือซูมดูรายละเอียด

ข้อที่ทำให้ share link น่าสนใจในแง่ความปลอดภัยคือ มันเก็บข้อมูลทั้งหมดไว้ในส่วน # ท้าย URL ซึ่งเป็นส่วนที่เบราว์เซอร์ไม่ส่งไปเซิร์ฟเวอร์ตามมาตรฐานของเว็บอยู่แล้ว แปลว่าต่อให้แชร์ลิงก์ออกไป ตัว schema ก็ยังไม่ได้วิ่งผ่านเซิร์ฟเวอร์ของใครเลย เป็นหลักฐานทางเทคนิคที่หนุนคำว่า "ข้อมูลไม่ออกจากเครื่อง" ให้เป็นจริง ไม่ใช่แค่คำโฆษณา

ทำไม "รันในเครื่อง" ถึงเป็นเรื่องใหญ่

สำหรับนักพัฒนา การได้เห็นโครงฐานข้อมูลเป็นภาพช่วยจับความสัมพันธ์ที่อ่านจาก CREATE TABLE เปล่าๆ ได้ยาก สำหรับมือใหม่ที่เพิ่งเรียนฐานข้อมูล นี่คือวิธีเห็นว่า foreign key เชื่อมตารางเข้าหากันยังไงแบบเห็นภาพจริง ส่วนเจ้าของธุรกิจที่อยากทำเอกสารฐานข้อมูลของระบบตัวเอง ก็ได้แผนภาพสวยๆ มาแปะรายงานโดยไม่ต้องจ้างใครวาด

แต่จุดที่ทำให้ทั้งสามกลุ่มใช้ได้สบายใจเหมือนกันคือเรื่องเดียว schema ฐานข้อมูลคือข้อมูลอ่อนไหว มันบอกโครงสร้างทั้งระบบ ตั้งแต่ตารางลูกค้าไปจนถึงตารางธุรกรรม การไม่ต้องเอาข้อมูลชิ้นนี้ไปฝากไว้บนเว็บของคนอื่นแค่เพื่อให้ได้ภาพหนึ่งภาพ จึงไม่ใช่ของแถม แต่เป็นเหตุผลหลักที่ทำให้เครื่องมือแบบนี้ควรค่าแก่การเลือกใช้

เริ่มได้ใน 3 ขั้น

ถ้าอยากลองเดี๋ยวนี้ ไม่ต้องเตรียมอะไรเลยนอกจากคำสั่งสร้างตารางที่มีอยู่แล้ว

1. เปิด sqltoerdiagram.com ในเบราว์เซอร์
2. ก็อปคำสั่ง CREATE TABLE ของฐานข้อมูลตัวเองมาวางในช่องฝั่งซ้าย — เริ่มจากตารางเดียวก่อนก็ได้ เช่น

CREATE TABLE customers (
  id INT PRIMARY KEY,
  name VARCHAR(100) NOT NULL,
  email VARCHAR(255) UNIQUE
);

CREATE TABLE orders (
  id INT PRIMARY KEY,
  customer_id INT REFERENCES customers(id),
  total DECIMAL(10,2)
);

3. ภาพจะขึ้นฝั่งขวาทันที ลองเลื่อนเมาส์ไปวางบนตาราง orders จะเห็นเส้นที่โยงไป customers สว่างขึ้นมา จากนั้นค่อยวางตารางที่เหลือเพิ่มทีละชุด

แค่นี้ก็ได้แผนภาพฐานข้อมูลตัวแรกในไม่กี่วินาที โดยที่ schema ไม่ได้ออกไปไหนจากแท็บที่เปิดอยู่ตรงหน้าเลย

สำหรับงานที่ข้อมูลอ่อนไหวที่สุด เครื่องมือที่ดีที่สุดบางทีไม่ใช่ตัวที่ทำได้มากที่สุด แต่เป็นตัวที่ไม่ขอเอาข้อมูลของเราออกไปไหนเลยตั้งแต่แรก

ที่มา: sqltoerdiagram บน GitHub