Mermaid 시작하기

Mermaid는 텍스트 기반의 마크다운(Markdown)과 유사한 문법을 사용하여 순서도, 차트, 다이어그램을 자동으로 생성해 주는 도구입니다. 복잡한 그래픽 툴 없이 코드만으로 그림을 그릴 수 있다는 것이 가장 큰 장점입니다.

순서도 (Flowcharts)

가장 기본이 되는 문법으로, 방향을 설정하고 노드(도형)와 화살표를 연결합니다.

• 방향 설정: graph TD (위에서 아래로), graph LR (왼쪽에서 오른쪽으로)

• 도형 모양:

  • [ ]: 직사각형 (프로세스)

  • (( )): 원형 (이벤트)

  • { }: 마름모 (결정/조건)

graph LR
    A[시작] --> B{조건 확인}
    B -- 예 --> C[승인]
    B -- 아니오 --> D[거절]

&nbsp; 를 이용해 박스의 폭을 늘릴 수 있습니다.

graph TD
    %% 박스 01
    subgraph "박스 01"
        A["<b>제목 01</b><br/>내용 01"]
    end

    %% 박스 02
    subgraph "박스 02"
        B["<b>제목 02</b><br/>내용 02"]
        C["<b>제목 03</b><br/>내용 03"]
        A --> B
        B --> C
    end

    %% 스타일링
    style A fill:#FFECB3,stroke:#FFA000,stroke-width:2px
    style B fill:#E3F2FD,stroke:#2196F3,stroke-width:2px
    style C fill:#E3F2FD,stroke:#2196F3,stroke-width:2px

시퀀스 다이어그램 (Sequence Diagrams)

객체 간의 상호작용과 메시지 흐름을 시간 순서대로 보여줄 때 사용합니다.

• participant: 등장인물 정의

• ->> : 실선 화살표 (요청)

• –>> : 점선 화살표 (응답)

sequenceDiagram
    사용자->>브라우저: URL 입력
    브라우저->>서버: 페이지 요청
    서버-->>브라우저: HTML 응답
    브라우저-->>사용자: 화면 표시

간트 차트 (Gantt Charts)

프로젝트 일정과 작업 진행 상황을 시각화합니다.

gantt
    title 프로젝트 일정표
    dateFormat  YYYY-MM-DD
    section 기획
    요구사항 분석   :a1, 2023-10-01, 10d
    section 개발
    DB 설계        :after a1, 7d
    API 개발       :2023-10-15, 14d

상태 다이어그램 (State Diagrams)

시스템이나 객체의 상태 변화를 나타낼 때 유용합니다.

stateDiagram-v2
    [*] --> 대기중
    대기중 --> 실행중: 시작 버튼
    실행중 --> 중지됨: 오류 발생
    실행중 --> [*]: 완료

기타

• 주석: %%를 사용하면 코드 내에 메모를 남길 수 있습니다.

• 스타일 수정: style 노드이름 fill:#색상코드를 사용하여 특정 도형의 색상을 바꿀 수 있습니다. (사용자님이 처음에 주신 코드 하단에 있던 방식입니다.)

• 서브그래프: subgraph를 사용하면 연관된 노드들을 박스로 묶어 그룹화할 수 있습니다.