VS Code Extension
The dbdiagram VS Code extension brings DBML editing support and a live ERD preview into your editor, so you can work on database designs without leaving your coding workflow.
It also suits an AI-assisted workflow: let your IDE's AI agent (Cursor, Copilot, Windsurf) edit your .dbml, and the ERD updates live in the preview beside it.
Supported editors​
- VS Code: install from the VS Code Marketplace
- Cursor / Windsurf / other Open VSX-based editors: install from the Open VSX Registry
What you can do with the extension​
- ERD visualization: render an Entity-Relationship Diagram (ERD) directly from
.dbmlfiles. - DBML editor support: syntax highlighting and editing support for DBML.
- Generate DBML from a database connection: connect to a database and generate DBML to visualize an existing schema.
Using paid features in the VS Code extension
If you're on a paid plan (Personal Pro, Team, etc.), you can log in to dbdiagram.io within the extension to access premium features. You can log in via:
- Command Palette: Open the command palette (
Cmd+Shift+Pon macOS orCtrl+Shift+Pon Windows/Linux) and search for "Login with dbdiagram" - VS Code accounts menu: Click the account icon in the bottom left corner of VS Code, then select "Sign in with dbdiagram to use dbdiagram"
Network connectivity is required to access paid features.
Sync and publish with the CLI​
The extension covers local editing and ERD visualization. To push your .dbml to a diagram, pull cloud changes back, or publish docs to dbdocs.io, pair it with the dbdiagram CLI:
- Edit & preview locally with the extension.
- Sync & publish from the terminal (or CI/CD) with the CLI.
Feature comparison vs dbdiagram.io (cloud version)​
Show full feature comparison
| Feature | Cloud | VS Code extension |
|---|---|---|
| Authoring | ||
| DBML editing & syntax highlighting | ✅ | ✅ |
| AI Assistant | Built-in AI assistant | Use your IDE's AI agent (e.g. to edit DBML) |
| Import & export | ||
| Import from a database connection | 🟡 Partial: via @dbml/connector | ✅ |
| Import from SQL | ✅ | 🟡 Partial: via @dbml/cli |
| Export to PNG, PDF & SQL | ✅ | 🚧 Coming soon |
| Visualization | ||
| ERD visualization | ✅ | ✅ |
| Table search | ✅ | ✅ |
| Diagram detail levels | ✅ (paid) | ✅ (paid) |
| Table groups | ✅ (paid) | ✅ (paid) |
| Custom colors for tables, groups, refs | ✅ (paid) | ✅ (paid) |
| Sticky notes | ✅ (paid) | ✅ (paid) |
| Diagram views | ✅ (paid) | ✅ (paid) |
| Sharing & collaboration | ||
| Sharing & collaboration | Cloud-based: share diagrams via links, embed in other apps, invite collaborators, shared workspace, real-time collaboration | Git-based: collaborate by version-controlling .dbml files in your repository |
| Diagram privacy | Cloud-based: control access with private diagrams, password protection, and invite-only access | Git-based: control access via repository permissions |
| Version history | ✅ (paid) | Git-based: track changes by version-controlling .dbml files |