albingroen/prismabuilder.io

Build your Prisma schema visually in this easy-to-use web based tool

prismabuilder.io

Build your Prisma schema visually in this easy-to-use web based tool.

Try it out at prismabuilder.io

Schema generator code by Richard Powell

Documentation

Generating the schema from JSON

The application uses JSON as the data format, and then generates the Prisma schema string on demand. This is done by sending a POST request to this url and passing in the schema.

axios.post("https://prismabuilder-io-api.onrender.com/generate", { schema });

Parsing a schema string into JSON

axios.post("https://prismabuilder-io-api.onrender.com/parse", { schema });

You can find the code for this here: albingroen/prismabuilder.io-api

prismabuilder.io's Issues

Support composite IDs from Prisma

Hi. Great work with the tool 👍🏼 I am thinking of exposing this to our business. Was trying this out and noticed @@id is not suported as of now.

If I want to define a key as @@id([field1, field2]) as defined here I dont see a way to do that through UI, also the info gets lost when I say generate schema

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

Add possibility to delete enum

After searching everywhere I didn't find if it's possible to delete an ENUM.

Resolve Text Overflow Issue in `react-flow` box component

Hello, This project is amazing. However, I get an issue where text overflows beyond the boundaries of its container. This usually happens when the text length exceeds the size of the box. This can result to readability issues and potential loss of content.

Issue

When having a lengthy text within the node, the text extends beyond the alloted space of the box, causing overflow and disrupts the layout.

Expected Behavior

Text should be properly contained within the box and should either wrap or truncate to maintain readability and visual consistency

Steps to Reproduce:

Here's the prisma model that has an overflow issue when I use it on www.prismabuilder.io

model CustomerInvoicePayments{
  invoicePaymentId        Int @id @default(autoincrement())
}

Here's the result on using that model:

Proposed Solution

To address the issue, I think we wrap the text so that it will automaticall adjust based on the length of the string. or if the react-flow does not allow this, maybe we can make the text smaller? Also, I think this problem also occurs on the sub nodes of each main node

Thank you!

Add @map option for fields & models

Prisma supports mapping model names to different column names via the @map directive. It would be really neat to have this option for fields (@map) or for models (@@map).

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

[Feature] Field drag and drop

Hello,

Very nice tool, thank you !

Could be cool to drag and drop fields to change order in generated schema ?

Model name not able to edit

Hello there,
I tried to create model, and it is created with new, I am trying to rename it so I can add new model.
Right now It is not editable, and in this case, not able to create new model there. Please help give functionality to make the model name editable.

Feature Live Collaboration

It would be good to have live collaboration sessions for more people to join in and prepare and have an overview of their schemas

• Setup Login with for example GitHub/GitLab, would be good to use next-auth for this one as it is quite handy for such things
• Show who is working/worked on a model, maybe something along the lines how confluence shows past updates
• Save previously prepared schemas

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

Show on a field if it's an array

We should show on a field if it's got the list prop set on it to indicate whether it's a list of values or not.

Importation bug

Hello,

When I import this schema it gives me this error "Make sure to import a full schema" :

`datasource db {
provider = "mysql"
url = env("DATABASE_URL")
relationMode = "prisma"
}

generator client {
provider = "prisma-client-js"
}

model users {
id Int @id @default(autoincrement())
email String @db.VarChar(255)
name String? @db.VarChar(255)
username String? @db.VarChar(255)
}
`

Add clone table or column

Select list impossible to read in dark mode

When I use the site with my browser in dark mode, I have problems displaying the select list. The text is white on a white background which makes it impossible to read. I use chrome as my browser.

Screenshot in light mode :

Screenshot in dark mode :

Add MongoDB !

Hi, I love the idea behind your tool, but... It didn't supports mongodb.

Dropdowns are really hard to read

All dropdowns have white on white text.

More than one relation to the same model

When need to add different fields refer to the same model, app generates identical name for value field.

  createdBy         Person?          @relation(fields: [personId], references: [id])
  updatedBy         Person?          @relation(fields: [personId], references: [id])

  personId          String?
  personId          String?

Would be cool to auto set value field name as relation field + model + key field. And set name for relation.

  createdBy         Person?          @relation("createdByPersonId", fields: [createdByPersonId], references: [id])
  updatedBy         Person?          @relation("updatedByPersonId", fields: [updatedByPersonId], references: [id])

  createdByPersonId          String?
  updatedByPersonId          String?

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

onDelete: Cascade

Have an onDelete: Cascade option for child tables

ER diagram visualization

