클래스 다이어그램 그리기

Order : +int id, Order : +total() float처럼 속성과 메서드가 있는 클래스를 쓰고, <|-- 상속, *-- 합성, o-- 집합, --> 연관, ..|> 실체화 같은 관계를 "1" --> "*"처럼 다중성과 함께 나타냅니다. 머메이드가 UML 클래스 다이어그램으로 배치하며 내보낼 수도 있습니다.

사용법

1. 다이어그램 종류를 고르면 예제가 열립니다. 직접 Mermaid 코드를 써도 됩니다. 입력을 멈추면 잠시 뒤 미리보기가 바뀝니다.
2. 오류가 나면 줄 번호와 파서 메시지가 나옵니다. 오류를 누르면 그 줄이 선택됩니다. 마지막으로 성공한 다이어그램은 흐리게 남아 있습니다.
3. 버튼이나 Ctrl + 마우스 휠로 확대·축소합니다. 색은 라이트·다크 모드를 따릅니다.
4. SVG를 복사하거나 내려받고, PNG는 2배 크기로 내려받습니다. 배경 없이 내보내려면 투명 배경을 켜세요.
5. 공유 링크를 복사하면 코드가 압축되어 링크의 # 뒤에 들어갑니다.

• 다이어그램은 브라우저 안에서 Mermaid가 그리며 입력한 텍스트는 업로드되지 않습니다. 마지막 다이어그램은 편집기에 저장됩니다.
• .mmd 파일이나 마크다운 파일을 열 수 있습니다. 마크다운은 첫 번째 ```mermaid 블록을 씁니다.
• Mermaid는 엄격한 보안 모드로 실행되므로 클릭 핸들러와 레이블 안의 HTML은 쓸 수 없습니다.
• 노드 이름과 레이블에 한글을 그대로 써도 됩니다. 공백이나 기호가 있으면 A["한글 레이블"]처럼 따옴표로 감싸세요.

다이어그램을 코드로 쓰는 이유

머메이드는 상자를 손으로 끌어 놓는 대신 읽기 쉬운 몇 줄의 텍스트로 다이어그램을 표현합니다. flowchart LR 다음에 A[시작] --> B{확인?}, B -->|예| C[배포]라고 쓰면 분기가 그려집니다. 텍스트라서 Git에서 코드 옆에 두고 풀 리퀘스트로 리뷰하며 한 줄만 고쳐 업데이트할 수 있고, 배치는 자동으로 계산됩니다.

GitHub, GitLab, 노션, 옵시디언 등 많은 문서 도구가 ```mermaid 코드 블록을 바로 그림으로 보여 주므로 여기서 쓴 다이어그램을 README에 그대로 붙일 수 있습니다. 이 편집기에서 결과를 바로 보며 문법을 맞추고, 이미지만 받는 곳에는 SVG나 PNG로 내보내세요.

다이어그램 종류 고르기

순서도는 처리 흐름과 분기를, 시퀀스 다이어그램은 서비스나 사람 사이에 시간 순으로 오가는 메시지를, 클래스 다이어그램은 타입과 관계를, 상태 다이어그램은 상태가 바뀌는 과정을, ER 다이어그램은 까마귀 발 표기법으로 데이터베이스 테이블과 관계를 나타냅니다. 간트 차트는 날짜와 선후 관계가 있는 일정을, 원그래프는 전체에서 차지하는 비율을, 마인드맵은 하나의 주제에서 뻗어 나가는 생각을, 타임라인은 기간별 사건을 보여 줍니다.

잘 쓰는 요령

노드 ID는 짧게 하고 보여 줄 글은 괄호 안에 쓰세요(A[고객이 주문함]). 특수 문자가 들어간 라벨은 따옴표로 감싸세요. 순서도는 subgraph로, 시퀀스 다이어그램은 alt나 loop 블록으로 묶을 수 있습니다. 그림이 복잡해지면 방향을 TD에서 LR로 바꾸거나 다이어그램을 둘로 나누세요.

자주 묻는 질문