dbdiagram VS Code Extension
The official VS Code extension from dbdiagram.io. It provides real-time visualization of Entity-Relationship Diagrams (ERDs) for DBML (Database Markup Language) files.
Features
- ERD Visualization: View Entity-Relationship Diagrams (ERDs) directly in VS Code while editing DBML files.
- DBML Support: Full syntax highlighting and editor support for
.dbml files.
- Generate DBML From a Database Connection: Generate DBML from a database connection to visualize the database.
Usage
Opening the Preview
When you have a .dbml file open, you can view the ERD in two ways:
- Editor Button: Click the preview icon in the editor title bar (visible when a
.dbml file is open).
- 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 updates automatically as you make changes.
Login for Paid Features
For users with paid plans, to access premium features, log in with your dbdiagram.io account. There are two ways to login:
- Command Palette: Open the command palette (
Cmd+Shift+P on macOS or Ctrl+Shift+P on Windows/Linux) and search for "Login with dbdiagram".
- VSCode Manage Accounts: Click on the account icon in the bottom left corner of VSCode, then select "Sign in with dbdiagram to use dbdiagram".
Once logged in, paid features will be automatically enabled.
Note: Network connectivity is required to access paid features.
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
}
DBML Reference
This extension supports the full DBML specification. For details and advanced syntax, see the DBML Documentation.
Support & feedback