It would be awesome if we could view the schema directly with the schema builder as an ER diagram. There is already a little web tool and a prisma generator, but its not very nice copying the schema from one place to several places to few times until I'm done with the changes. Maybe this ER diagram could also be shown while adding new fields.

EDIT: I now noticed that very little graph view icon at the bottom left. But I still think the method how the graph look is not very structured. For me its very hard to read and tell which one is connected to which other.

vs.

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

Template tables

the ability to create and save tables as templates for easier reuse and consistency across your projects

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

Support for MongoDB

Please add support for MongoDB as well.

Fields added that aren't a default type aren't visualized.

I don't know if this is bug just in my computer, but the fields that I add (For example, a field "Item" list in a "User") doesn't appear in the main board.

But, it generated just fine.
Example:

Even if I refresh the page, it just doesn't appear.

Introduce PWA

Use next-pwa to turn this platform into a pwa reference link is here.

const withPWA = require('next-pwa')

module.exports = withPWA({
  // other next config
})

With a bit of extending some aspects, this pwa could be used via mobile as well and people could do stuff on the go :D

Todo

• Make app responsive
• Enable PWA support

Enums

We should add support for creating and using enums in other models

ENUM is available despite having selected SQLite as Provider, ENUM is not supported in SQLITE.

Error validating: You defined the enum Role. But the current connector (SQLITE) does not support enums.

Custom field not shown

I've added a Task model and added that to the User model as tasks field but it does not show in the list. When exporting the schema you can see the data is actually there. Tried it twice so that why it shows the field twice.

Default updatedAt for Prisma

Please include the default Prisma value for updatedAt. Thanks.

New field modal closes when using scroll bars.

When picking a type in the new field modal, if you use the scroll bar the whole modal closes. Same for firefox and chrome. Also they don't respond well to keyboard controls.

Database selector

Since the available fields and default values differ depending on what database you're using with Prisma, it might be a good idea to add a selector for specifying which database you're going to use you're schema with.

Could looks something like this:

Software License

Hi @albingroen, really awesome tool you've built here. I was wondering if there’s any limitations to using your code in other projects since there’s no license included in the repository?

Multiple schemas

We should introduce functionality for working with multiple schemas and not just one.

Requirements

• URL based
• Sync with local storage

Add prisma schema migration

Hi,

Thank you for your amazing work on this project!

I have a suggestion for a new feature that I believe would significantly improve the user experience: visual schema migration.

Currently, migrating schemas can be a complex and error-prone process. A visual editor would allow users to easily define the target schema by dragging and dropping tables and columns. The editor could highlight potential conflicts and suggest corrective actions, making the process much more intuitive and streamlined.

To track previous schemas and guide users through individual migrations, user accounts could be integrated into the feature. This would allow users to store their preferred schemas and easily initiate and apply migrations with one click.

I think this feature would be incredibly valuable for the project and its users. I'd be happy to discuss this further and contribute in any way possible.

Reorder tables

I would like to reorder the tables just like the fields of it.

its similar to issue #36

Update relations on model rename

For now need to reset relation when target model was renamed.

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

Provider Dropdown menu color scheme fixed while in DarkMode

Previously the Dark Mode Dropdown :

After Fixing:

Submitted a PR for this issue

Show enums in graph view

We should probably show enums in the graph view too.

Improve Accessibility

Add missing accessibility features, when navigating with keyboard, reference for that would be here

Also resolve some lighthouse related topics to bring up the accessibility score:

Add support for SQL Server

Would be nice to have support for SQL Server.
I'll help you out with this.🙂

Enum support for imported schema’s

Save data to local storage

Data is currently just stored in memory, resulting in a clean slate after reloading the page. This was a decision I took to lower the barrier to shipping.

Now would probably be a good time to implement data saving to local storage throughout the app.

Share feature

A possibility to share schema with a link

File live editing

It would be awesome if I could start the editor e.g. via npx prisma builder and then a browser opens with the current schema, so that I can make changes and if I'm done the changes will be persisted to the local disk so that there is no 3rd pary API server needed (no data will be send to stranger servers, all data is keep private on local computer). It would also be nice if that also re-syncs from disk, so that if I change the schema on disk it will be updated on the builder UI.

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

Implict many-to-many relationships

When adding a reference to another model, it would be nice if you could specify the cardinality of the relationship (one-to-one, one-to-many, many-to-many).
It could add the necessary fields to the respective models in the schema.

I'd be happy to help and open PR for this.

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

Sugest default value for Int, Float, Decimal

Hi,
When we create int property, it's sometimes necessary to add default value like 0.