본문 바로가기
visualize

[다이어그램] mermaid 11.16.0_(1/2) 1~18

by 죄니안죄니 2026. 7. 23.
반응형

1. Flowcharts - Basic Syntax

Flowchart는 크게 두 요소로 구성돼.

  • Node: 네모, 원 같은 도형
  • Edge: 노드를 연결하는 선이나 화살표

가장 기본적인 형태는 다음과 같아.

 
flowchart LR
    A --> B
Flowcharts - Basic Syntax
  • flowchart: 플로우차트를 그린다는 선언
  • LR: 왼쪽에서 오른쪽으로 배치
  • A, B: 노드 ID
  • -->: 화살표

Mermaid에서는 flowchart 대신 예전 문법인 graph를 사용해도 된다.

 
graph LR
    A --> B
 

주의할 단어

노드에 소문자 end를 그대로 쓰면 문법이 깨질 수 있다.

 
flowchart LR
    A[end]
 

따라서 다음처럼 써야 안전해.

 
flowchart LR
    A[End]
 

또한 연결선 바로 뒤에서 노드 ID가 소문자 o, x로 시작하면 특수 화살표로 해석될 수 있다. 예를 들어 A---oB는 원형 끝점, A---xB는 X형 끝점으로 인식된다.

2. A node (default)

가장 기본적인 노드야.

 
flowchart LR
    A
 

또는

 
flowchart LR
    A[A]
 

A는 노드의 ID이면서 화면에 표시되는 텍스트가 된다.

A
A node (default)

3. A node with text

노드 ID와 화면에 보이는 텍스트를 다르게 할 수 있어.

 
flowchart LR
    A[주문 접수]
A node with text (1)

여기서:

  • A: 코드에서 사용하는 노드 ID
  • 주문 접수: 화면에 표시되는 문구

연결할 때는 표시 문구가 아니라 ID를 사용한다.

 
flowchart LR
    A[주문 접수]
    B[결제]
    A --> B
A node with text (2)

같은 ID에 텍스트를 여러 번 지정하면 마지막에 작성한 텍스트가 사용된다.

 

 

flowchart LR
    A[처음 문구]
    A[마지막 문구]
A node with text (3)

결과에는 마지막 문구가 표시된다.

4. Unicode text

한글, 하트, 이모지, 중국어 같은 유니코드 문자를 넣을 때는 큰따옴표로 감싸는 방식이 권장돼.

 
flowchart LR
    A["안녕하세요 ❤ 😀"]
Unicode text
 
flowchart LR
    A["中文 테스트"]
Unicode text

공식 문서에서는 유니코드 텍스트를 큰따옴표로 감싸도록 설명한다.

단순한 한글은 따옴표 없이도 동작하는 경우가 많지만, 특수문자가 포함되면 큰따옴표를 사용하는 편이 안전해.

 
flowchart LR
    A["크리스마스 🎄"]
Unicode text

5. Markdown formatting

노드 안에서 굵게, 기울임 같은 Markdown 서식을 사용할 수 있어.

큰따옴표 안에 다시 백틱을 넣는다.

 
flowchart LR
    A["`**굵은 글씨**`"]
Markdown formatting

기울임은 별표 한 개를 사용한다.

 
flowchart LR
    A["`*기울임 글씨*`"]
Markdown formatting

둘을 함께 사용할 수도 있어.

 
flowchart LR
    A["`***굵은 기울임***`"]
Markdown formatting

즉, 구조는 다음과 같아.

A["`Markdown 문법`"]
 

공식 문서에서도 Markdown 텍스트는 큰따옴표와 백틱으로 감싸도록 설명한다.

6. Direction

Flowchart가 어느 방향으로 흐를지 설정하는 부분이야.

위에서 아래

 
flowchart TB
    A --> B
Direction

또는

 
flowchart TD
    A --> B
 

TB와 TD는 사실상 같은 방향이다.

아래에서 위

 
flowchart BT
    A --> B
Direction

왼쪽에서 오른쪽

 
flowchart LR
    A --> B
Direction

오른쪽에서 왼쪽

 
flowchart RL
    A --> B
