Mermaid를 사용해서 ERD 작성하기

 

최근에 ERD를 작성할 일이 생겼는데, ERD 툴을 새로 사용하자니 매우 귀찮은 생각이 들었다. Markdown처럼 ERD도 코드 형식으로 사용할 수 있게 하면 좋겠다는 생각이 들어서 여기저기 찾아보다가, mermaid라는 좋은 오픈소스 프로그램을 발견했다. 문법도 비교적 쉬운 편에 속해서 빨리 익힐 수 있었다. 공식 홈페이지는 다음 주소에 있다.

https://mermaid.js.org/

 

빠른 사용법

---

공식 홈페이지를 보면 텍스트와 코드를 사용해서 시각화를 빠르게 할 수 있는 툴 이라고 광고한다. 기본적인 문법은 Markdown을 많이 참고했고, 기본 목표는 ERD가 아닌 다이어그램을 표시하는 것이 원래 목적이다. 여기서 응용하여 마인드맵, 타임라인, ERD, 파이 차트 등의 다양한 작업에 활용할 수 있어 보인다.

 

그래서 얘를 ERD로 어떻게 활용하냐? 빠르게 알아보자.

erDiagram
    CUSTOMER {
        string name
        string custNumber
        string sector
    }
    ORDER {
        int orderNumber
        string deliveryAddress
    }
    LINE-ITEM {
        string productCode
        int quantity
        float pricePerUnit
    }
    
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains

위의 예시는 공식 문서에 있는 예제의 순서를 살짝만 바꾸어 두었다. 문법은 어렵지 않다.

해당 코드에는 3개의 테이블이 있다. customer, ordwer, line-item이 있으며, customer의 칼럼으로는 name, custNumber, sector가 있다. 각 테이블의 릴레이션은 customer : order가 1대 n으로 되어 있고 order: line-item이 1대 n으로 되어 있다. 

여기에 추가해서 PK, UK, FK 와 description까지 달 수 있다. 기타 옵션들은 공식 문서를 참고하면 좋을 것 같다.

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

Entity Relationship Diagrams | Mermaid

 

응용하기

---

그래서 얘를 어떻게 실생활에 사용할까? 나의 경우에는 github의 readme와 notion에 잘 사용하고 있다.

github에는 .md 파일로 올려 두었는데, 해당 파일은 github에서 네이티브로 지원하기 때문에 문제없이 사용이 가능하다. 단, 코드 주석으로 취급하기 때문에 mermaid 속성을 지정해야지 확인이 가능하다. vscode에서는 아래의 두 플러그인을 사용하면 린팅과 프리뷰가 가능하다.

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

Markdown Preview Mermaid Support - Visual Studio Marketplace

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

Mermaid Markdown Syntax Highlighting - Visual Studio Marketplace

 

그리고 notion에서도 사용이 가능한데, /code 입력한 후 mermaid를 지정하면 바로 사용이 가능하다.

 

사실 이거는 내가 아무리 잘 적어놔도, 공식 문서에서 너무나도 친절하게 잘 설명을 해 두었기 때문에 그냥 공식 문서를 잘 읽는 것이 좋아 보인다.