← Back

DBML Previewer

DBML Previewer is a Visual Studio Code extension I developed to bridge the gap between database schema markup and visual understanding. It transforms DBML (Database Markup Language) files into interactive, beautiful database diagrams instantly.

Working with complex database schemas often requires visualizing relationships and structure. While DBML provides a clean way to define schemas, developers needed a seamless way to preview these definitions visually within their IDE. This extension solves that problem with zero configuration required.

Key Features

  • One-click diagram generation - Transform any DBML file into an interactive diagram
  • Real-time updates - Changes to DBML files are reflected immediately
  • Interactive relationships - Drag and drop tables, explore connections with tooltips
  • Enterprise-ready - Supports the full DBML specification for complex schemas
  • VS Code integration - Seamless theme integration and keyboard shortcuts (Ctrl+Shift+D)

Technical Implementation

Built using React and React Flow for the interactive diagram interface, with DBML Core for parsing and Dagre for intelligent layout algorithms. The extension leverages the VS Code API for deep IDE integration.

The extension is open source under MIT license and actively maintained with planned features including export options and custom themes.

👉 Available on the VS Code Marketplace and GitHub