Direction

정리하면:

방향 의미
TB Top to Bottom
TD Top Down, TB와 동일
BT Bottom to Top
LR Left to Right
RL Right to Left

공식 문서에서도 이 다섯 방향을 지원한다고 설명한다.

일반적으로:

  • 업무 흐름, 처리 단계: TD
  • 시스템 구성, 데이터 흐름: LR

를 많이 사용해.

7. Node shapes

여기부터는 노드의 모양을 바꾸는 문법이야.

 
flowchart LR
    A[사각형]
    B(둥근사각형)
    C([Stadium])
    D[[Subroutine ]]
    E((원형))
    E2(((겹원)))
    F[(원통형)]
    A~~~B~~~C~~~D~~~E~~~E2~~~F
    
    G>비대칭 도형]
    H{마름모}
    I{{육각형}}
    J[/평행사변형/]
    J2[\평행사변형\]
    K[/사다리꼴\]
    K2[\사다리꼴/]
    G~~~H~~~I~~~J~~~J2~~~K~~~K2
flowchart LR
    A[사각형]
    B(둥근사각형)
    C([Stadium])
    D[[Subroutine ]]
    E((원형))
    E2(((겹원)))
    F[(원통형)]
    A~~~B~~~C~~~D~~~E~~~E2~~~F
    
    G>비대칭 도형]
    H{마름모}
    I{{육각형}}
    J[/평행사변형/]
    J2[\평행사변형\]
    K[/사다리꼴\]
    K2[\사다리꼴/]
    G~~~H~~~I~~~J~~~J2~~~K~~~K2
 

 

모양 문법 결과  
사각형(Default) A[텍스트] ▭ 작업process
둥근 사각형 A(텍스트) ⬭ 시작/종료 혹은 일반적인 동작
경기장(Stadium) A([텍스트]) ⬯ 시작/종료
subroutine A[[텍스트]]   별도의 함수, 하위 프로세스, 서브루틴
원 A((텍스트)) ◯ 시작점, 이벤트, 연결 지점
이중원 A(((텍스트)))   종료나 최종 상태를 강조
Database A[(텍스트)]   데이터베이스나 저장소
비대칭 A>텍스트] 한쪽이 기울어진 모양  
마름모(Decision) A{텍스트} ◇ 조건 decision
육각형 A{{텍스트}} ⬢ 조건을 준비하거나 사전 처리, 데이터베이스/저장소 등 특수노드
평행사변형 A[/텍스트/] ▱  
역평행사변형 A[\텍스트\] ▱ (반대 방향)  
사다리꼴 A[/텍스트\] ⏢  
역사다리꼴 A[\텍스트/] 뒤집힌 사다리꼴  

 

실무에서 가장 많이 사용하는 모양

실제로는 아래 5개만 알아도 대부분의 플로우차트 그리기 가능.

용도 모양 예시
시작/종료 ( ), ([]) A(시작)
작업(Process) [ ] A[주문 처리]
조건(Decision) { } A{결제 성공?}
입력/출력 [/ /] A[/사용자 입력/]
데이터베이스/저장소 등 특수 노드 [( )], {{ }} 등 상황에 따라 사용

예시: 로그인 흐름

 
flowchart LR
    A(시작)
    B[/아이디·비밀번호 입력/]
    C{로그인 성공?}
    D[메인 화면]
    E[오류 메시지]
    F(종료)

    A --> B
    B --> C
    C -->|예| D
    C -->|아니오| E
    D --> F
    E --> B
일반적인 사용 패턴

이 예시처럼 시작(둥근 사각형) → 입력(평행사변형) → 조건(마름모) → 작업(사각형)을 조합하는 것이 가장 일반적인 사용 패턴

 
 
 

8. Expanded Node Shapes

Mermaid 11.3.0부터 많은 도형을 통일된 문법으로 지정할 수 있게 됐어.

 
flowchart LR
    A@{ shape: rect, label: "처리" }
Expanded Node Shapes

형식은 다음과 같아.

노드ID@{ shape: 도형명, label: "표시 문구" }
 

