Visualizing your Prisma schema in a RedwoodJS project

Visualizing your Prisma schema in a RedwoodJS project

Do you want to have a visualization of your database models? Using Redwood to build your fullstack application? Then this guide is for you! I'm going to show how easy it is to generate an ER diagram, and keep it updated!

We'll be using keonik/prisma-erd-generator which is an npm package that you can use like a kind of plugin to prisma to generate an svg ER diagram of your prisma schema.

First thing you need to do is to install it. In the root of your RW project, run this command (yes, we're not specifying any workspace here):

yarn add -D prisma-erd-generator @mermaid-js/mermaid-cli

You'll then need to add a bit of config to the top of your schema file (api/prisma/schema.prisma), right below the generator config for client (generate client { ... })

generator erd {
  provider = "prisma-erd-generator"
  output   = "./ERD.svg"

Save the file and now you're ready to generate the diagram. Run this command from the root of your project (it can take a long time the first time you run it). (If you're trying this on a fresh project, make sure you've ran at least one migration before trying to add and run the erd generator.)

yarn rw prisma generate

That should have produced an SVG file at api/prisma/ERD.svg. Open it up (for example using your web browser) and you should see all your models and relations from your schema file.

What's great here is that whenever prisma runs generate you'll get a new diagram. So, for example, whenever you generate a new migration you'll also get an up-to-date visual representation of your database model. How great is that?!

For a basic schema like this:

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  body      String
  createdAt DateTime @default(now())
  userId    Int?
  user      User?    @relation(fields: [userId], references: [id])

model Contact {
  id        Int      @id @default(autoincrement())
  name      String
  email     String
  message   String
  createdAt DateTime @default(now())

model User {
  id                  Int       @id @default(autoincrement())
  email               String    @unique
  hashedPassword      String
  salt                String
  resetToken          String?
  resetTokenExpiresAt DateTime?
  roles               String?
  posts               Post[]

You'll get a diagram like this: