# [Open Source] #25 ChartDB: Kiến trúc sơ đồ hóa Database "Zero-Connection" và sức mạnh của React Flow

Trong quản trị dữ liệu, việc hiểu rõ mối liên kết giữa các bảng là tối quan trọng. Tuy nhiên, các công cụ ERD truyền thống thường nặng nề hoặc yêu cầu kết nối trực tiếp vào Database (tiềm ẩn rủi ro bảo mật). ChartDB phá vỡ rào cản này bằng cách tiếp cận Client-side First và cơ chế Smart Query, biến metadata khô khan thành sơ đồ tương tác chỉ trong vài giây.

🛠️ 1. Hệ sinh thái công nghệ: Sự kết hợp của những "gã khổng lồ"

Github: https://github.com/chartdb/chartdb

ChartDB không cố gắng tái phát minh bánh xe, mà thay vào đó, dự án thực hiện điều phối (Orchestration) những thư viện mạnh mẽ nhất để tạo ra một trải nghiệm Single Page Application (SPA) mượt mà:

• Frontend Engine: Chạy trên React 18 và Vite. Việc sử dụng React 18 cho phép ứng dụng tận dụng các tính năng Concurrent để render các sơ đồ phức tạp mà không làm treo UI.
• Diagramming Core (@xyflow/react): Trước đây là React Flow, đây là "trái tim" xử lý toàn bộ logic về Node (bảng), Edge (quan hệ) và các tương tác zoom/pan/drag-and-drop trên canvas.
• Code Editor (Monaco Editor): Một bản thu nhỏ của VS Code được tích hợp trực tiếp, mang lời gợi ý mã (IntelliSense) và highlight cú pháp chuẩn xác cho SQL và DBML ngay trong trình duyệt.
• Storage (Dexie.js): Một lớp wrapper mạnh mẽ trên nền IndexedDB. Dữ liệu của người dùng được lưu trữ cục bộ, bền vững và riêng tư ngay tại máy khách.

🏗️ 2. Tư duy kiến trúc: Bảo mật qua sự "Tách biệt"

Chiến lược kiến trúc của ChartDB tập trung vào hai yếu tố: Hiệu năng cực cao và Quyền riêng tư dữ liệu.

Chiến lược "Smart Query" (Zero-Server Connection)

Đây là điểm sáng kỹ thuật lớn nhất. Thay vì yêu cầu người dùng nhập thông tin đăng nhập Database vào ứng dụng (vốn dễ gây lo ngại về bảo mật), ChartDB cung cấp các bản script SQL "thông minh" cho từng hệ quản trị (PostgreSQL, MySQL, SQL Server...).

• Cơ chế: Người dùng chạy script này cục bộ trên máy họ -> Script trích xuất Metadata của Schema thành định dạng JSON -> Người dùng dán JSON vào ChartDB.
• Lợi ích: Dữ liệu thật không bao giờ rời khỏi hạ tầng của người dùng, ChartDB chỉ nhận diện "khung xương" của Database.

Quản lý trạng thái theo Module (Context-driven)

Dự án tránh việc sử dụng một store toàn cục nặng nề (như Redux) mà chia nhỏ logic vào các React Contexts chuyên biệt trong src/context/:

• canvas-context: Điều phối các thuộc tính của bản vẽ.
• history-context: Quản lý ngăn xếp (stack) các hành động để thực hiện Undo/Redo mượt mà.
• storage-context: Đảm nhận việc đồng bộ dữ liệu xuống IndexedDB một cách bất đồng bộ.

🔄 3. Phân tích chuyên sâu Luồng hoạt động (Data Pipeline)

Sơ đồ dưới đây mô tả hành trình từ một tệp SQL DDL thô hoặc một chuỗi Metadata JSON biến thành một sơ đồ ERD sống động:

Giải mã các kỹ thuật "Pro-level" trong mã nguồn:

1. Multi-dialect Parsing: Trong src/lib/data/sql-import, ChartDB xây dựng các bộ lọc riêng cho từng phương ngữ SQL. Nó sử dụng node-sql-parser để bóc tách các câu lệnh CREATE TABLE, ALTER TABLE và xác định chính xác các quan hệ Khóa ngoại (Foreign Keys) để tự động vẽ các đường nối (Edges).
2. AI-Driven Migration: Tích hợp Vercel AI SDK. Kỹ thuật này cho phép người dùng mô tả yêu cầu bằng ngôn ngữ tự nhiên hoặc yêu cầu AI chuyển đổi sơ đồ từ MySQL sang PostgreSQL, xử lý cả việc ánh xạ các kiểu dữ liệu đặc thù giữa hai hệ thống.
3. Hệ thống i18n chuyên nghiệp: Với i18next, ChartDB hỗ trợ đa ngôn ngữ cực tốt. Tệp vi.ts trong mã nguồn cho thấy sự đầu tư nghiêm túc vào trải nghiệm người dùng tại thị trường Việt Nam.

⚖️ 4. So sánh chiến lược

✅ Kết luận: Tại sao nên chọn ChartDB?

ChartDB là minh chứng cho việc một công cụ web có thể thay thế hoàn toàn các phần mềm desktop truyền thống nếu có một kiến trúc đúng đắn. Bằng cách kết hợp React Flow, Monaco Editor và triết lý Privacy-first, dự án mang lại một môi trường làm việc chuyên nghiệp, an toàn và cực kỳ linh hoạt cho các kỹ sư dữ liệu thời đại mới.

Hy vọng bản phân tích chuyên sâu này mang lại giá trị thực tế cho bạn trong việc quản trị hạ tầng dữ liệu. Đừng quên Upvote và Follow mình để đón xem những dự án kỹ thuật thú vị tiếp theo vào ngày mai nhé!