Trying out prisma-markdown

Overview

I found a tool called prisma-markdown that generates Mermaid ERD diagrams from Prisma schemas, so I'd like to try it out.

https://github.com/samchon/prisma-markdown

Installation

• npm

npm i -D prisma-markdown

• yarn

yarn add -D prisma-markdown

Generating an ERD right away

I will try generating one assuming the following schema.

model User {
  id        Int       @id @default(autoincrement())
  createdAt DateTime  @default(now())
  email     String    @unique
  name      String?
  comments  Comment[]
  posts     Post[]
}

model Post {
  id        Int       @id @default(autoincrement())
  createdAt DateTime  @default(now())
  title     String
  content   String?
  published Boolean   @default(false)
  authorId  Int
  author    User      @relation(fields: [authorId], references: [id])
  comments  Comment[]
  tags      Tag[]     @relation("TagToPost")
}

model Comment {
  id          Int      @id @default(autoincrement())
  createdAt   DateTime @default(now())
  comment     String
  writtenById Int
  postId      Int
  writtenBy   User     @relation(fields: [writtenById], references: [id])
  post        Post     @relation(fields: [postId], references: [id], onUpdate: NoAction)
}

model Tag {
  id    Int    @id @default(autoincrement())
  tag   String @unique
  posts Post[] @relation("TagToPost")
}

Next, add the following to schema.prisma 👇.

generator markdown {
  provider = "prisma-markdown"
  output   = "./ERD.md"
  title    = "TITLE"
}

Next, generate ERD.md with the following command.

npx prisma generate

After running it, prisma/ERD.md was created with the following content 🎉

Full markdown

# TITLE
> Generated by [`prisma-markdown`](https://github.com/samchon/prisma-markdown)

- [default](#default)

## default

erDiagram
"User" {
  Int id PK
  DateTime createdAt
  String email UK
  String name "nullable"
}
"Post" {
  Int id PK
  DateTime createdAt
  String title
  String content "nullable"
  Boolean published
  Int authorId FK
}
"Comment" {
  Int id PK
  DateTime createdAt
  String comment
  Int writtenById FK
  Int postId FK
}
"Tag" {
  Int id PK
  String tag UK
}
"_PostToTag" {
  String A FK
  String B FK
}
"Post" }o--|| "User" : author
"Comment" }o--|| "User" : writtenBy
"Comment" }o--|| "Post" : post
"_PostToTag" }o--|| "Post" : Post
"_PostToTag" }o--|| "Tag" : Tag


### `User`

**Properties**
  - `id`: 
  - `createdAt`: 
  - `email`: 
  - `name`: 

### `Post`

**Properties**
  - `id`: 
  - `createdAt`: 
  - `title`: 
  - `content`: 
  - `published`: 
  - `authorId`: 

### `Comment`

**Properties**
  - `id`: 
  - `createdAt`: 
  - `comment`: 
  - `writtenById`: 
  - `postId`: 

### `Tag`

**Properties**
  - `id`: 
  - `tag`: 

### `_PostToTag`
Pair relationship table between [Post](#Post) and [Tag](#Tag)

**Properties**
  - `A`: 
  - `B`: 

• To display ERD.md in VSCode, you will need an extension such as the one below.

https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid

Comments

namespace

By adding the comment /// @namespace <name>, you can split the diagrams into different namespaces.

As a test, let's add /// @namespace <name> to the previous schema.prisma.

/// @namespace User
model User {
  ...
}

/// @namespace Post
model Post {
  ...
}

/// @namespace Post
model Comment {
  ...
}

/// @namespace Post
model Tag {
  ...
}

The resulting Markdown will look like this 👇.

It is now split into User and Post.

Full markdown

# TITLE
> Generated by [`prisma-markdown`](https://github.com/samchon/prisma-markdown)

- [User](#user)
- [Post](#post)

## User

erDiagram
"User" {
  Int id PK
  DateTime createdAt
  String email UK
  String name "nullable"
}


### `User`

**Properties**
  - `id`: 
  - `createdAt`: 
  - `email`: 
  - `name`: 

## Post

erDiagram
"Post" {
  Int id PK
  DateTime createdAt
  String title
  String content "nullable"
  Boolean published
  Int authorId FK
}
"Comment" {
  Int id PK
  DateTime createdAt
  String comment
  Int writtenById FK
  Int postId FK
}
"Tag" {
  Int id PK
  String tag UK
}
"_PostToTag" {
  String A FK
  String B FK
}
"Comment" }o--|| "Post" : post
"_PostToTag" }o--|| "Post" : Post
"_PostToTag" }o--|| "Tag" : Tag


### `Post`

**Properties**
  - `id`: 
  - `createdAt`: 
  - `title`: 
  - `content`: 
  - `published`: 
  - `authorId`: 

### `Comment`

**Properties**
  - `id`: 
  - `createdAt`: 
  - `comment`: 
  - `writtenById`: 
  - `postId`: 

### `Tag`

**Properties**
  - `id`: 
  - `tag`: 

### `_PostToTag`
Pair relationship table between [Post](#Post) and [Tag](#Tag)

**Properties**
  - `A`: 
  - `B`: 

erd / describe

If you write /// @erd <name>, only the ER diagram will be displayed, and if you write /// @describe <name>, it will only be displayed in the details section.

Let's try this with the previous schema.prisma as well.

/// @namespace User
model User {
  ...
}

/// @namespace Post
model Post {
  ...
}

/// @erd Post
model Comment {
  ...
}

/// @describe Post
model Tag {
  ...
}

By adding the comments above, model Comment will only be displayed in the ER diagram, and model Tag will only be displayed in the details. The following is the generated ERD.

Full markdown

# TITLE
> Generated by [`prisma-markdown`](https://github.com/samchon/prisma-markdown)

- [User](#user)
- [Post](#post)

## User

erDiagram
"User" {
  Int id PK
  DateTime createdAt
  String email UK
  String name "nullable"
}

### `User`

**Properties**
  - `id`: 
  - `createdAt`: 
  - `email`: 
  - `name`: 

## Post

erDiagram
"Post" {
  Int id PK
  DateTime createdAt
  String title
  String content "nullable"
  Boolean published
  Int authorId FK
}
"_PostToTag" {
  String A FK
  String B FK
}
"Comment" {
  Int id PK
  DateTime createdAt
  String comment
  Int writtenById FK
  Int postId FK
}
"_PostToTag" }o--|| "Post" : Post
"Comment" }o--|| "Post" : post

### `Post`

**Properties**
  - `id`: 
  - `createdAt`: 
  - `title`: 
  - `content`: 
  - `published`: 
  - `authorId`: 

### `_PostToTag`
Pair relationship table between [Post](#Post) and [Tag](#Tag)

**Properties**
  - `A`: 
  - `B`: 

### `Tag`

**Properties**
  - `id`: 
  - `tag`: