dbdiagram VS Code extension provides real-time Entity-Relationship Diagram (ERD) visualization for DBML (Database Markup Language) files.
Features
ERD Visualization: View Entity-Relationship Diagrams directly in VS Code while editing DBML files
Quick Preview: Click the preview button in the editor toolbar to open the diagram in a side panel
Live Editing: Edit your DBML file and see the diagram update in real-time
DBML Support: Full syntax highlighting and editor support for .dbml files
Installation
Install the extension from the VS Code Marketplace by searching for "dbdiagram"
Open any .dbml file in VS Code
Click the "Open Preview to the Side" button (the eye icon) in the editor toolbar or use the command palette
Usage
Opening the Preview
When you have a .dbml file open, you can view the ERD diagram in two ways:
Editor Button: Click the preview icon in the editor title bar (appears when editing .dbml files)
Command Palette: Open the command palette (Cmd+Shift+P on macOS or Ctrl+Shift+P on Windows/Linux) and search for "DBML: Open Preview to the Side"
Editing
Simply edit your DBML file in the editor - the diagram will update automatically as you make changes.
DBML Syntax
This extension supports the full DBML syntax. For more information about DBML syntax and how to write database schemas, visit the DBML Documentation.
Example DBML:
Table users {
id int [primary key]
email varchar [unique]
created_at timestamp
}
Table posts {
id int [primary key]
user_id int [ref: > users.id]
title varchar
content text
}
