Visual Model Builder

If you are developing an application with Prisma, the first thing you will create is a schema model. While it is easy to get started coding schema in the editor, it becomes cumbersome to maintain and keep track of as your schema grows. Databases have had Schema/ER diagrams for ages and it is very useful to visualize relationships and know the overall picture.

Introducing Prisma Schema Visualizer and Visual Model Builder!

Visualizer

Prisma Schema Visualizer

You can now visually inspect your Prisma schema and see relationships between models. Visualizer auto arranges models top-down and left to right so as to make it easier to view parent-child (ascendent-descendent) relationships. Select a table and explore all related descendant tables as well as ascendant models it depends on. Select any relation and get its details!

Visualizer Selected Model

Visual Builder

You can also build and/or modify schema visually. Add new models and fields. Use drag and drop to set up relationships between two models! And you can easily make changes right on the diagram. Change relation from required to optional or drop a relation! Change model or add fields.

Create Model

To create a new model, click Add Model (bottom bar). This will open up Add Model dialog. Enter Model Name.

Optionally, you can also add audit fields as part of the model creation. Audit fields are normally used to track who created the record and when, as well as who last updated and when it was updated.

Selecting Add Audit Fields will auto add following fields:

  • Created by = Default/Auto Populated with User creating record
  • Created date = Default/Auto Populated with date when record was created
  • Updated by = Default/Auto Populated with last User updating record
  • Updated date = Default/Auto Populated with date when record was last updated

Edit Model

Click '/' (pencil) or Double click Model name. This will open up Edit Model dialog.

Click Delete to delete the model and all related relations.

Add Relation

Select Model you want to join from using Drag handle and Drop it on to model you want to join. Relations are defined in terms of from child to parent (or from descendants to ascendent).

When you create a relation, parent table primary key is auto added as Foreign key to child table. It will also try to add any related field is possible.

Edit Relation

Double click a relationship to edit it. This will open up Edit Relation dialog. To delete a relation, click Delete on bottom bar.

Add Field

To add a new field, click + Add for the model. This will open up Add Field dialog. Enter Name and select Data Type and click Add to add the field.

Edit Field

To edit an existing field, double click the field name. This will open up Edit Field dialog. Make changes as needed. To delete the field, click Delete (bottom bar).

Visual Modeler has a feature to allow you can also include fields from relations. While not reflected in schema, they are used by code generator to build Prisma queries so that you have access to all related data when you query main model. To add a related field, click + Related for the model. This will show Add Related Field dialog. Select Related Model and Related Field.

To edit an existing related field, double click the field name. This will open up Edit Field dialog. Currenty you can only view relations ships details. To delete the field, click Delete (bottom bar).

Other Features

Print

Click Print button to generate an image of the schema diagram.

Zoom

Use + and - buttons to Zoom the diagram!

Video Tutorial

Quick 2 min intro video showing how to create models visually and use drag and drop to create relation