Skip to main content

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​

What you can do with the extension​

  • ERD visualization: render an Entity-Relationship Diagram (ERD) directly from .dbml files.
  • 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.
info

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+P on macOS or Ctrl+Shift+P on 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
FeatureCloudVS Code extension
Authoring
DBML editing & syntax highlighting✅✅
AI AssistantBuilt-in AI assistantUse 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 & collaborationCloud-based: share diagrams via links, embed in other apps, invite collaborators, shared workspace, real-time collaborationGit-based: collaborate by version-controlling .dbml files in your repository
Diagram privacyCloud-based: control access with private diagrams, password protection, and invite-only accessGit-based: control access via repository permissions
Version history✅ (paid)Git-based: track changes by version-controlling .dbml files