DBML Viewer

An extension for Visual Studio Code that provides real-time rendering of a database schema from the generated DBML code.

Roadmap

• [x] ~Live preview (eye icon in the top right corner / command palette)~
• [x] ~Download SVG (in command palette)~
• [x] ~Code Structure with layout of code~
• [ ] Light/dark mode toggle
• [ ] Zooming in/out
• [ ] Change the ugly logo

Demo

Appendix

This extension is a perfect complement to vscode-dbml (color syntaxing and SQL export commands).

References

Here are some related projects used in this extension

@softwaretechnik-berlin/dbml-renderer

Authors

• @Durandal14

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/vscode-extension-dbml-viewer.git
   cd vscode-extension-dbml-viewer
   

2. Install dependencies:

   npm install
   

Build

To build the project, run:

npm run build

Supported Syntax

The DBML Viewer now supports both the current syntax and the syntax used on dbdiagram.io.

Example

table user {
    id uuid pk
    name text unique
    verbandsschlüssel char(1)
}

or

table user {
    id uuid [pk]
    name text [unique]
    verbandsschluessel char(1)
}

Table Definitions

To create tables and fields, use the Table definition syntax.

Example

Table users {
  id int [PK]
  email varchar
  gender varchar
  relationship varchar
  dob datetime
  country int
}

Table countries {
  code int [PK]
  name varchar
  continent_name varchar
}

Relationships

We support 2 ways of creating relationships:

1. Typing DBML code
2. Interacting directly on the diagrams itself, by dragging from field to field.

Example

The below defines a 1-n relationship between countries.code to users.country.

Ref: countries.code < users.country;

or use inline relationships:

Table users {
  id int [primary key]
  country int [ref: > countries.code] // many-to-one
  ...
}

Schemas

You can define the tables with full schema names:

Table ecommerce.order_items {
  ...
}

Moreover, you can make cross-schemas relationships and use enums from different schemas:

Table orders {
  id int [pk, ref: < ecommerce.order_items.order_id]
  status core.order_status
  ...
}

Enum core.order_status {
  ...
}