Generating DBML Files from a Prisma Schema — Part 2

Hello fellow developers!

In the exciting journey of building a real-time messaging app inspired by the innovative work of Antonio Erdeljac’s next13-discord-clone ✨, we’ve already explored a wide array of cutting-edge technologies and skillfully learned how to set up an impressive range of features. As we eagerly continue on this adventurous path 🚀, let’s take a deeper dive into the captivating world of generating Database Markup Language (DBML) files from our Prisma schema. This invaluable step will provide us with a striking visual representation of our database’s intricate structure and relationships, which in turn will empower us to gain a profound understanding of the flow of our data.

Before we proceed, it’s worth noting that our journey is a continuation from the remarkable insights shared in Part 1 of the tutorial, which you can find right here. Part 1 has laid the foundation for our project and introduced us to a treasure trove of knowledge. 📚🌟

Let’s dive right in! 💧🏊‍♂️

Prerequisites:

Before we dive in, let’s make sure we’re all on the same page:

1. You have a basic familiarity with the Database Markup Language (DBML).
2. You’re comfortable working with Prisma, as we’ll be utilizing our Prisma schema for this task.
3. Your Prisma project is up and running (if you need help with this, refer to Part 1 of our tutorial).

Getting Started:

Let’s jump into the process of generating those insightful DBML files:

Step 1: Install the DBML Generator

First things first, open up your terminal and navigate to the root directory of your project. Here, we’re going to install the DBML generator as a development dependency using the following command:

$ yarn add -D prisma-dbml-generator

or

$ npm install --save-dev prisma-dbml-generator

Step 2: Update Your Prisma Schema

Next, open your Prisma schema file (usually named schema.prisma). Here's where the magic happens – update the generator section to include the DBML generator like so:

generator dbml {
  provider = "prisma-dbml-generator"
}

Step 3: Generate DBML Files

With the DBML generator configured, it’s time to generate the actual DBML files. Execute the following command in your terminal:

$ npx prisma generate

This action will result in the creation of the DBML files, and you can locate them within the prisma/dbml directory.

Step 4: Visualize Your Database

To bring our database structure to life, let’s use a visual tool. Head on over to the DBDiagram website and paste the content of your generated schema.dbml file into the diagram editor. Voila! You now have a visual representation of your database schema and all the relationships between your entities.pr

STEP 1: Open DBML website

DBML Homepage

STEP 2: Copy and paste it in the code block and see the diagram

You can view the diagram here.

Closing Thoughts:

As we take these steps to generate DBML files and visualize our database structure, we’re adding another layer of understanding to our project. It’s incredible how this process can enhance our grasp of the intricate web of data that powers our app.

So, fellow coders, keep up the fantastic work! We’re well on our way to creating an incredible real-time messaging platform that’s both functional and visually appealing.

Happy coding!

Manav Khadka