DBML Visualizer

A real-time, interactive, and beautiful Web Application to visualize and edit DBML (Database Markup Language) files. Built with Vue 3, Vite, Vue Flow, and Monaco Editor.

Features

• Real-time Editing: Edit your DBML code inside a powerful Monaco-based code editor and watch the ER diagram update instantly.
• Auto Layout: Automatically arranges tables and relationships clearly using the Dagre layout algorithm.
• Interactive Canvas: Drag, drop, pan, and zoom around your architecture diagram smoothly.
• Premium Design: Modern UI with Dark Mode and Glassmorphism effects.
• Export Options: Download the ER Diagram accurately in high-resolution PNG or PDF formats.
• Local Persistence: Restores your previous session's working code safely on reload.

Installation

Ensure you have Node.js installed, then run the following:

# Install dependencies
npm install

# Start the development server
npm run dev

Visit http://localhost:5173 to see the application in action.

Built With

• Vue 3 & Vite
• @dbml/core
• Vue Flow
• Vue Monaco Editor
• html-to-image & jspdf

Author

Loi Nguyen (phucloi.dev@gmail.com)

License

This project is licensed under the MIT License - see the LICENSE file for details.