Visual schema designer

[tvvignesh]

The prisma admin UI could also be used to create schema by either designing it via GUI (and it can create the tables and other resources and also generate the *.prisma file).

And it should also be able to take the *.prisma file if supplied and run the relevant queries against the DB to create the schema like what happens when you use lift via CLI

This will make the admin UI not just a tool to query the already created schema but also create new ones if needed.

You can also take inspiration from websites like https://graphqleditor.com/ if you want, where they provide options to do this for designing GraphQL Schema.

@schickling @pantharshit00 @madebysid @timsuchanek

[schickling]

This is definitely something we're thinking about and have created a few mockups. It's a non-trivial topic since layouting a graph properly is a very challenging topic.

Here are a few of our internal mockups:

The biggest problem is how to visually layout the graph properly for big schemas. (GraphQL Voyager faces some of the same challenges.) It's clear we'll need to come up with some kind of tradeoffs (e.g. not showing the entire graph at once and let the user expand parts step by step).

We'll need to experiment a lot with different concepts/prototypes in order to find the right set of tradeoffs. Let's use this thread to brainstorm together! Ideas welcome! 💡

[tvvignesh]

@schickling WOW! That's an awesome looking UI - Happy to know that your team had indeed thought about it. Completely agree with you. Its indeed a huge way ahead. Maybe, to start off (initial iteration) we can avoid the GUI and just provide users an option to provide a prisma schema file (or provide an editor like what you have done for GraphQL query) which gets run in the DB to generate the relevant schema.

As you had rightly said, considering the scale at which people operate databases in production, it may not be feasible to show the entire graph at once. We need to provide an option to load one type at a time.

We can also see if we can export migrations by doing an introspection directly from the Prisma 2 Admin UI (it can interact with Lift behind the scenes).

[nickgoodenough]

Have you guys dug into Airtable's UI/UX? They obviously don't let you surface a view of the entire schema like you've shown here—but what they have done is create a schema modeler that just about anyone can get up and running with in very little time with very little skill. Might be worth doing a remix of?

[naveen-bharathi]

@nickgoodenough

Have you guys dug into Airtable's UI/UX? They obviously don't let you surface a view of the entire schema like you've shown here—but what they have done is create a schema modeler that just about anyone can get up and running with in very little time with very little skill. Might be worth doing a remix of?

Can you kindly provide the link to Airtable Schema Modeler?

[schickling]

Related: DrawSQL

[tvvignesh]

@schickling Wow! That's great. Only problem is that it does not generate a schema.prisma file but rather interacts directly with the database layer and may not support all DBs which Prisma will support in the future. Maybe, we can introspect after that. Wish it was open source, we can look for some sort of integration rather than re-inventing the wheel.

[naveen-bharathi]

@schickling

Related: DrawSQL

Thanks

[davemaier]

Hi! I just wanted to push this issue since I think it would be an extremely useful feature.

Maybe this could be integrated into prisma studio. During schema design it would be great to have something like hot reloading of the diagram when the schema file changes.

It would be great if there was an option to hide junction tables in many-to-many relationships, since prisma abstracts them away anyway and it would make diagrams much cleaner.

[supermacro]

Here's some inspiration:

https://www.luna-lang.org/

I want something like this but for my db 😋