예를 들어:

 
flowchart LR
    A@{ shape: database, label: "회원 DB" }
Expanded Node Shapes

기존에는 괄호 모양 자체가 도형을 결정했지만, 새로운 문법은 shape 속성으로 모양을 명확히 지정한다. Mermaid 11.3.0에서는 프로세스, 판단, 저장소 등을 표현하는 다양한 새 도형이 추가됐다.

9. 새 도형들의 의미

도형이 많지만 모두 외울 필요는 없어. 의미별로 보면 이해하기 쉬워.

처리 관련

도형 의미
Process 일반 처리
Subprocess 하위 프로세스
Multi-Process 여러 프로세스
Divided Process 구역이 나뉜 처리
Lined Process 강조되거나 별도 표시된 처리
Tagged Process 태그가 붙은 처리

예:

 
flowchart LR
    A@{ shape: rect, label: "주문 처리" }
    B@{ shape: subprocess, label: "결제 처리" }
    A --> B
새 도형들의 의미

시작·종료 관련

도형 의미
Start Circle 시작
Small Circle 작은 시작점
Stadium 시작 또는 종료
Double Circle 종료
Framed Circle 정지

판단·조건 관련

도형 의미
Decision 조건 판단
Prepare Conditional 조건 준비
Loop Limit 반복 제한
Extract 분리·추출

데이터 관련

도형 의미
Database 데이터베이스
Datastore 데이터 저장소
Disk Storage 디스크 저장소
Direct Access Storage 직접 접근 저장소
Internal Storage 내부 저장 공간
Stored Data 저장된 데이터

문서 관련

도형 의미
Document 문서 한 개
Multi-Document 여러 문서
Lined Document 강조된 문서
Tagged Document 태그가 붙은 문서

수동 작업·입출력 관련

도형 의미
Manual Input 사용자가 직접 입력
Manual Operation 수동 작업
Manual File 수동 파일 처리
Data Input/Output 데이터 입출력
Display 화면 표시

흐름 보조 관련

도형 의미
Fork/Join 흐름 분리 또는 합류
Junction 연결 지점
Collate 자료 취합
Summary 결과 요약
Delay 지연
Comment 설명 또는 주석
Com Link 통신 연결

공식 문서에는 각 도형의 의미와 사용할 수 있는 별칭도 함께 정리돼 있다.

실제로는 다음 정도만 먼저 알아도 충분해.

rect        일반 처리
rounded     이벤트
diamond     조건
database    DB
document    문서
subprocess  하위 처리
start       시작
stop        종료
 

10. Icon Shape

노드 안에 아이콘을 넣을 수 있어.

 
flowchart LR
    A@{ icon: "fa:user", label: "사용자", form: "circle" }
Icon Shape

주요 속성은 다음과 같아.

속성 의미
icon 사용할 아이콘 이름
form 아이콘 배경 모양
label 표시할 텍스트
pos 텍스트 위치
h 아이콘 높이

form은 다음 값을 사용할 수 있어.

square
circle
rounded
 

pos는:

t = 위
b = 아래
 

아이콘을 사용하려면 먼저 아이콘 팩을 등록해야 한다.

11. Image Shape

노드에 외부 이미지를 넣을 수도 있어.

 
flowchart TD
  %% My image with a constrained aspect ratio
  A@{ img: "https://mermaid.js.org/favicon.svg", label: "My example image label", pos: "t", h: 60, constraint: "on" }
 
Image Shape

속성의 의미:

속성 의미
img 이미지 주소
label 이미지 설명
pos 문구 위치
w 너비
h 높이
constraint 원본 비율 유지 여부

비율을 유지하면서 크기를 바꾸려면:

constraint: "on"
 

으로 지정하고 높이 h를 설정하는 방식이 권장된다.

12. Links between nodes

이제 노드를 연결하는 선과 화살표에 관한 내용이야.

기본 화살표

flowchart LR
    A --> B
Links between nodes

화살표 없는 선

flowchart LR
    A --- B
Links between nodes

선 위에 텍스트 넣기

flowchart LR
    A -->|결제 성공| B
Links between nodes

