ovyerus/prismaliser

Visualise your Prisma schema!

---

Prismaliser is a visualisation webapp for Prisma schemas. It allows you to visually explore your schema and the relations between your models, by showing links between the different types of relations in the schema (many-to-many, one-to-many, one-to-one), similar to an Entity-relationship model.

Prismaliser is a fully open-source Next.js application and is easily self-hostable if you wish to, but a hosted version is also available at prismaliser.app if you just want to use it instead.

Installation

Prismaliser is a Next.js application, and as such it requires Node.js to be installed in order to run. Yarn is also recommended as it has a (subjectively) nicer CLI interface.

With Node installed, and the repository cloned, you can simply run the following commands to get it running:

yarn install  # or `npm install`
yarn build  # or `npm run build`
yarn start  # or `npm start`

The latter command can be run in anything like PM2, systemd or any other process daemon of your choice.

Or if you're looking to run it for development purposes, you can use the following commands instead:

yarn install  # or `npm install`
yarn dev  # or `npm run dev`

Docker

A Docker image is also available if that's more your thing.

$ docker run -p 3000:3000 ghcr.io/ovyerus/prismaliser

or if you wanna live on the edge and run the dev branch

$ docker run -p 3000:3000 ghcr.io/ovyerus/prismaliser:dev

Roadmap

This is a list of what I've currently got planned for the future. I'm open to accepting PRs for any of these, but I'd prefer it if you could first open an issue regarding it so we can discuss it/make sure there's not multiple people working on the same thing.

I'm also open to PRs for other features not listed here, but also please open a corresponding issue to discuss it, just like above.

