분석가를 위한 ERD 그리기 (Draw io VS Mermaid)

ERD를 분석가가 왜 그려..?

DBeaver로 ERD를 자동으로 추출하는 결과가 이미 있긴 하다.

물론 테이블 수가 적고 관계도 적은 경우에는 따로 그릴 필요가 없다. (+ 머릿속에 ERD가 탑재된 분석가도 필요 없음)

하지만 서비스가 많아질수록, 회사의 규모가 커질수록 테이블의 수는 증가하고 관계도 복잡해진다.

더불어 분석 요청이 들어올 때, 어떤 테이블이 필요해서 join 하려고 하면 찾느라 고생했던 경험이 있었다. 

분석가를 위해서 그리고 혹시 서버 테이블 구조를 쉽게 보고 싶어 하는 누군가를 위해서 좋은 방법이 없을까??

복잡한 ERD 예시 (출처: https://dataedo.com/blog/do-you-really-need-a-huge-er-diagram-for-the-entire-database)

 

혁신의 발견 Mermaid..!

동료 FE 개발자에게 고민을 얘기했더니 Mermaid로 그려보면 편하다는 추천을 받았다.

코드만 있으면 ERD를 자동으로 그릴 수 있다니..!

심지어 Github README와 notion에 코드만 붙이면 자동으로 ERD가 그려진다.

막상 그리고 보면.. ERD가 복잡한 경우 직관적으로(이쁘게) 보이지는 않았다..

하지만, 작업 전 프로세스의 workflow를 그리기에는 무척 편했고 README에 공유하기도 좋았다. (ex. Airflow DAG)

 

Mermaid code

```mermaid
---
title: ERD example
---
erDiagram
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER{
        uuid id PK "customer id"
        uuid address_id FK "address id"
        string name
        string sector
        int age
        string phone
        timestamp registered_at
    }
    ORDER {
        uuid id PK "order id"
        uuid customer_id FK "customer id"
        uuid store_id FK "store id"
        uuid item_id FK "item id"
        string state 
        date delivery_at
        timestamp ordered_at
        
    }
    CUSTOMER }|..|{ ADDRESS : contains
    ADDRESS {
        uuid id PK "address id"
        string lvl1 "시도 (예시입니다)"
        string lvl2 "시군구"
        string lvl3_1 "법정동"
        string lvl3_2 "도로명"
        string lvl4 "상세 주소"
    }
    STORE ||--o{ ORDER : accept
    STORE {
        uuid id PK "store id"
        uuid address_id FK "address id"
        string name
        string sector
        timestamp registered_at
    }
    STORE }|..|{ ADDRESS : contains
    ORDER ||--|{ ITEM : contains
    ITEM {
        uuid id PK "item id"
        uuid order_id FK "order id"
        int quantity
        string unit
        string standard
    }
 ```

 

Mermaid Live Editor 모습

Mermaid Live Editor : https://mermaid.live/

 

Github README에 ERD 추가한 모습

https://github.com/SmilingSammy/mermaid_test/blob/main/README.md

 

어차피 ERD는 Draw IO??? 

목적이 쉬운 ERD였기 때문에, 서비스별 색 구분과 쉬운 UI에 초점을 맞췄다.

Entity를 접었다가 펼 수 있는 것도 편리하다. 궁금한 Entity의 정보만 확인할 수 있고 불필요한 Entity는 모두 접어서 깔끔하게 볼 수 있다.

일일이 Entity를 전부 그리고 타이핑해야 된다는 단점이 있지만 원하는 대로 배치를 할 수 있는 장점이 있다.

또한 Entity의 특성별 색을 다르게 적용할 수 있다. (ex. 유저 관련 - 빨강, A 서비스 - 파랑, B 서비스 - 초록 등)

 

Mermaid로 표현했던 ERD를 Draw IO에서 배치 변환

 

Entity를 접었다가 펼 수 있는 기능

 

Draw IO로 그린 ERD 예시

관계 및 테이블은 임의로 지정함

* 결과물은 HTML로 공유하는 것을 권장한다. (편집 권한을 부여하지 않으면, Entity를 접었다가 펼 수가 없었음 ㅠㅠ)

 

Mermaid VS Draw IO

	Mermaid	Draw IO
장점	코드로 ERD를 자동으로 그릴 수 있음 (Github, Notion) DDL을 파싱해서 코드로 변수명/type 등을 쉽게 표현 가능 프로세스 workflow 그리기에도 유용함	Entity를 접었다가 펼 수 있음 Entity별 다른 색 적용 가능 (서비스별 구분해서 보기 편함) Entity 위치를 내 마음대로 쉽게 조정 가능
단점	안 이쁨.. Entity별 원하는 위치 설정과 색 적용이 안됨 ㅠㅠ	직접 타이핑해야되는 귀찮음이 있음 (변수명/type 등) HTML이나 파일로 공유 (권한에 따른 제한사항이 있음)

 

Reference

• Mermaid: https://mermaid.js.org/
• Draw IO: https://app.diagrams.net/