또는:

 
flowchart LR
    A -- 결제 성공 --> B
 

둘 다 같은 의미야.

점선

flowchart LR
    A -.-> B
Links between nodes

텍스트가 있는 점선

 
flowchart LR
    A -. 확인 .-> B
Links between nodes

굵은 선

 
flowchart LR
    A ==> B
Links between nodes

텍스트가 있는 굵은 선

 
flowchart LR
    A == 중요 ==> B
Links between nodes

보이지 않는 선

 
flowchart LR
    A ~~~ B
Links between nodes

화면에는 선이 안 보이지만 배치 계산에는 영향을 준다. 노드 위치를 조정할 때 사용할 수 있다.

13. Chaining of links

여러 노드를 한 줄로 연결할 수 있어.

 
flowchart LR
   A -- text --> B -- text2 --> C
Chaining of links

다음처럼 한 노드에서 여러 노드로 연결할 수도 있어.

 
flowchart LR
    a --> b & c
Chaining of links

반대로 합쳐지는 흐름도 가능해.

 
flowchart LR
    b & c --> d
Chaining of links

한번에 작성

 
flowchart LR
   a --> b & c--> d
Chaining of links


짧게 작성할 수 있다는 장점이 있지만, 너무 많은 연결을 한 줄에 넣으면 코드 가독성이 떨어질 수 있다고 공식 문서도 경고한다.

14. Attaching an ID to Edges

노드뿐 아니라 연결선에도 ID를 붙일 수 있어.

 
flowchart LR
    A e1@--> B
 

여기서:

  • e1: 연결선의 ID
  • @-->: ID가 붙은 화살표

연결선에 ID를 붙이면 이후에 스타일이나 애니메이션을 적용할 수 있어.

 

 

15. Edge Animation

ID가 붙은 연결선을 움직이게 할 수 있어.

 
flowchart LR
    A e1@--> B
    e1@{ animate: true }
 

속도도 설정할 수 있어.

 
flowchart LR
    A e1@--> B
    e1@{ animation: fast }
 

현재 문서에서 설명하는 속도는:

fast
slow
 

이다.

클래스로도 애니메이션을 적용할 수 있어.

 
flowchart LR
    A e1@--> B

    classDef animate stroke-dasharray: 5\,5,animation: dash 5s linear infinite;
    class e1 animate;
 

Mermaid 스타일 문법에서는 쉼표가 구분자로 사용되므로 stroke-dasharray 안의 쉼표는 \,처럼 이스케이프해야 한다.

16. New arrow types

일반 화살표 외에 원형과 X형 끝점을 사용할 수 있어.

Circle edge

flowchart LR
    A --o B
New arrow types

연결선 끝에 원이 표시돼.

Cross edge

flowchart LR
    A --x B
New arrow types

연결선 끝에 X가 표시돼.

17. Multi directional arrows

양방향 화살표를 만들 수 있어.

 
flowchart LR
    A <--> B
 

양쪽 노드가 서로 영향을 주거나 통신한다는 의미로 사용할 수 있어.

 
flowchart LR
    Client <--> Server
 

Mermaid는 양방향 연결 문법을 지원한다.

flowchart LR
    A o--o B
    B <--> C
    C x--x D
Multi directional arrows

18. Minimum length of a link

대시의 개수를 늘리면 노드 사이의 최소 거리를 늘릴 수 있어.

 
flowchart LR
    A --> B
    A ----> C
Minimum length of a link

C로 향하는 화살표가 더 길게 배치된다.


길이 일반 화살표
기본 -->
한 단계 길게 --->
두 단계 길게 ---->

굵은 선은 =을 늘리고, 점선은 .을 늘린다. 다만 렌더링 엔진이 전체 배치를 맞추기 위해 요청한 것보다 더 길게 만들 수도 있다.

반응형
저작자표시 (새창열림)

'visualize' 카테고리의 다른 글

[다이어그램] mermaid 11.16.0_(2/2) 19~36(끝)  (0) 2026.07.23
[다이어그램] 머메이드 mermaid.live 너 쫌 매력적이다  (0) 2026.07.23

관련글

댓글

티스토리툴바