Additionally, once a data model gets complex enough, having a single schema.prisma file becomes unwieldy. If a new engineer joins and has to read through a "flat" (I know it's not actually flat, but it also sort of is) file, then their learning curve might be a bit high. Thankfully there are tools like SchemaSpy and similar tools that already do a good job a purely visualizing the data model.

But what about editing the data model? IMO editing it visually would be a better developer experience. I could "link" two tables together thus creating a foreign key reference simply by dragging a line between two tables. Or add a column by pressing "enter" on a selected table. etc etc.

Indexes and constraints could also be visualized potentially.

[ZhaoKunLong]

In fact, many tools support visualization, but some tools require SQL scripts to be imported. Therefore, suggest can first introduce the export SQL model script feature, This is because Prisma studio does not support exporting the model scripts.

[Dammmien]

Maybe an integration with a tool like dbdiagram.io could be sufficient in short term. A simple Import from Prisma (prisma.schema) in the import schema :

It's already doable currently, but not very convenient: https://notiz.dev/blog/prisma-dbml-generator

[excitedbox]

I agree that there are millions of visualizers but few visual editors. The diagramming feature is one of the best parts about the MYSQL workbench. It quickly lets you build and visualize at the same time. For Doctrine there is Skipper but it costs almost $300 which is way too much for what it offers.

You should look into AntViz their G6 and X6 libraries are made for exactly this type of thing. They provide all the graphing and the controls, you only need to piece together the frontend using React or whatever. They also provide many examples. X6 is for building editors while G6 is for visualizers.

[AxDSan]

Looking forward for this!

[AdsonCicilioti]

Looking forward for this! (2)

[albingroen]

Leaving this here. It's a open source attempt to create a visual schema builder for Prisma.

https://www.prismabuilder.io

[JosepAlacid]

I am currently using DBeave https://dbeaver.io to modify my PostgreSQL DB and import it to Prisma using prisma db pull instrospection. So, all the way backwards. I'll love to edit my prisma diagram in its own ERD editor, migrate to the database and keep it all in one tool.

[noty-nick]

Hey @schickling @naveen-bharathi

Looks like this is currently most commented open issue in repo. Can you give some status update on this?

[cnrad]

Yeah, this feature would be super sick and serve as a great way to visualize databases/relations to small-minded front-end focused people like myself, or even quickly sketch up schemas and make edits, changes, etc as a backend is built

Basically just a bump for this issue, the internal mockups looked very promising.

[irwinbraganza]

+1 would be great to have too!

[shian15810]

Found this Prisma schema visualizer out in the wild: https://prismaliser.app/

[Jarrodsz]

Any updates on this also really diile the way of building schemas and seed files its not dx friendly.

[mohammed-bahumaish]

Here it is, Prisma Editor - A powerful tool to visualize and edit Prisma Schema. This dissection inspired me to build this tool, I hope you like it.

https://prisma-editor.up.railway.app/ https://github.com/mohammed-bahumaish/prisma-editor

@tvvignesh @schickling @nickgoodenough @naveen-bharathi @davemaier @supermacro @ZhaoKunLong @Dammmien @excitedbox @AxDSan @AdsonCicilioti @albingroen @JosepAlacid @noty-nick @cnrad @irwinbraganza @shian15810 @Jarrodsz

[AdsonCicilioti]

https://prisma-editor.up.railway.app/ https://github.com/mohammed-bahumaish/prisma-editor

This is simply amazing!

[cnrad]

Here it is, Prisma Editor - A powerful tool to visualize and edit Prisma Schema. This dissection inspired me to build this tool, I hope you like it.

prisma-editor.up.railway.app mohammed-bahumaish/prisma-editor

Dude, amazing work. Love this

[loicknuchel]

Hi everyone, I'm the creator of Azimutt, it's an ERD (like many other you discussed here) but it's targeted at databases with a lot of tables/columns.

I recently got a request to import Prisma Schema and made it available directly in Azimutt, see: https://azimutt.app/new?prisma

I would be happy to get your feedback on it:

• Does the Prisma parsing work well? (did my best for the parsing but maybe missed a few edge cases...)
• What do you think about the integration? Any suggestion/improvement?

@schickling I love what you made with Prisma :clap: Don't hesitate if you see better integrations between Azimutt and Prisma.

[matbgn]

Great job done by @loicknuchel! I encourage all of you to take a look at it :wink:

[ad6025b]

Here it is, Prisma Editor - A powerful tool to visualize and edit Prisma Schema. This dissection inspired me to build this tool, I hope you like it. prisma-editor.up.railway.app mohammed-bahumaish/prisma-editor

Dude, amazing work. Love this

can this be converted to a visual code extension? this would be great if if i can manage my prisma files in vscode?

[Aarbel]

@alexdoan102 great idea

[BOCOVO]

Hello everyone !

I just release this VS Code extension that let you visualize your Prisma code as an Entity Relationship Diagram (ERD) directly in VS Code Editor. It is similar to what @schickling proposed.

Demo

https://github.com/user-attachments/assets/ca06e8a6-8e00-4399-a9a0-522b682b9125

Check here for installation: https://marketplace.visualstudio.com/items?itemName=bocovo.prisma-erd-visualizer