Mermaid는 텍스트 구문을 기반으로 다이어그램을 생성하는 도구입니다. 간단한 Mermaid 코드를 작성하면 순서도, 시퀀스 다이어그램, 클래스 다이어그램, 상태 다이어그램, ER 다이어그램, 간트 차트, 마인드맵, 아키텍처 다이어그램 등 다양한 다이어그램을 생성할 수 있습니다.
기존의 드래그 앤 드롭 방식 그리기 도구와 달리, Mermaid는 주로 코드로 다이어그램의 노드, 관계, 시간 순서와 데이터 구조를 설명합니다. 코드를 수정하면 다이어그램이 자동으로 다시 생성되므로 기술 문서, 제품 설계, 프로젝트 관리, 소프트웨어 개발, 지식 정리 등의 상황에 특히 적합합니다.
이 글에서는 Mermaid 기본 구문을 소개하고, Mermaid 편집기에서 렌더링을 지원하는 다이어그램 유형, 선언 구문, 코드 예시와 사용 사례를 정리합니다. Mermaid 코드를 온라인에서 바로 작성하고 미리 보고 싶다면, 무료로 ProcessOn Mermaid 온라인 편집기를 사용해 보세요.
Mermaid 는 텍스트 구문으로 다이어그램을 생성하는 도구입니다. 아래 코드로 간단한 Mermaid 순서도를 만들 수 있습니다:
flowchart TD
A[Start] --> B[Enter information]
B --> C{ Completed?}
C -->|Yes| D[End]
C -->|No| B
렌더링 결과는 다음과 같습니다:
여기서: flowchart TD 는 위에서 아래로 배치되는 순서도를 선언할 때 사용합니다.
Mermaid의 동작 원리는 다음과 같이 정리할 수 있습니다:
Mermaid 코드 작성 → 코드 분석 → 렌더링 다이어그램 → 코드 수정 → 다이어그램 실시간 업데이트
따라서 Mermaid 학습의 핵심 중 하나는 다이어그램마다 대응하는 선언 구문을 익히는 것입니다.
다이어그램 유형마다 사용하는 Mermaid 선언 구문이 다릅니다, 현재 자주 사용되는 Mermaid 다이어그램은 다음과 같습니다:
| 다이어그램 유형 | Mermaid 선언 구문 | 주요 용도 |
| 순서도 | flowchart | 업무 프로세스, 알고리즘, 워크플로 |
| 시퀀스 다이어그램 | sequenceDiagram | 시스템 상호작용, API 호출 |
| 클래스 다이어그램 | classDiagram | 소프트웨어 구조, 객체 지향 모델링 |
| 상태 다이어그램 | stateDiagram-v2 | 상태 전환, 상태 머신 |
| ER 다이어그램 | erDiagram | 데이터베이스 엔터티 관계 |
| 간트 차트 | gantt | 프로젝트 계획, 작업 진행 상황 |
| 사용자 여정 지도 | journey | 사용자 경험, 고객 여정 |
| 마인드맵 | mindmap | 지식 정리, 브레인스토밍 |
| 타임라인 | timeline | 시간 흐름, 역사적 사건 |
| 파이 차트 | pie | 비율, 구성 분석 |
| 사분면 차트 | quadrantChart | 분류, 우선순위, 포지셔닝 분석 |
| Git 그래프 | gitGraph | Git 브랜치, 커밋, 병합 |
| 생키 다이어그램 | sankey-beta | 데이터, 자원, 트래픽 흐름 |
| XY 차트 | xychart-beta | 데이터 추세, 수치 비교 |
| 레이더 차트 | radar | 다차원 지표 비교 |
| C4 다이어그램 | C4Context 등 | 소프트웨어 아키텍처 모델링 |
| 아키텍처 다이어그램 | architecture-beta | 시스템, 서비스와 리소스 아키텍처 |
| 칸반 다이어그램 | kanban | 작업, 업무 상태 관리 |
| 블록 다이어그램 | block-beta | 모듈, 구조와 시스템 관계 |
| 패킷 다이어그램 | packet-beta | 네트워크 패킷 구조 |
| 요구사항 다이어그램 | requirementDiagram | 요구사항 분석과 요구사항 관계 |
Mermaid 편집기 버전에 따라 다이어그램의 구문과 기능 지원이 달라질 수 있으므로, 실제로 사용할 때는 편집기가 지원하는 구문을 기준으로 하세요.
기본 구문
Mermaid 는 flowchart 선언으로 순서도를 생성합니다. 가장 간단한 작성법은 다음과 같습니다:
flowchart TD
A[Start] --> B[Arrange]
B --> C[End]
렌더링 결과
여기서:
Mermaid 순서도는 LR(왼쪽에서 오른쪽), RL(오른쪽에서 왼쪽), BT(아래에서 위로) 등의 방향 설정을 사용할 수 있습니다. 예를들어:
flowchart LR
A[Start] --> B[Arrange] --> C[End]
이는 순서도가 왼쪽에서 오른쪽으로 배치됨을 나타냅니다.
자주 쓰는 구문
| 구문 | 다이어그램 | 의미 |
| (text) | 둥근 사각형 | 프로세스의 시작, 종료 또는 일반 작업을 나타냅니다 |
| [text] | 사각형 | 구체적인 단계, 작업 또는 처리 과정을 나타냅니다 |
| {text} | 다이아몬드 | 판단, 조건 분기를 나타냅니다 |
| ((text)) | 원형 | 연결 지점 또는 이벤트를 나타냅니다 |
| [[text]] | 이중 사각형 | 하위 프로세스, 하위 모듈 호출을 나타냅니다 |
| [(text)] | 원통 | 데이터베이스 노드를 나타냅니다 |
| >text] | 비대칭 도형 | 입력/출력을 나타냅니다 |
| [/text/] | 평행사변형 | 입력 또는 출력 데이터를 나타냅니다 |
| --> | 화살표 | 프로세스 진행 방향을 나타냅니다 |
| --- | 화살표 없는 연결선 | 연관 관계를 나타냅니다 |
| -.-> | 점선 화살표 | 선택적 프로세스, 참조 관계를 나타냅니다 |
| ==> | 굵은 화살표 | 핵심 프로세스 또는 강한 연관을 나타냅니다 |
Mermaid 순서도 생성 상세 구문은 다음 페이지에서 확인하세요: https://www.processon.io/ko/mermaid/flowchart
순서도는 업무 프로세스, 워크플로, 알고리즘 흐름, 시스템 흐름, 의사 결정 흐름 등의 상황에 적합하며, 무료로 Mermaid 순서도 온라인 편집기.
기본 구문
Mermaid 는 sequenceDiagram 선언으로 시퀀스 다이어그램을 생성합니다. 가장 간단한 예시는 다음과 같습니다:
sequenceDiagram
Alice->>John: Hello John
John-->>Alice: Hello Alice
렌더링 결과
여기서:
자주 쓰는 구문
| 구문 | 다이어그램 | 의미 |
| sequenceDiagram | 시퀀스 다이어그램 | 시퀀스 다이어그램 생성 |
| A->B: message | 실선 | 동기 메시지 호출 또는 일반 상호작용을 나타냅니다 |
| A-->B: message | 점선 | 반환 메시지 또는 약한 연관 상호작용을 나타냅니다 |
| A->>B: message | 실선 화살표 | 비동기 메시지 호출을 나타냅니다 |
| A-->>B: message | 점선 화살표 | 비동기 응답 또는 반환 메시지를 나타냅니다 |
| participant A | 참여자 | 상호작용에서의 객체, 역할 또는 시스템을 정의합니다 |
| actor A | 역할 | 사용자, 외부 시스템 등 능동적인 참여자를 나타냅니다 |
| activate A | 활성화 상자 | 객체가 요청 처리를 시작함을 나타냅니다 |
| deactivate A | 활성화 종료 | 객체가 현재 처리를 완료했음을 나타냅니다 |
| loop text | 루프 상자 | 반복 실행되는 상호작용 과정을 나타냅니다 |
| alt text | 조건 분기 | 서로 다른 조건에서의 상호작용 경로를 나타냅니다 |
| opt text | 선택적 흐름 | 실행될 수 있는 상호작용을 나타냅니다 |
| par text | 병렬 상자 | 여러 작업이 동시에 실행됨을 나타냅니다 |
Mermaid 시퀀스 다이어그램 생성 상세 구문은 다음 페이지에서 확인하세요: https://www.processon.io/ko/mermaid/sequence-diagram
시퀀스 다이어그램은 사용자와 시스템, 시스템과 시스템, 서비스와 서비스 사이에서 시간 순서대로 발생하는 상호작용을 설명하기에 적합합니다, 무료로 Mermaid 시퀀스 다이어그램 온라인 편집기.
기본 구문
Mermaid 는 classDiagram 선언으로 클래스 다이어그램을 생성합니다.
classDiagram
Animal <|-- Duck
Animal <|-- Fish
class Animal {
+String name
+eat()
}
class Duck {
+swim()
}
렌더링 결과
여기서:
| 구문 | 다이어그램 | 의미 |
| classDiagram | 클래스 다이어그램 | 클래스 다이어그램 생성 |
| class ClassName | 클래스 | 클래스 객체를 정의합니다 |
| ClassName : attribute | 속성 | 클래스의 멤버 변수를 나타냅니다 |
| ClassName : method() | 메서드 | 클래스 메서드를 정의합니다 |
| <|-- | 빈 삼각형+실선 | 상속 관계를 나타냅니다 |
| <|.. | 빈 삼각형+점선 | 실현 관계를 나타냅니다 |
| *-- | 채워진 다이아몬드+실선 | 합성 관계를 나타냅니다 |
| o-- | 빈 다이아몬드+실선 | 집합 관계를 나타냅니다 |
| --> | 실선 화살표 | 연관 관계를 나타냅니다 |
| ..> | 점선 화살표 | 의존 관계를 나타냅니다 |
| -- | 실선 | 일반 연결 관계를 나타냅니다 |
| +attribute | 더하기 기호 | 공개 속성 또는 메서드를 나타냅니다 |
| -attribute | 빼기 기호 | 비공개 속성 또는 메서드를 나타냅니다 |
클래스 멤버 앞의 +, -, # 등의 기호는 서로 다른 가시성을 나타낼 수 있습니다.
Mermaid 클래스 다이어그램 생성 상세 구문은 다음 페이지에서 확인하세요: https://www.processon.io/ko/mermaid/class-diagram
클래스 다이어그램은 소프트웨어 설계, 객체 지향 모델링, 프로그램 구조 분석 등의 상황에 적합합니다, 무료로 Mermaid 클래스 다이어그램 온라인 편집기.
기본 구문
Mermaid는 stateDiagram-v2 선언으로 상태 다이어그램을 생성합니다.
stateDiagram-v2
state "Pending Payment" as Pending
[*] --> Pending
Pending --> Paid
Paid --> Shipped
Shipped --> Completed
Completed--> [*]
렌더링 결과
여기서:
자주 쓰는 구문
| 구문 | 다이어그램 | 의미 |
| stateDiagram-v2 | 상태 다이어그램 | 상태 다이어그램 생성 |
| state StateName | 둥근 사각형 | 기본 상태 노드를 정의합니다 |
| state StateName : text | 텍스트가 있는 둥근 사각형 | 상태에 설명 텍스트를 추가합니다 |
| [*] | 채워진 작은 원점 또는 이중 원형 | 상태 시작 또는 종료를 나타냅니다 |
| [*] --> StateName | 시작 화살표 | 첫 번째 상태로 진입함을 나타냅니다 |
| StateName --> [*] | 종료 화살표 | 상태 흐름의 종료를 나타냅니다 |
| A --> B | 실선 화살표 | 상태 전환을 나타냅니다 |
| A --> B: event | 주석이 있는 실선 화살표 | 트리거 이벤트가 있는 상태 전환 |
| state StateName { ... } | 중첩 둥근 사각형 | 복합 상태를 정의합니다 |
| state Node <<choice>> | 다이아몬드 | 분기 판단 선택 노드 |
| state Fork <<fork>> | 굵은 가로 구분선 | 병렬 프로세스 시작을 나타냅니다 |
| state Join <<join>> | 굵은 가로 구분선 | 병렬 프로세스 종료 및 병합을 나타냅니다 |
Mermaid 상태 다이어그램 생성 상세 구문은 다음 페이지에서 확인하세요: https://www.processon.io/ko/mermaid/state-diagram
상태 다이어그램은 주문 상태, 워크플로 상태, 사용자 상태, 시스템 상태 및 상태 머신 등을 표현하는 데 적합하며, 무료로 Mermaid 상태 다이어그램 온라인 편집기.
기본 구문
Mermaid 는 erDiagram 선언으로 엔터티 관계 다이어그램, 즉 ER 다이어그램을 생성합니다.
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ PRODUCT : contains
렌더링 결과
여기서:
자주 쓰는 구문
| 구문 | 다이어그램 | 의미 |
| erDiagram | ER 다이어그램 | 생성: ER 다이어그램 |
| ENTITY { } | 사각형 | 엔터티를 정의합니다 |
| type field | 속성 표시 | 엔터티 속성을 정의합니다 |
| type field PK | 기본 키 | 엔터티 기본 키를 정의합니다 |
| type field FK | 외래 키 | 엔터티 외래 키를 정의합니다 |
| type field UK | 고유 키 | 고유 제약 조건 필드를 정의합니다 |
| || | 하나 | 반드시 하나만 |
| o| | 0 또는 1 | 0 또는 1 |
| |{ | 1 이상 | 최소 하나 |
| o{ | 0 또는 1 이상 | 0 이상 |
Mermaid ER 다이어그램 생성 상세 구문은 다음 페이지에서 확인하세요: https://www.processon.io/ko/mermaid/er-diagram
ER 다이어그램은 엔터티, 속성 및 엔터티 사이의 관계를 표현할 수 있으며, 데이터베이스 설계에 자주 사용됩니다, 무료로 Mermaid ER 다이어그램 온라인 편집기.
기본 구문
Mermaid 는 mindmap 선언으로 마인드맵을 생성합니다.
mindmap
root((Mermaid))
Flowchart
Sequence diagram
Class diagram
Gantt chart
Mind map
렌더링 결과
여기서:
자주 쓰는 구문
| 구문 | 다이어그램 | 의미 |
| mindmap | 마인드맵 | 마인드맵 생성 |
| root[text] | 사각형 | 사각형 루트 주제 |
| root(text) | 둥근 사각형 | 둥근 사각형 루트 주제 |
| root((text)) | 원형 | 원형 루트 주제 |
| root{{text}} | 육각형 | 육각형 루트 주제 |
| root)text( | 버블 차트 | 버블 루트 주제 |
| [text] | 사각형 | 사각형 노드 |
| (text) | 둥근 사각형 | 둥근 사각형 노드 |
| ((text)) | 원형 | 원형 노드 |
| {{text}} | 육각형 | 육각형 노드 |
| )text( | 버블 차트 | 버블 노드 |
Mermaid 마인드맵 생성 상세 구문은 다음 페이지에서 확인하세요: https://www.processon.io/ko/mermaid/mindmap
마인드맵은 주로 들여쓰기로 계층 관계를 표현하므로 지식 정리, 브레인스토밍, 강의 노트 및 정보 구조 설계에 매우 적합합니다, 무료로 Mermaid 마인드맵 온라인 편집기.
기본 구문
Mermaid 는 gantt 선언으로 간트 차트를 생성합니다.
gantt
title Project Plan
dateFormat YYYY-MM-DD
section Design
Requirements Analysis:a1, 2026-01-01, 3d
UI Design:after a1, 2d
section Development
Front-end Development:2026-01-06, 4d
Back-end Development:2026-01-07, 4d
렌더링 결과
여기서:
gantt: Mermaid 간트 차트 생성을 나타냅니다
| 구문 | 다이어그램 | 의미 |
| gantt | 간트 차트 | 간트 차트 생성 |
| title text | 제목 | 간트 차트 제목을 설정합니다 |
| dateFormat text | 날짜 설정 식별자 | 타임라인 날짜 파싱 형식을 정의합니다 |
| section text | 그룹 색상 블록 제목 표시줄 | 작업 그룹을 구분합니다 |
| TaskName : id, startDate, endDate | 가로형 작업 막대 | 작업의 관련 속성을 정의합니다 |
| startDate | 가로형 작업 막대 | 시작 시간을 정의합니다 |
| endDate | 가로형 작업 막대 | 종료 시간을 정의합니다 |
| duration | 가로형 작업 막대 | 작업 지속 시간을 정의합니다 |
| id | 사용자 지정 | 작업의 번호를 정의합니다 |
| after id | 가로형 작업 막대 | 선행 작업을 따라 시작하는 작업을 정의합니다 |
| 16d, 2w | 가로형 작업 막대 | 일 또는 주를 나타냅니다 |
| milestone, date | 채워진 다이아몬드 | 마일스톤 노드를 설정합니다 |
Mermaid 간트 차트 생성 상세 구문은 다음 페이지에서 확인하세요: https://www.processon.io/ko/mermaid/gantt
Mermaid 간트 차트는 프로젝트 계획, 작업 일정, 개발 진행 상황 및 프로젝트 관리에 적합합니다, 무료로 Mermaid 간트 차트 온라인 편집기.
기본 구문
Mermaid는 journey 선언으로 사용자 여정 지도를 생성합니다.
journey
title User purchases a product
section Browse
Search for products: 5: User
View details: 4: User
section Place order
Add to cart: 5: User
Complete payment: 3: User
렌더링 결과
여기서:
자주 쓰는 구문
| 구문 | 다이어그램 | 의미 |
| journey | 사용자 여정 지도 | 사용자 여정 지도 생성 |
| title text | 제목 | 사용자 여정 지도 제목 |
| section text | 구간 블록 | 프로세스 단계 그룹을 구분합니다 |
| TaskName:num:Actor | 프로세스 노드 + 만족도 눈금 축 | 단계 안의 상호작용 작업, 만족도 점수, 참여 역할을 정의합니다 |
| num (1~5) | 만족도 점수 | 1점이 최저, 5점이 최고 |
| Me, Cat | 역할 | 해당 작업에 참여하는 여러 역할을 정의합니다 |
Mermaid 사용자 여정 지도 생성 상세 구문은 다음 페이지에서 확인하세요: https://www.processon.io/ko/mermaid/user-journey-diagram
사용자 여정 지도는 고객이 제품을 접한 뒤 목표를 완료하기까지 겪는 여러 단계와 경험을 분석하기에 적합합니다, 무료로 Mermaid 사용자 여정 지도 온라인 편집기.
기본 구문
Mermaid 는 timeline 선언으로 타임라인을 생성합니다.
timeline
title Mermaid Development History
2019 : Project Development
2020 : Feature Expansion
2021 : More Diagram Types
렌더링 결과
여기서:
자주 쓰는 구문
| 구문 | 다이어그램 | 의미 |
| timeline | 타임라인 | 타임라인 생성 |
| title text | 제목 | 타임라인 제목을 설정합니다 |
| section text | 구간 블록 | 시간 단계 그룹을 구분합니다 |
| date : Event1 | 이벤트 | 시간 지점에 대응하는 이벤트를 정의합니다 |
| : Event2 | 다중 이벤트 | 동일한 시간에 대응하는 다른 이벤트 |
| 공백 | 줄바꿈 | 너무 긴 이벤트 설명을 줄바꿈합니다 |
Mermaid 타임라인 생성 상세 구문은 다음 페이지에서 확인하세요: https://www.processon.io/ko/mermaid/timeline
타임라인은 역사적 사건, 프로젝트 발전, 제품 반복 및 시간 순서 정보를 보여주기에 적합합니다, 무료로 Mermaid 타임라인 온라인 편집기.
기본 구문
Mermaid 는 quadrantChart 선언으로 사분면 차트를 생성합니다.
quadrantChart
title Product Positioning
x-axis Low Price--> High Price
y-axis Low Quality--> High Quality
quadrant-1 High-end
quadrant-2 Quality-focused
quadrant-3 Basic
quadrant-4 Value-for-money
Product A: [0.8, 0.7]
Product B: [0.3, 0.8]
렌더링 결과
여기서:
Mermaid 사분면 차트 생성 상세 구문은 다음 페이지에서 확인하세요: https://www.processon.io/ko/mermaid/quadrant-chart
사분면 차트는 제품 포지셔닝, 우선순위 분석, 경쟁 분석 및 2차원 분류에 적합합니다, 무료로 Mermaid 사분면 차트 온라인 편집기.
기본 구문
Mermaid 칸반 다이어그램은 대기 중, 진행 중, 완료 등과 같이 작업 상태에 따라 작업 항목을 구성하는 데 사용합니다. 일반적인 구조는 다음과 같이 표현할 수 있습니다:
kanban
Todo
Task A
Task B
Doing
Task C
Done
Task D
렌더링 결과
여기서：
Mermaid 칸반 다이어그램 생성 상세 구문은 다음 페이지에서 확인하세요: https://www.processon.io/ko/mermaid/kanban
칸반 다이어그램은 프로젝트 관리, 작업 추적, 개발 프로세스 및 워크플로 관리에 적합합니다, 무료로 Mermaid 칸반 다이어그램 온라인 편집기.
기본 구문
요구사항 다이어그램은 요구사항, 기능 및 시스템 요소 사이의 관계를 표현하는 데 사용할 수 있습니다, Mermaid 는 requirementDiagram 선언으로 요구사항 다이어그램을 생성합니다.
requirementDiagram
requirement userRequirement {
id: 1
text: Customers can purchase products
risk: low
verifymethod: test
}
렌더링 결과
여기서:
자주 쓰는 구문
| 구문 | 다이어그램 | 의미 |
| requirementDiagram | 요구사항 다이어그램 | 요구사항 다이어그램 생성 |
| Requirement name { } | 요구사항 | 기본 요구사항을 정의합니다 |
| functionalRequirement name { } | 기능 | 기능 요구사항을 정의합니다 |
| interfaceRequirement name { } | 인터페이스 | 인터페이스 요구사항을 정의합니다 |
| performanceRequirement name { } | 성능 | 성능 요구사항을 정의합니다 |
| physicalRequirement name { } | 물리 | 물리 요구사항을 정의합니다 |
| element name {type: name docRef: name} | 요소 | 시스템 / 컴포넌트 / 테스트 등의 엔터티 요소를 정의합니다 |
| X - satisfies -> Y | 점선 화살표 | 엔터티가 해당 요구사항을 충족합니다 |
| X - contains -> Y | 실선이며, 시작점에 십자 더하기 모양의 원형 끝점이 있습니다 | 하나의 요구사항이 다른 요구사항을 포함합니다 |
| X - derives -> Y | 점선 화살표 | 요구사항이 다른 요구사항에서 파생됩니다 |
| X - copies -> Y | 점선 화살표 | 요구사항이 다른 요구사항을 복사합니다 |
| X - traces -> Y | 점선 화살표 | 요구사항 양방향 추적 연관 |
Mermaid 요구사항 다이어그램 상세 구문은 다음 페이지에서 확인하세요: https://www.processon.io/ko/mermaid/requirement-diagram
요구사항 다이어그램은 제품 요구사항 분석, 시스템 엔지니어링 및 요구사항 추적에 적합합니다, 무료로 Mermaid 요구사항 다이어그램 온라인 편집기.
기본 구문
Mermaid 는 pie 선언으로 파이 차트를 생성합니다.
pie showData
title Population Share by Continent
"Asia" : 59.5
"Africa" : 18.0
"Europe" : 9.0
"North America" : 7.5
"South America" : 5.5
"Oceania" : 0.5
렌더링 결과
여기서:
Mermaid 파이 차트 생성 상세 구문은 다음 페이지에서 확인하세요: https://www.processon.io/ko/mermaid/pie-chart
파이 차트는 비율과 구성 관계를 나타내는 데 적합합니다, 무료로 Mermaid 파이 차트 온라인 편집기.
기본 구문
생키 다이어그램은 주로 서로 다른 노드 사이의 트래픽, 자원, 자금 또는 데이터 흐름을 나타내는 데 사용됩니다, Mermaid 는 sankey-beta 선언으로 생키 다이어그램을 생성합니다.
sankey-beta
A,B,50
A,C,30
B,D,20
C,D,30
렌더링 결과
여기서:
Mermaid 생키 다이어그램 생성 상세 구문은 다음 페이지에서 확인하세요: https://www.processon.io/ko/mermaid/sankey-diagram
생키 다이어그램은 한 그룹의 수치에서 다른 그룹의 수치로 흐르는 모습을 보여주는 시각화 차트입니다, 무료로 Mermaid 생키 다이어그램 온라인 편집기.
기본 구문
Mermaid 는 xychart-beta 선언으로 XY 차트를 생성합니다.
xychart-beta
title "Monthly Sales Data"
x-axis "Month"["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
y-axis " Sales (million)" 0 --> 100
line [20, 30, 40, 35, 50, 60]
bar [30, 50, 35, 20, 45, 40]
렌더링 결과
여기서:
자주 쓰는 구문
| 구문 | 다이어그램 | 의미 |
| xychart-beta | XY 좌표 차트 | XY 좌표 차트 생성 |
| xychart-beta horizontal | 가로형 XY 좌표 차트 | 가로형 XY 좌표 차트 생성 |
| title "name" | 제목 | XY 차트 제목을 정의합니다 |
| x-axis "axisTitle" [a,b,c] | X축 | 가로축 카테고리와 제목을 정의합니다 |
| y-axis "axisTitle" min --> max | Y축 | 세로축 범위와 제목을 정의합니다 |
| y-axis "axisTitle" | 제목만 있는 Y축 | 세로축 이름만 설정하면 수치 범위가 자동으로 맞춰집니다 |
| bar [num1, num2, num3] | 막대 차트 | 막대 차트 데이터 계열을 정의합니다 |
| line [num1, num2, num3] | 꺾은선 차트 | 꺾은선 차트 데이터 계열을 정의합니다 |
Mermaid xy 차트 생성 상세 구문은 다음 페이지에서 확인하세요: https://www.processon.io/ko/mermaid/xy-chart
XY 차트는 데이터 변화, 수치 비교 및 간단한 데이터 시각화를 보여주기에 적합합니다, 무료로 Mermaid XY 차트 온라인 편집기.
기본 구문
레이더 차트는 역량 평가, 제품 지표, 방안 비교 등 여러 객체를 여러 차원에서 비교하기에 적합합니다. Mermaid 는 radar-beta 선언으로 레이더 차트를 생성합니다.
radar-beta
title "Competency Assessment Radar Chart"
axis a["Communication Skills"], b["Logical Thinking"], c["Team Collaboration"], d["Technical Skills"]
curve A["Chenlaoda"] {80, 90, 70, 85}
curve B["Wangxiaoer"] {60, 70, 90, 80}
렌더링 결과
여기서:
자주 쓰는 구문
| 구문 | 다이어그램 | 의미 |
| radar-beta | 레이더 차트 | 레이더 차트 생성 |
| title "name" | 제목 | 레이더 차트 제목을 정의하며, radar-beta 바로 뒤에 옵니다 |
| title "name" | 제목 | 레이더 차트 제목을 정의하며, radar-beta 앞에 두고 위아래에 중간선 3개를 추가해야 합니다 |
| axis id ["axisTitle"] | 차원 축 | 레이더 차트 차원 및 이름을 정의합니다 |
| curve id ["name"]{[values]} | 데이터 곡선 | 데이터 계열 이름과 각 차원의 수치를 정의합니다 |
| max value | 최댓값 | 레이더 차트 수치 범위의 최댓값을 설정합니다 |
| min value | 최솟값 | 레이더 차트 수치 범위의 최솟값을 설정합니다 |
Mermaid 레이더 차트 생성 상세 구문은 다음 페이지에서 확인하세요: https://www.processon.io/ko/mermaid/radar-chart
레이더 차트는 데이터를 원형 형식으로 명확하고 간결하게 표현해야 하는 개발자, 데이터 과학자 및 엔지니어에게 특히 유용합니다, 무료로 Mermaid 레이더 차트 온라인 편집기.
기본 구문
Mermaid 는 gitGraph 선언으로 Git 그래프를 생성합니다.
gitGraph
commit
branch develop
checkout develop
commit
checkout main
merge develop
렌더링 결과
여기서:
Mermaid Git 그래프 생성 상세 구문은 다음 페이지에서 확인하세요: https://www.processon.io/ko/mermaid/git-graph
Git 그래프는 Git 커밋, 브랜치 생성, 브랜치 전환 및 병합 등 버전 관리 과정을 나타내는 데 적합합니다, 무료로 Mermaid Git 그래프 온라인 편집기.
기본 구문
Mermaid C4 다이어그램은 소프트웨어 아키텍처 모델링에 사용되며, 소프트웨어 시스템, 컨테이너, 컴포넌트 및 그들 사이의 관계를 서로 다른 계층에서 설명할 수 있습니다.
C4Context
title C4 Diagram of the Business System
Person(user, " User", " System user")
System(system, " Business System", " Core business system")
Rel(user, system, "Uses")
렌더링 결과
여기서:
자주 쓰는 구문
| 구문 | 다이어그램 | 의미 |
| C4Context | 시스템 컨텍스트 다이어그램 | C4 시스템 컨텍스트 다이어그램 생성 |
| C4Container | 컨테이너 다이어그램 | C4 컨테이너 다이어그램 생성 |
| C4Component | 컴포넌트 다이어그램 | C4 컴포넌트 다이어그램 생성 |
| C4Dynamic | 동적 상호작용 다이어그램 | C4 동적 상호작용 다이어그램 생성 |
| C4Deployment | 배포 다이어그램 | C4 배포 다이어그램 생성 |
| title | 제목 | C4 다이어그램 제목을 설정합니다 |
| Person(alias, "label", "description") | 사람 | 시스템을 사용하는 사용자 또는 역할을 나타냅니다 |
| Person_Ext(alias, "label", "description") | 외부 사람 | 시스템 외부에서 상호작용에 참여하는 사람 또는 조직 역할을 나타냅니다 |
| System(alias, "label", "description") | 시스템 노드 | 분석이 필요한 소프트웨어 시스템을 나타냅니다 |
| System_Ext(alias, "label", "description") | 외부 시스템 노드 | 시스템이 의존하는 서드파티 서비스 또는 외부 소프트웨어 시스템을 나타냅니다 |
| System_Boundary(alias, "label") | 시스템 경계 | 시스템 범위 경계를 나타냅니다 |
| Container(alias, "label", "technology") | 컨테이너 | 시스템 내부에서 독립적으로 실행될 수 있는 소프트웨어 단위를 나타냅니다 |
| Container_Boundary(alias, "label") | 컨테이너 경계 | 하나의 컨테이너 또는 서비스의 범위를 나타냅니다 |
Mermaid C4 다이어그램 생성 상세 구문은 다음 페이지에서 확인하세요: https://www.processon.io/ko/mermaid/c4-diagram
C4 다이어그램은 소프트웨어 아키텍처 설계, 시스템 분석 및 기술 문서에 적합합니다, 무료로 Mermaid C4 다이어그램 온라인 편집기.
기본 구문
Mermaid 는 architecture-beta 선언으로 아키텍처 다이어그램을 생성합니다.
architecture-beta
group api(cloud)[API server]
service server(server)[server] in api
service database(database)[databasa] in api
server:R --> L:database
렌더링 결과
여기서:
Mermaid 아키텍처 다이어그램 생성 상세 구문은 다음 페이지에서 확인하세요: https://www.processon.io/ko/mermaid/architecture-diagram
아키텍처 다이어그램은 서버, 데이터베이스, 클라우드 서비스, 애플리케이션 서비스 및 서로 다른 시스템 컴포넌트 사이의 관계를 나타내는 데 적합합니다, 무료로 Mermaid 아키텍처 다이어그램 온라인 편집기.
기본 구문
블록 다이어그램은 주로 모듈과 연결 관계로 시스템 구조를 설명합니다, Mermaid 는 block-beta 선언으로 블록 다이어그램을 생성합니다.
block-beta
A space B
A["User"] --> B["Application"]
B space C
B --> C["Database"]
렌더링 결과
여기서:
Mermaid 블록 다이어그램 생성 상세 구문은 다음 페이지에서 확인하세요: https://www.processon.io/ko/mermaid/block-diagram
블록 다이어그램은 시스템 모듈, 기능 구조, 기술 아키텍처 및 컴포넌트 관계 등의 상황에 적합합니다, 무료로 Mermaid 블록 다이어그램 온라인 편집기.
기본 구문
패킷 다이어그램은 주로 네트워크 패킷 또는 프로토콜 데이터 구조에서 필드와 길이를 나타내는 데 사용됩니다, Mermaid 는 packet-beta 선언으로 패킷 다이어그램을 생성합니다.
packet-beta
0-7: "Version"
8-15: "Type"
16-31: "Length"
렌더링 결과
여기서:
패킷 다이어그램은 네트워크 프로토콜, 패킷 구조 및 기술 사양 문서에 적합합니다, 무료로 Mermaid 패킷 다이어그램 온라인 편집기.
Mermaid 구문에 익숙하지 않다고 해서 Mermaid로 다이어그램을 생성할 수 없는 것은 아니며, 다음과 같은 몇 가지 방법을 사용할 수 있습니다:
무료로 Mermaid 템플릿 사용
요구사항에 가까운 템플릿을 먼저 선택한 다음, 그 안의 노드, 텍스트와 관계를 수정합니다. 이 방식은 Mermaid를 처음 사용하는 사용자에게 적합합니다.
AI로 Mermaid 코드 생성
필요한 다이어그램을 자연어로 바로 설명할 수 있습니다. 예를 들어:
전자상거래주문 처리 흐름을 만들어 주세요. 사용자 주문, 결제, 재고 확인, 배송 및 주문 완료를 포함합니다.
AI는 설명을 바탕으로 Mermaid 코드를 생성하고, 실제 요구사항에 맞게 수정할 수 있습니다.
AI로 코드 검사 및 수정
Mermaid 코드에 구문 오류가 있으면 AI가 문제를 찾아내고 코드를 수정하도록 도움을 줄 수 있습니다.
이미지 인식으로 코드 생성
이미 존재하는 순서도, 아키텍처 다이어그램 또는 기타 구조화된 다이어그램은 이미지 인식으로 Mermaid 코드를 생성한 뒤 계속 편집할 수 있습니다.
Mermaid 온라인 편집기는 일반적으로 세 가지 핵심 문제를 해결해야 합니다: 코드 작성, 다이어그램 미리보기 및 결과 내보내기. 그 외에도 템플릿과 AI가 Mermaid 사용의 진입 장벽을 낮춰 줍니다.
예를 들어 ProcessOn Mermaid 온라인 편집기를 예로 들면, 브라우저에서 바로 다음을 할 수 있습니다:
따라서 자주 생성해야 하는 다이어그램 사용자에게는, ProcessOn Mermaid 온라인 편집기는 Mermaid 코드 작성, 다이어그램 생성, 2차 편집, 내보내기와 공유를 하나의 작업 환경에 모아 줍니다.
Mermaid 순서도, 시퀀스 다이어그램, 클래스 다이어그램부터 간트 차트, 마인드맵, 사분면 차트, 생키 다이어그램, Git 그래프, C4 다이어그램과 아키텍처 다이어그램까지 모두 Mermaid 구문으로 생성할 수 있습니다 하고 편집할 수 있습니다.
지금 바로 사용해 보세요 Mermaid 온라인 편집기에서 온라인으로 Mermaid 코드를 작성하고 다이어그램을 생성해 보세요!.
Mermaid 구문은 배우기 어렵나요?
Mermaid의 기본 구문은 비교적 간단합니다. 대부분의 차트는 차트 선언, 노드, 연결 및 텍스트에 대한 기본 구문만 익히면 됩니다. 예를 들어, `sequenceDiagram`은 시퀀스 다이어그램을 선언하는 데 사용되고, `flowchart`는 순서도를 선언하는 데 사용됩니다. 차트 유형에 따라 구문 규칙이 다르며, 복잡한 차트는 해당 매개변수 및 구성에 대한 추가 학습이 필요합니다.
Mermaid 코드를 잘못 작성하면 왜 다이어그램이 생성되지 않나요?
Mermaid는 구문 구조에 매우 민감합니다. 일반적인 원인으로는 잘못된 차트 선언, 불완전한 노드 또는 연결 구문, 잘못된 들여쓰기 또는 특수 문자 처리, 그리고 현재 Mermaid 버전에서 지원하지 않는 구문 사용 등이 있습니다.
Mermaid와 기존 그리기 소프트웨어의 차이는 무엇인가요?
Mermaid는 주로 텍스트 코드를 사용하여 차트를 설명하는 반면, 기존 차트 소프트웨어는 일반적으로 그래픽을 드래그 앤 드롭하고, 선을 연결하고, 스타일을 조정하여 차트를 생성합니다.
Mermaid 다이어그램은 저장하고 재사용할 수 있나요?
가능합니다. Mermaid 다이어그램의 핵심은 텍스트 코드이므로, 코드를 Markdown, 코드 파일 또는 Mermaid를 지원하는 다른 문서에 저장하고 필요할 때 다시 렌더링할 수 있습니다.
이것이 Mermaid와 순수 이미지 형태 다이어그램의 중요한 차이점이기도 합니다: 이미지는 최종 결과를 저장하지만, Mermaid 코드는 다이어그램의 구조 정보도 함께 저장합니다.
Mermaid와 Markdown은 어떤 관계인가요?
Mermaid는 Markdown과 함께 자주 사용되지만, 둘은 같은 구문이 아닙니다.
Markdown은 주로 구조화된 텍스트를 작성하는 데 사용되고, Mermaid는 코드로 다이어그램을 생성하는 데 사용됩니다. Mermaid를 지원하는 Markdown 편집기에서는 Mermaid 코드를 Markdown 문서에 삽입해 다이어그램과 텍스트 설명을 같은 문서에 담을 수 있습니다.
