# Preview DBML code from Vscode

If you're a [dbdocs](https://dbdocs.io/) or [dbdiagram](https://dbdiagram.io/) user, you've probably written DBML code from your editor (Vs code ). This extension enhances your experience by allowing you to view your DBML code in an ERD ( Entity Relation Diagram ) from your editor.

### How does it work?

#### Install the extension

Go to the extensions tab in your editor, search for `DBML Entity-Relationship Diagrams visualizer` and install it.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1714343606407/b4aebf51-ba7e-46d5-ac04-d5a091de1e0d.png align="center")

#### Write your DBML code

In your workspace, create a file with the `.dbml` extension and write your DBML code in it ( code example below )

```typescript
Table users {
  id integer
  username varchar
}

Table posts {
  id integer [primary key]
  title varchar
  body text [note: 'Content of the post']
  user_id integer
}

Ref: posts.user_id > users.id // many-to-one
```

#### Preview ERD

When you're in a `.dbml` file, you'll see a preview icon in the top right-hand corner of the editor's title bar.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1714344322718/08899457-5cab-40b3-a63f-d0ceb47ac8a7.png align="center")

When you click on this button, a new tab opens on the side displaying the preview.

![](https://github.com/BOCOVO/db-schema-visualizer/assets/51182814/a59fd0c0-246d-4f00-be39-9885d88b8b85 align="center")

You can move tables, zoom in on the scene and even move around within it.

### Support the project

* Leave a review of the extension [here](https://marketplace.visualstudio.com/items?itemName=bocovo.dbml-erd-visualizer&ssr=false#review-details)
    
* Visit the repo here to leave a star or contribute [here](https://github.com/BOCOVO/db-schema-visualizer)
    

**Enjoy**