ovyerus / prismaliser

Visualise your Prisma schema!

big nerd

prismaliser's Issues

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 ❤️

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?
}

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.

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.

` 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"
}

prismalizer.app gives a server error

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.

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.

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

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
}

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

Feature: Implement html2canvas to save the diagram to a image

Add a button to save the diagram into a image

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?

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

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.

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.

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.

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.

Please add Fullscreen mode or sidebar collups expandable

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?

Can you make this as vs code extension?

Can you make this as vs code extension?

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?

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

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.

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

`{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)

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.

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