• Multi-history support (user defined saves).
• Sharing a schema with other users via a generated link (similar to TypeScript's playground).
• Saving node positions across page resets.
• Autocomplete for the editor (very big, Monaco is a bit fiddly at times, would probably need to do some looking at the VSCode plugin for Prisma to figure out some stuff).

License

Prismaliser is licensed under the MIT License - see the LICENSE file for details.

prismaliser's Issues

Feature Discussion

Just came across this and am excited after looking around for a long time for a self hostable Prisma schema visualiser. Below are some of the minimal use cases that I've been looking for from a package like this and it would be good to get your input on what they would look like and whether you've already considered them.

• Ability to install using a package manager and run via cli. e.g.
  yarn add prismaliser --dev

• Ability to pass the schema file via argument to docker run or cli
  docker run -p 3000:3000 ghcr.io/ovyerus/prismaliser --schema=<path-to-schema-file.prisma>
  or
  yarn prismaliser run --schema=<path-to-schema-file.prisma>

• VScode extension that can automatically be opened to the side when a schema.prisma file is opened. Similar to bicep visualiser.

Show MongoDB embedded documents as nodes

When using MongoDB as a datasource, users are able to specify embedded documents with the type keyword. We don't currently handle this but I reckon it would be nice to. Reference

Example schema

datasource db {
  provider = "mongodb"
  url      = env("DATABASE_URL")
}

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

model MyModel {
  id    String   @id @default(auto()) @map("_id") @db.ObjectId
  types MyType[]
}

type MyType {
  value  String
  public Boolean
}

One to Many Relationship Backwards

In the visualizer, the crows feet point to the "one" instead of pointing to the "many".

model Person {
  id      Int       @id @default(autoincrement())
  friends Friends[]
}

model Friends {
  id       Int     @id @default(autoincrement())
  Person   Person? @relation(fields: [personId], references: [id])
  personId Int?
}

Shouldn't it be the other way around?

prismalizer.app gives a server error

` title String @db.VarChar(255)` leads to `Attribute not know: "@db.VarChar"`

Currently for default schema on https://prismaliser.ovy.cloud/

Removing the native type definition fixes the problem of course.

Maybe db is not defined as the datasource name that is sent in as validation? Could be that you have to add that (or just include it in the default schema for the validation to be able to pick it up from there).

Update: Yep, adding this to the default schema makes it work:

datasource db {
  provider = "mysql"
  url = "mysql://foo"
}

Feature idea: VSCode extension

It would be really nice if there was an extension to VSCode that could open a prisma schema preview using prismaliser, like the built-in markdown previewer of vscode or other extensions like draw.io

I don't know if this would be in the scope of the project, but it seems like a cool idea.

Couldn't create edge source (1:1)

This is a weird one. If I define the relation on my "UserProfile"-Model the console gets spammed by warnings:
couldn't create edge for source handle id: User-UserToUserProfile-UserProfile; edge id: eUserToUserProfile

If you however switch it around and define the relation on the side of the user model it works. Any Idea whats wrong there?

NOT WORKING:

model User {
  id       String @id @unique @default(uuid()) @db.Char(36)
  username String @unique @db.VarChar(255)

  UserProfile UserProfile?
}

model UserProfile {
  id    String  @id @unique @db.Char(36)
  about String? @db.LongText

  User User @relation(fields: [id], references: [id])
}

WORKING:

model User {
  id       String @id @unique @default(uuid()) @db.Char(36)
  username String @unique @db.VarChar(255)

  UserProfile UserProfile @relation(fields: [id], references: [id])
}

model UserProfile {
  id    String  @id @unique @db.Char(36)
  about String? @db.LongText
  
  User  User?
}

Feature request: automatically generate schema visualisation after running `prisma db push`

I think this tool is great, however, it's a bit annoying to copy-paste Prisma schema into the prismaliser.app website. It could be an interesting feature to have a .png image automatically generated each time you run prisma db push command. It would be placed in the same folder along with the schema file and would always be up to date.

connecting lines not displaying for One to One relationship

reproduce: Insert example code on the Prismalizer app

model User {
  id      Int      @id @default(autoincrement())
  profile Profile?
}

model Profile {
  id     Int  @id @default(autoincrement())
  user   User @relation(fields: [userId], references: [id])
  userId Int  @unique // relation scalar field (used in the `@relation` attribute above)
}

expect: connecting lines for one-to-one relationship between models.
output: Models without connecting lines for one to one model

HTTP ERROR 431

Hello there,

After I hit copy link and I paste the link in the browser it gives me 431.

Any idea why might that happen ?

Here is the link

Thank you.

Don't format things on top of each other

Not looking for any smart formatting based on relationships, but defaulting to everything just being centred and on top of each other makes me sad 🥲

Love the app though, great work ❤️

Support for CockroachDB datasource provider

CockroachDB is a supported Prisma database provider: https://www.prisma.io/docs/concepts/database-connectors/cockroachdb

However, loading a CockroachDB Prisma schema into Prismaliser gives an error saying it's not known:

Similarly, Cockroach functions such as sequence() don't appear to be supported either:

It'd be great to eventually add support for Cockroach schemas to Prismaliser. Love the project

Shareable link

Hey @Ovyerus 👋🏽

A nice-to-have feature would be creating a project with the schema and inviting others or being able to share the link to your schema with someone else

Can you make this as vs code extension?

Can you make this as vs code extension?

Feature: Implement html2canvas to save the diagram to a image

Add a button to save the diagram into a image

Feature to export the preview as image

It would be really nice if we could export the preview as an image. This could have usecases where we want to store it as documentation or include it in a website

in next.js 13.4.13, an error saying Error: Invariant: Expected relative import to start with "next/", found "[email protected]@next/dist/server/future/route-kind

i install the app but running with an error saying
'Error: Invariant: Expected relative import to start with "next/", found "_next@13.4.13@next/dist/server/future/route-kind"'

It looks like the version compatibility with next.js 13.4.13. When the next.js version rolls back to 13.4.8, it works well.

But just wondering, how would I modify the code in order to make it adapt to the latest next.js version

CodeMirror: Monaco alternative

Hey Michael, if you're looking to swap out Monaco for something else, you can take a look at CodeMirror and https://github.com/prisma/text-editors (uses codemirror under the hood). I wasn't involved in the building process but I'd be happy to take a stab at this issue too.

Fix error parser when multiple errors

Looks like the current system breaks weirdly when a schema results in more than one error. Need to find a fix for that.

Application throws an error when using embedded documents with MongoDB

I'm using Prisma together with MongoDB and utilize embedded documents.

When I paste in the following example that makes use of this:

datasource db {
  provider = "mongodb"
  url      = env("DATABASE_URL")
}

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

model MyModel {
  id    String   @id @default(auto()) @map("_id") @db.ObjectId
  types MyType[]
}

type MyType {
  value  String
  public Boolean
}

I recieve the following error:

Application error: a client-side exception has occurred (see the browser console for more information).

With the following console output:

TypeError: Cannot read properties of undefined (reading 'isList')

I can imagine this happens because Prismaliser was last released before Prisma started supporting embedded documents.

Feature Request: Include Table Positions in the "Copy Link" URL

It would be nice if the table positions are also included in the Copy Link URL, that way we won't have to constantly rearrange the tables whenever we open the link.

Dependency Dashboard

This issue provides visibility into Renovate updates and their statuses. Learn more

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update actions/setup-node action to v2
• chore(deps): update dependency strip-ansi to v7

---

• Check this box to trigger a request for Renovate to run again on this repository

Rewrite schema to nodes parser

The current implementation is wonky and doesn't actually explain some of the decisions I made years, needs to be rewritten to be better and actually documented. Also because I've found the cause for #45 but it seems hard to fix in the current state sadly.

Dependabot/ Renovate setup

I can take care of this – setting up renovate or dependabot to handle updating the Prisma versions if you'd like 🙂

Do you have any preference?

db table view

should format db tables without overlapping

Client side formatting

Prisma v4.3.0 mentions that the prisma format command now uses a WASM module (@prisma/prisma-fmt-wasm).

Currently formatting is done via an API endpoint which uses the @prisma/internals package. It might be worth looking into seeing how hard it is to commandeer this WASM module to provide schema formatting on the client side, without needing to call out to the API.

`{errors: "Could not find query-engine binary. Searched in /v…e_modules/@prisma/query-engine-rhel-openssl-1.0.x", type: 1}`

Current deployment:

(Let me know if we from Prisma can help in any way)

Possible to feed my local schema file?

Hi!

I didn't get if it's possible to feed my local schema file when launching visualizer or even better when udpates in preview and locally are synced?

Application error: a client-side exception has occurred (see the browser console for more information).

This error happened when I copy/paste a prisma mongo schema
And wo way to delete the wrong schema

Please add Fullscreen mode or sidebar collups expandable