DBML Viewer & ER Diagram (DBML Preview, SQL to ER Diagram, ERD)

DBML Viewer & ER Diagram (DBML Preview, SQL to ER Diagram, ERD), a VS Code extension by Zovo

Zovo Pro: USD 19 once, every Zovo tool. The diagram, the DBML language support and Copy SVG are free, with no limit.

Free, MIT license. Needs VS Code 1.90.0 or newer. Extension ID zovo.zovo-dbml-viewer, version 0.1.1.

A DBML viewer that draws your schema as an ER diagram beside the editor and redraws it as you type. It also turns SQL into an ER diagram: open a PostgreSQL, MySQL, SQL Server or SQLite file with CREATE TABLE statements and click the diagram button. Prisma schemas work too. No sign-in, no network, no telemetry.

Questions people ask

What you get

• Live DBML preview. Open a .dbml file and click the diagram button in the editor title bar (or run DBML Viewer: Open ER Diagram). Tables show their columns and types with PK, FK, unique and not-null markers; enums and sticky notes have their own boxes.
• Relations with crow's foot ends. One-to-one, one-to-many and many-to-many lines are routed at right angles. Hover a line to highlight both columns and see the relation and its ON DELETE action.
• Automatic layout you can change. Referenced tables sit on the left and the tables that point at them on the right, with no overlaps. Drag a table to move it; the positions are kept for each file. Reset layout starts over. Schemas with 200 tables or more get a grid ordered by relation.
• Find your way. Zoom with Ctrl or Cmd + scroll, pan by dragging the background, Fit to see everything, search a table by name, and click a table or a column to jump to its line.
• Colors. headercolor on a table, or one color per TableGroup. Light, dark and high contrast themes.
• Copy SVG. Puts the diagram on the clipboard as an SVG image, for docs and pull requests.

SQL to ER diagram

The same button shows up on .sql files that create tables. It reads CREATE TABLE with column types, PRIMARY KEY, NOT NULL, UNIQUE, DEFAULT, AUTO_INCREMENT, IDENTITY, SERIAL and REFERENCES; table constraints; ALTER TABLE ... ADD [CONSTRAINT] FOREIGN KEY; CREATE INDEX; CREATE TYPE ... AS ENUM; COMMENT ON; quoted names with "", backticks or []; GO and DELIMITER. Statements that do not describe tables (INSERT, views, functions) are skipped and listed under the toolbar.

DBML language support

• Syntax colors for .dbml files.
• Problems with line and column: an unknown keyword, a missing }, a Ref to a table that does not exist, a column that is not in its table.
• Outline of tables, columns, enums and groups.
• Go to definition: Ctrl or Cmd + click users.id in a Ref to jump to the column.

The reader covers Project, Table with alias and settings, columns with pk, increment, unique, not null, null, default, note and inline ref, indexes (composite and pk), Ref in short and long form with <, >, - and <> plus delete and update actions, composite references, Enum, TableGroup, TablePartial, sticky Notes, schema names, quoted names, comments and multi-line strings.

Zovo Pro tools

Three tools for database work are part of Zovo Pro. Each has 3 free tries on your computer, and a try is used only when the tool produced its result (a file written, a report on screen). Escape or Cancel never uses one.

Zovo Pro is USD 19 once and turns on the Pro tools in every Zovo extension. Nothing about Pro shows when you open a file; it only comes up when you click one of the three tools. To hide the buttons, set dbmlViewer.showProTools to false.

Settings

Notes

• Not affiliated with Holistics, dbdiagram.io or dbdocs.io. DBML is an open format by Holistics; this extension has its own reader and does not use their code.
• The SQL reader is made for schema files. It reads what describes tables and keys and skips the rest; it does not run or check SQL.
• Files up to 8 million characters are read. Reading runs in a background worker with a time limit, so a broken or huge file cannot freeze the editor.

Guides

• Export an ER diagram as PNG or PDF from VS Code
• Draw an ER diagram from a DBML or Prisma file in VS Code