[ Mermaid ] Markdown ERD 그리는 법

 

 

 

 

 

 

🧜 Mermaid로 ERD 그리기 

 

Mermaid.js는 간단한 코드로 다이어그램을 그릴 수 있는 도구이다. 

ERD(Entity Relationship Diagram)을 포함한 다양한 다이어그램을 지원하며, Markdown 파일 내에서 작성한 코드를 시각적으로 표현할 수 있어 개발 문서화에 매우 유용하다. 

 

 

 

 

기본 ERD 문법

Mermaid의 ERD 작성법은 erDiagram 키워드를 사용한다. 테이블(엔터티)과 관계를 정의하며, 테이블의 필드와 속성을 간단히 표현할 수 있다 

 

기본 예제

 

```mermaid
erDiagram 
    user {
        bigint id PK "사용자 ID"
        varchar name "이름"
        varchar email "이메일"
        timestamp reg_date "등록일"
    }

    post {
        bigint id PK "게시글 ID"
        varchar title "제목"
        text content "내용"
        bigint user_id FK "사용자 ID"
        timestamp created_at "생성일"
    }

    user ||--o{ post : "작성"
```

 

테이블 정의 

- 테이블명 { 데이터타입 필드명 제약조건 "설명" } 형식으로 작성한다 

- PK와 FK를 명시하여 테이블 간 관계를 쉽게 이해할 수 있다. 

 

관계 정의 

- 관계 표현은 테이블명 ||--o{ 테이블명 형식으로 작성한다 

 

1:1 관계	||--||
1:N 관계	||-o{
N:1 관계	o{--||
N:M 관계	o{--o{

 

관계 라벨

- 관계의 의미를 나타내기 위해 관계 정의 뒤에 : "라벨" 을 추가할 수 있다

 

주석

%% 사용하여 주석 처리 할 수 있다

 

 

 

Mermaid 스타일링 활용

Mermaid에서는 테이블이나 다이어그램 스타일을 커스터마이징할 수 있다. 

예를 들어, 테이블의 색상이나 테두리를 설정할 수 있다.

 

```mermaid
erDiagram
    style user fill:#f9f, stroke:#333, stroke-width:2px;
    style post fill:#ff9, stroke:#333, stroke-width:2px;
```

 

 

 

VSCode Extensions 추천

Markdown Preview Mermaid Suppot

VSCode의 Markdown 미리보기에서 Mermaid 다이어그램을 랜더링하고 표시할 수 있도록 지원한다

 

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

Markdown Preview Mermaid Support - Visual Studio Marketplace

 

 

Mermaid Markdown Syntax Highlighting

Mermaid 코드 블록에 대해 문법 강조를 제공한다 

Mermaid 코드 블록을 식별하고 키워드, 문자열, 변수 등을 색상으로 구분

 

https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting

Mermaid Markdown Syntax Highlighting - Visual Studio Marketplace

 

 

 

 

 

추가 문법에 대해

공식 사이트에 다이어그램 별로 설명이 자세히 나와있다

 

https://mermaid.js.org/syntax/entityRelationshipDiagram.html

Entity Relationship Diagrams | Mermaid