Mermaid에 대해 알아보자.

오늘은 Mermaid에 대해서 알아보자.

마땅한 카테고리가 없어 Infra, CS, DevOps 중 documentation과 관련이 조금이라도 있는 DevOps 카테고리에 우선 등록했다. (추후 변경 예정)

Mermaid란?

Mermaid는 마크다운과 같은 텍스트 기반 문서 안에 다이어그램을 그릴 수 있게 해주는 라이브러리다.

마크다운 파일 안에 간단한 문법들을 사용하여 플로우차트, ERD 다이어그램, 시퀀스 다이어그램 등을 편리하게 그릴 수 있다.

Flowchart 그리기

Flowchart에서 사용하는 도형과 문법

도형	Mermaid 문법	의미 & 용도
사각형 (직사각형)	[text]	작업, 프로세스 하나의 작업 단계. 보통 처리, 실행할 작업을 표현
둥근 모서리 사각형	(text)	시작/끝 또는 입력/출력을 나타낼 때 사용
다이아몬드 (결정)	{text}	조건문, 판단 분기점. 예/아니오 같은 갈림길 표현
오른쪽 삼각형 (흐름 분기)	>text]	특정 흐름 방향, 별도 표시용 (잘 안 씀)
원 (동그라미)	((text))	특수 이벤트, 보통 시작/끝 강조용

Mermaid 문법 형식

flowchart 방향
Node1 --> Node2
Node1 -- Text --> Node2

방향

• TD = Top Down (위 → 아래)
• LR = Left to Right (왼쪽 → 오른쪽)
• RL = Right to Left
• BT = Bottom to Top

작성 예시

flowchart LR
Node1((시작)) --> Node2{조건}
Node2 -- 참일 때 실행 --> Node3[작업]
Node2 -- 거짓일 때 실행 --> Node4[작업]
Node3 --> Node5((종료))
Node4 --> Node5

결과

ERD 다이어그램

Mermaid 문법 형식

erDiagram
테이블명1{
  타입 컬럼명 설명
  타입 컬럼명 설명
}
테이블명2{
  타입 컬럼명 설명
  타입 컬럼명 설명
}
테이블명1 ||--o{ 테이블명2 : description

관계 표현

• 테이블명1 ||--|| 테이블명2: description: 1:1 관계
• 테이블명1 ||--o{ 테이블명2: description: 1:N(자식 테이블 데이터가 없어도 됨, optional) 관계
• 테이블명1 ||--}| 테이블명2: description: 1:N(자식 테이블 데이터가 반드시 있어야 함, mandatory) 관계

작성 예시

erDiagram
   USER {
        int id PK
        varchar name
    }

    PROFILE {
        int id PK
        int user_id FK
        varchar bio
    }

    ORDER {
        int id PK
        int user_id FK
        datetime order_date
    }

    PRODUCT {
        int id PK
        varchar name
    }

    ORDER_ITEM {
        int id PK
        int order_id FK
        int product_id FK
        int quantity
    }

    USER ||--|| PROFILE: has
    USER ||--o{ ORDER: has
    ORDER ||--o{ ORDER_ITEM: has
    PRODUCT ||--o{ ORDER_ITEM: has

결과