Projects

DBML Previewer

2025

Node.jsOpensourceReact

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 database diagrams directly within the editor.

Working with complex database schemas often requires visualizing relationships and structure. While DBML provides a clean way to define schemas, developers lacked a way to preview these definitions visually inside their IDE. This extension solves that 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
  • Supports the full DBML specification for complex schemas
  • VS Code integration — theme support and keyboard shortcuts (Ctrl+Shift+D)

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

Open source under MIT license.

👉 Available on the VS Code Marketplace and GitHub